Introduction to React

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.

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.

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.

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

Final Code

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

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!