What Is React

React is a flexible JavaScript library for building user interfaces.

React is used to build single page applications.

React allows us to create reusable UI components.

React Official statement:

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

You can visit react official website from here.

Learn React by example

index.html

<!DOCTYPE html>
<html>  
 <head>    
       <meta charset="UTF-8" />   
       <title>Add React in One Minute</title> 
       <!-- 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>  
          
   <!-- Load our React component. -->             
     <script src="like_button.js"></script>
 </head>
  <body>
    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling. 
         </p>    
      <p>React is loaded as a script tag.</p>  
        
       <!-- We will put our React component inside this div. -->    
     <div id="like_button_container"></div>  
        
          
    </body>
 </html>

This two tags load React just bootstrap we we .js and .css like to apply responsiveness on web pages.

similarly these two line are required to run every react pages.

<!-- 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>

Add a DOM Container to the HTML

This line mark the spot where you want to display something with React.

<div id="like_button_container"></div>

This will load your component code which is written in like_button.js

<!-- Load our React component. -->
  <script src="like_button.js"></script>

like_button.js

use strict'; 
const e = React.createElement; 
class LikeButton extends React.Component { 
        constructor(props) { 
                 super(props); 
                this.state = { liked: false }; 
 }  
    render() {
           if (this.state.liked) { return 'You liked this.';   
     } 
 return e( 'button',   
           { onClick: () => this.setState({ liked: true }) }, 
         ' Like'   
   );  
}
} 

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

The last two lines of code find the <div> we added to our HTML in the first step, and then display our “Like” button React component inside of it.

1 comment