Standalone React.js basic example

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 −
<div class="player">
   <h1>Steve</h1>
   <p>My hobby: Cricket</p>
</div>
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
<div class="player">
   <h1>David</h1>
   <p>My hobby: Cricket</p>
</div>
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.
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.
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
The react-dom script is used to render the actual components to html dom
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
We will also use standalone babel preprocessor to compile for the latest JavaScript
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
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(
      <div class="player">
         <h1>Steve</h1>
         <p>My hobby: Cricket</p>
      </div>
   );
}
so in actual html file we can replace the first div player with below div −
<div id="first"></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(<Player/>,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 −
<!DOCTYPE html>
<html>
<head>
<title>React Example</title>
<style>
   .player{
      border:1px solid #eee;
      width:200px;
      box-shadow:0 2px 2px #ccc;
      padding: 22px;
      display:inline-block;
      margin:10px;
   }
</style>
</head>
<body>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<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>
<div id="first"></div>
<div class="player">
<h1>David</h1>
<p>My hobby: Cricket</p>
</div>
<script type="text/babel">
   function Player(){
      return(
         <div className="player">
            <h1>Steve</h1>
            <p>My hobby: Cricket</p>
         </div>
      );
   }
   ReactDOM.render(<Player/>,document.querySelector('#first'));
</script>
</body>
</html>
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){
   <div className="player">
      <h1>{props.name}</h1>
      <p>My hobby: {props.hobby}</p>
   </div>
}
The argument props contains the attributes of the player. Now, we can create smaller replacement div for second player like −
<div id="second"></div>
we will pass the player attributes in render method as below −
ReactDOM.render(
   <Player name="Steve" hobbey="Cricket"/>,
   document.querySelector('#first')
);
ReactDOM.render(
   <Player name="David" hobbey="Cricket"/>,
   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
<div id="app"></div>
//and in react script we can have:
var app= (
   <div>
      <Player name="Steve" hobbey="Cricket"/>
      <Player name="David" hobbey="Cricket"/>
   </div>
);
//Now, we will map our app component using ReactDOM:
ReactDOM.render(app,document.querySelector('#app'));
<!DOCTYPE html>
<html>
<head>
<title>React Example</title>
<style>
   .player{
      border:1px solid #eee;
      width:200px;
      box-shadow:0 2px 2px #ccc;
      padding: 22px;
      display:inline-block;
      margin:10px;
   }
</style>
</head>
<body>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<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>
<div id="app"></div>
<script type="text/babel">
   function Player(props){
      //it returns the reusable code that
      //we want to render on actual html page
      return(
         //we are adding the first player div info
         <div className="player">
            <h1>{props.name}</h1>
            <p>My hobby: {props.hobby}</p>
         </div>
      );
   }
   var app= (
      <div>
         <Player name="Steve" hobbey="Cricket"/>
         <Player name="David" hobbey="Cricket"/>
      </div>
   );
   ReactDOM.render(app,document.querySelector('#app'));
</script>
</body>
</html>