Last updated on November 24th, 2018 at 09:16 pm
React is a javascript library created by Facebook. With help of this library, we can easily pass data to render in a view. React Js is very easy to use and you simply add React Js in any project. In this post, I simply explain how we can use React in our web application. I try to cover most of React features in my upcoming posts.
Official Website: ReactJS
Setup ReactJs in your Project
Setup of React Js is very easy you can download React library file or you can use their CDN. So I’m going to us their CDN. So first create new file name it whatever you like (.html) and write basic structure of Html in it. Now inside <head> tag you need to add ReactJs library and also babel library in it
<script src="https://unpkg.com/react@15/dist/react.min.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
What is babel?
Babel is javascript compiler. It allows you to write HTML code inside Javascript you can check this example to clearly understand.
Now once you complete this you are ready to create your first application. Now create a <div id=”test”> inside a body tag and also assign ID to it, this div is the main container where or React render its view. Now we can write or React Js code, to write you need to start <script type=”text/babel“></script> tag to write your code.
<div id="test"></div>
<script type="text/babel">
ReactDOM.render(<h1>Welcome</h1>, document.getElementById('test'))
</script>ReactDOM.render() allow us to render a view inside given target.
<!DOCTYPE html>
<html>
<head>
<title>React Setup</title>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
ReactDOM.render(<h1>Welcome</h1>, document.getElementById('test'))
</script>
</body>
</html>You can check output in this video
Components in React JS
Components is basically a view which you render. It allows you to reuse your view multiple places with different data. In simple word, every thing in a website is a component eg. Button, Menu, Gallery etc. So in react it is very easy to create a component and reuse them.
My first component in React Js
To create your first component you simply first create new file and add same code we create above after this, we can strat creating our component to create your component you need to call React class as shown bellow
<script type="text/babel">
// Create component first
var MyComp = React.createClass({
render: function(){
return (
<div>
<h1>This is component</h1>
<p>This is paragraph</p>
</div>
)
}
})
// Call same component multiple times
ReactDOM.render(<MyComp />, document.getElementById('test'))
</script>Now in above code first we create a variable (MyComp) this variable is my component and in this, I call React CreateClass which help to create a view for my component. Now inside return yo need to keep in mind that only One parent is allowed you can not return multiple parent/element. eg.
render: function(){
return (
<div>
<h1>This is component</h1>
</div>
<div>
<p>This is paragraph</p>
</div>
)
}this will give you an error so remember to return only one child inside return. After this, you can call you component (MyComp) inside render like HTML tag (<MyComp />) and also one important thing variable is in the capital form otherwise it gives an error. You can check output of above sample
Complete Code of above sample.
<!DOCTYPE html>
<html>
<head>
<title>React Component</title>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
// Create component first
var MyComp = React.createClass({
render: function(){
return (
<div>
<h1>This is component</h1>
<p>This is paragraph</p>
</div>
)
}
})
// Call same component multiple times
ReactDOM.render(<div><MyComp /> <MyComp /></div>, document.getElementById('test'))
</script>
</body>
</html>Pass data to component
Now we need to pass data to the component it is very easy to pass data to the component. We can pass data using attribute and set data in view using {} curly braces and with the help of (this.props.attribute_name) we can set data in view as shown in bellow
<!DOCTYPE html>
<html>
<head>
<title>Pass data to components react - Trinity Tuts</title>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<!-- We copy paste or last component code -->
<div id="test"></div>
<script type="text/babel">
// Create component first
// To get data inside component we use {this.props.attribute_name}
var MyComp = React.createClass({
render: function(){
return (
<div>
<h1>{this.props.name}</h1>
<p>{this.props.status}</p>
</div>
)
}
})
// Call same component multiple times
ReactDOM.render(
<div>
<MyComp name="Aneh Thakur" status="Love think Code :)"/>
<MyComp name="Amit" status="Happy :)"/>
</div>
, document.getElementById('test'))
</script>
</body>
</html>You also render your view multiple time with different data as I do in above code bu note we do this inside <div> tag as an already mention you need to return only one parent in it inside <div> you can run your component as many time as you want.
ReactDOM.render(
<div>
<MyComp name="Aneh Thakur" status="Love think Code :)"/>
<MyComp name="Amit" status="Happy :)"/>
</div>
, document.getElementById('test'))You can check the output of above sample in this video
This is the first post on ReactJs tutorial. Stay tuned to next tutorial on ReactJs. This is very basic and I try to make all example as simple and easy so you can understand basics of ReactJs. hope this post helps you Please like share and subscribe to my facebook and youtube channel 🙂