Lets first start with writing a simple HTML code and see how we can use React

Basic React example  ? Create a simple div like below ?

   
Steve
   
My hobby: Cricket

Add some styling elements

.player{
   border:1px solid #eee;
   width:200px;
   box-shadow:0 2px 2px #ccc;
   padding: 22px;
   display:inline-block;
   margin:10px;
}

This is just like normal html data in web app. Now, we may have multiple same players and we then have to replicate the same div like below

   
David
   
My hobby: Cricket

These div are same in structure but having different data inside. Here, React is very useful which can create a reusable components for us to avoid the repeated html structures and working with logical actions on components.

LETS ADD REACT

For the basic usage, we will use a standalone React library.

We will have to use two main library scripts ?

Note ? when deploying, replace "development.js" with "production.min.js"

Below script is used to create components and perform actions on it.

The react-dom script is used to render the actual components to html dom

We will also use standalone babel preprocessor to compile for the latest JavaScript

React uses a special syntax of JavaScript called as jsx which looks much similar to html itself. So lets create a React function component.

The name of function component starts with Capital letter to make it work correctly.

function Player(){
   return(
      

         
Steve
         
My hobby: Cricket
      
   );
}

so in actual html file we can replace the first div player with below div ?

Now, we have to render the component to html with ReactDOM as below ?

Render method requires the React component as argument and location where it needs to render on html.

ReactDOM.render(,document.querySelector('#first'));

The function component is used as first argument like a html tag. Second argument to render method can be a html element selector.

If we put all these pieces together we can have below html file to test ?

David
My hobby: Cricket

It's not really reusable as the second player div we used is still not from React component. To make it reusable we have to use dynamic function with a argument called as props as below ?

function Player(props){
   

      
{props.name}
      
My hobby: {props.hobby}
   
}

The argument props contains the attributes of the player. Now, we can create smaller replacement div for second player like ?

we will pass the player attributes in render method as below ?

ReactDOM.render(
   ,
   document.querySelector('#first')
);
ReactDOM.render(
   ,
   document.querySelector('#second')
);

Now, you have observed the potential of reusable React components.

Instead of having two separate ReactDOM.render we can combine them together

//we can have only one div in html

//and in react script we can have:
var app= (
   

      
      
   
);
//Now, we will map our app component using ReactDOM:
ReactDOM.render(app,document.querySelector('#app'));

BASIC REACT EXAMPLE ? THE FINAL HTML WILL LOOK LIKE BELOW