Teach with us

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.

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.

<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'));

BASIC REACT EXAMPLE − THE FINAL HTML WILL LOOK LIKE BELOW

<!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>
Updated on 03-Jul-2020 09:02:34

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements