Beginner guide to React

React is a declarative javascript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. This is an example of a React component.

  
    import React from 'react';

    class ShoppingList extends React.Component {
      render() {
        return (
          <div className="shopping-list">
            <ul>
              <li>Instagram</li>
              <li>WhatsApp</li>
              <li>Oculus</li>
            </ul>
          </div>
        );
      }
    }
  

Here ShoppingList is a React component. So it extends React.Component. We have a function called render, which returns UI code that needs to be displayed on screen. But this is not a pure HTML code. It is written in a syntax called JSX, which is a combination of markup and logic. The markup is written in HTML and CSS, and logic is written using Javascript expressions.

In this ShoppingList component, we are displaying the list of sites using the list tags in HTML. But you will find that the class name is used differently.

In normal HTML, we apply class using the attribute called “class”.

  
    <div class="shopping-list">
      <ul>
        <li>Instagram</li>
        <li>WhatsApp</li>
        <li>Oculus</li>
      </ul>
    </div>
  
But in JSX, we apply the class using the attribute called “className”.
  
    import React from 'react';

    class ShoppingList extends React.Component {
      render() {
        return (
          <div className="shopping-list">
            <ul>
              <li>Instagram</li>
              <li>WhatsApp</li>
              <li>Oculus</li>
            </ul>
          </div>
        );
      }
    }
  
It is because “class” is a reserved keyword in React. We use class keyword to define a class component in React
  
    import React from 'react';

    class ShoppingList extends React.Component {
      render() {
        return (
          <div className="shopping-list">
            <ul>
              <li>Instagram</li>
              <li>WhatsApp</li>
              <li>Oculus</li>
            </ul>
          </div>
        );
      }
    }
  
In order to render the ShoppingList component in the DOM, we will use another React class called ReactDOM. ReactDOM has render function, where the first parameter is a React component and
  
    import ReactDOM from 'react-dom';

    ReactDOM.render(
        <ShoppingList/>, 
        document.querySelector("#root")
    );
  
the second parameter is the container where we want to display the component.
  
    import ReactDOM from 'react-dom';

    ReactDOM.render(
        <ShoppingList/>, 
        document.querySelector("#root")
    );
  

Here the “root” is the “id” of the div, where we want to show the React component ShoppingList.

Let us put all the code together. The React and React DOM library can be imported in an app using script tags as well. So as shown here, we are going to create a simple HTML page.

  
    <!doctype html>
    <html>
    <head>
      <title>Shopping List</title>
    </head>
    <body>
    </body>
    </html>
  

Now we will import the React script, that is, React JS and React DOM JS.

  
    <!doctype html>
    <html>
    <head>
      <title>Shopping List</title>
    </head>
    <body>
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </body>
    </html>
  

We are also importing JSX library script which will allow us to write the code in JSX syntax.

  
    <!doctype html>
    <html>
    <head>
      <title>Shopping List</title>
    </head>
    <body>
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </body>
    </html>
  

You can replace the development versions with production versions if you are using the code in live application.

After importing the React scripts, we will create the container that will host the React component. The container will be a “div” element with an id of “root”.

  
    <!doctype html>
    <html>
    <head>
      <title>Shopping List</title>
    </head>
    <body>
      <div id="root"></div>
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </body>
    </html>
  

Note that we can insert a React component inside any container which can be uniquely selected. It is not necessary to have a “div” element with an “id”. We can have a “div” element with class as well, or a simple div.

  
    <!doctype html>
    <html>
    <head>
      <title>Shopping List</title>
    </head>
    <body>
      <div class="root"></div>
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </body>
    </html>
  

We will copy and paste the React component code of ShoppingList inside a script tag after the import script tags.

  
    <!doctype html>
    <html>
    <head>
      <title>Shopping List</title>
    </head>
    <body>
      <div id="root"></div>
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
      
      <script type="text/babel">
        class ShoppingList extends React.Component {
          render() {
            return (
              <div className="shopping-list">
                <ul>
                  <li>Instagram</li>
                  <li>WhatsApp</li>
                  <li>Oculus</li>
                </ul>
              </div>
            );
          }
        }
        ReactDOM.render(<ShoppingList/>, document.querySelector("#root"));
      </script>
    </body>
    </html>
  

We are using the script with an attribute called “text babel”. This will allow us to use the JSX code inside the script tag.

  
    <!doctype html>
    <html>
    <head>
      <title>Shopping List</title>
    </head>
    <body>
      <div id="root"></div>
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
      
      <script type="text/babel">
        class ShoppingList extends React.Component {
          render() {
            return (
              <div className="shopping-list">
                <ul>
                  <li>Instagram</li>
                  <li>WhatsApp</li>
                  <li>Oculus</li>
                </ul>
              </div>
            );
          }
        }
        ReactDOM.render(<ShoppingList/>, document.querySelector("#root"));
      </script>
    </body>
    </html>
  

Now let us run this html page using a web server. Run the below command in the folder where the file is present.

  
    npx http-server ./
  

You can see that the Shopping List component is displayed on the screen.

  • Instagram
  • WhatsApp
  • Oculus

So we have successfully created our first React application!