Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
2K+ Views
To Continue Learning Please Login