LESSON 1: ADD REACT TO AN HTML PAGE DIRECTLY

In this article we will learn step by step how we can add React to an HTML page directly. We will be writing a basic Hello World application to each aspect step by step.

STEP 1: We need to create a basic HTML page with the sections HEAD and BODY. Basic skeleton looks like below.

 

STEP 2: Now add references to the two main React Libraries namely REACT and REACTDOM. These references would go in the HEAD section in the SCRIPT tag as shown below.

 

STEP 3: You can use old style vanilla JavaScript for React app but choosing the Babel or Typescript or JSX is better and more productive option to go with. For this purpose, you need to add one more reference for the Babel cdn so that JSX can work.

Following is the reference to online Babel.

NOTE: JSX is a new format to write both JavaScript and TAG based HTML like language as mix of both. JSX stands for JavaScript XML.

Now current code looks something like this.

 

STEP 4: Now we need a Div Tag in the body section with the id as root. The id can be kept anything. But I would prefer it to be kept as root as all the React will be rendered in this root element. Following should be the shape of current code.


 

STEP 5: Now is the time to write the first React Component. React is a Component based development framework. And in its simple form a React Component is just a simple JavaScript function.

The code will go in the Script tag and the basic Component for the HelloWorld will be as follows.

Notice the element being returned is an HTML Tag. But it is actually being returned through a JavaScript function. This is the new JSX format and it becomes really productive.

STEP 6: Finally, we need to call a ReactDOM render method to glue the created component in the root div created above. For this purpose, we will write the following line of code.

• The first argument is the name of the React Component which we have created as a JavaScript function. Please note that the function HelloWorld is being used as a Tag.
• The second argument is the root element of the DOM in which the component is being nested.

Now the shape of final code would look as below.

Final Step: Save the HTML document and open in the browser. You will see the following output.

  • Show Comments (0)

Your email address will not be published. Required fields are marked *

comment *

  • name *

  • email *

  • website *