Introduction to React

Published in ReactJS

July 11, 2020

2 min read

Getting started with ReactJS is simple. Without getting into complicated toolchain, we can use ReactJS directly in our projects using the CDN URLs inside the HTML page script tags. This approach is fine for learning and creating simple demos.

The two URLs that we would require are:

https://unpkg.com/react@16/umd/react.production.min.js - It contains the core functionality of React and helps us describe the UI of our application. However, it has no idea how to render the UI.
https://unpkg.com/react-dom@16/umd/react-dom.production.min.js - react-dom defines the target platform for our application. The UI created using React can be rendered on a different platform and, in this case, react-dom render the UI on the browser.

Adding React to project

We can create a basic HTML page and drop these URLs inside script tags as follows.

<html>
  <head>
    <title>Introduction to React</title>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  </head>
  <body>
    <!-- container to render React -->
    <div id="root"></div>

    <script>
      // REST OF CODE GOES HERE
    </script>
  </body>
</html>

Once, we have above setup ready we would require two more things

A React element
Container to render React element

Creating React element

A simple React element could be a single HTML element with some content inside it. To create a React element we have to use the React.createElement() method.

const reactElement = React.createElement('h1', null, 'Hello World')

React.createElement() method takes following arguments

HTML tag or React Component. If we’re creating an HTML element, we pass in the name as a string, just like we did above. If we’re creating a React component, we pass in the variable that the component is assigned to.
props - these could be attributes of element or data
children - children could be simply a text node or again a React element

Rendering React element

Next, we need a DOM node to render element. In the basic structure defined above we have already created a DOM node with id of root. We will be using this node to render the React element created in previous step. We call this a “root” DOM node because everything inside it will be managed by React DOM.

To render an element in root container we need to use ReactDOM.render() method.

const reactElement = React.createElement('h1', null, 'Hello World')

ReactDOM.render(reactElement, document.getElementById('root'))

We can put above code inside the script tags defined just before the closing body tag.

Final Code

<html>
  <head>
    <title>Introduction to React</title>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  </head>
  <body>
    <!-- container to render React -->
    <div id="root"></div>

    <script>
      const reactElement = React.createElement('h1', null, 'Hello World')
      ReactDOM.render(reactElement, document.getElementById('root'))
    </script>
  </body>
</html>

If you save above code inside a HTML file and load in browser you should see text Hello World that is rendered by React.

Output

Outro

This basic tutorial shows us how to get started with React. We learned how to use CDN URLs and integrate React in a simple HTML file. We covered the basic building blocks of React known as elements.

In future tutorials, we will deep dive into other concepts of React like components, JSX, dynamic data to, name a few. So, stay tuned!