This post is not a tutorial on react. There are bunch of good examples and detail documentation available on react official site. This post is mainly to give very high level introduction on react and will try to explain the very first component i have created.
React is a javascript library, which you can use to create different components. Its component based architecture help structure the project well. There are other libraries also available which gives us facility on creating components, but React has a different algorithm to render these components on browser(generally referred as a virtual DOM), which makes React different from other frameworks.
We can always use react in combination with other js frameworks as well.
Every component in React has a "render" method. One component can be nested within another, and the "render" method is called recursively downwards in the tree. Rendering start with the root component where React.renderComponent is called first.
Virtual DOM -
Render method of every component yield a HTML. React make this generated html part of its internal DOM and then use this internal DOM to create the final HTML DOM on the browser. Whenever there is any change in any component, the internal(virtual) DOM is updated and finally React updates the actual DOM with the final delta.
With this approach of DOM manipulation React is very fast in UI updation.
Flux -
If you are working in React, then you will come across Flux architecture as well. This architecture talks about one way flow(binding) instead of two way. The architecture talks about using dispatcher or callback to handle any update, instead of calling the parent or any other component directly. It says that there should be a single dispatcher class which should dispatch the actions to every component. If any of the component has any update for the application, then it should connect with dispatcher to communicate with other components.
JSX -
React has introduced JSX syntax to make programmer's life easy. We can write our component html structure in JSX format and then
1) we can compile it to standard javascript and include the final file in the html page
2) we can directly include this js file having JSX code in our html and mark it with "text/babel" type and include browser.js also, which will convert this JSX into standard javascript at run time. Ofcourse there will be performance hit because of this.
JSX code -
<div >
Hello, world.
</div>
Actual translated code -
React.createElement('div',
"Hello, world"
)
Getting Started-
Lets try to write a simple hello world code using react.
In our index.html, include following javascripts -
<script src="lib/react.js"></script>
<script src="lib/react-dom.js"></script>
<script src="lib/browser.js"></script>
<script src="lib/jquery.min.js"></script>
react.js and reactdom.js are required for React framework. I have included browser.js for my jsx to javascript conversion.
lets create a simple div where i can render my React component -
<body>
<div id="content"></div>
<script type="text/babel" src="example.js"></script>
</body>
If you notice, i have included example.js, which has my React code, and the script type i have mentioned is "text/babel". I can always precompile it to actual javascript and use it in my HTML.
There is a package named as "grunt-babel" available, which we can use for this conversion.
Also i have created a div with id=content which i ll use to render my component.
Lets have a look at the example.js -
var Section = React.createClass({
render: function () {
return (<div>
hi
</div>);
}
});
ReactDOM.render(<Section/>, document.getElementById("content"));
In the above code, i have created a simple section component, which says hi and then i make use of ReactDOM to render this section in the "content" div.
Please note - The case is very important here. If i make the name of the component as "section" instead of "Section" then it wont work.
That is all to begin with. Please explore more detail on React on its official site.
React is a javascript library, which you can use to create different components. Its component based architecture help structure the project well. There are other libraries also available which gives us facility on creating components, but React has a different algorithm to render these components on browser(generally referred as a virtual DOM), which makes React different from other frameworks.
We can always use react in combination with other js frameworks as well.
Every component in React has a "render" method. One component can be nested within another, and the "render" method is called recursively downwards in the tree. Rendering start with the root component where React.renderComponent is called first.
Virtual DOM -
Render method of every component yield a HTML. React make this generated html part of its internal DOM and then use this internal DOM to create the final HTML DOM on the browser. Whenever there is any change in any component, the internal(virtual) DOM is updated and finally React updates the actual DOM with the final delta.
With this approach of DOM manipulation React is very fast in UI updation.
Flux -
If you are working in React, then you will come across Flux architecture as well. This architecture talks about one way flow(binding) instead of two way. The architecture talks about using dispatcher or callback to handle any update, instead of calling the parent or any other component directly. It says that there should be a single dispatcher class which should dispatch the actions to every component. If any of the component has any update for the application, then it should connect with dispatcher to communicate with other components.
JSX -
React has introduced JSX syntax to make programmer's life easy. We can write our component html structure in JSX format and then
1) we can compile it to standard javascript and include the final file in the html page
2) we can directly include this js file having JSX code in our html and mark it with "text/babel" type and include browser.js also, which will convert this JSX into standard javascript at run time. Ofcourse there will be performance hit because of this.
JSX code -
<div >
Hello, world.
</div>
Actual translated code -
React.createElement('div',
"Hello, world"
)
Getting Started-
Lets try to write a simple hello world code using react.
In our index.html, include following javascripts -
<script src="lib/react.js"></script>
<script src="lib/react-dom.js"></script>
<script src="lib/browser.js"></script>
<script src="lib/jquery.min.js"></script>
react.js and reactdom.js are required for React framework. I have included browser.js for my jsx to javascript conversion.
lets create a simple div where i can render my React component -
<body>
<div id="content"></div>
<script type="text/babel" src="example.js"></script>
</body>
If you notice, i have included example.js, which has my React code, and the script type i have mentioned is "text/babel". I can always precompile it to actual javascript and use it in my HTML.
There is a package named as "grunt-babel" available, which we can use for this conversion.
Also i have created a div with id=content which i ll use to render my component.
Lets have a look at the example.js -
var Section = React.createClass({
render: function () {
return (<div>
hi
</div>);
}
});
ReactDOM.render(<Section/>, document.getElementById("content"));
In the above code, i have created a simple section component, which says hi and then i make use of ReactDOM to render this section in the "content" div.
Please note - The case is very important here. If i make the name of the component as "section" instead of "Section" then it wont work.
That is all to begin with. Please explore more detail on React on its official site.
ReplyDeleteThanks for sharing this blog.
Full Stack online Training
Full Stack Training
Full Stack Developer Online Training
Best blogs.Thanks for sharing the post.
ReplyDeleteFull Stack Training in Chennai | Certification | Online Training Course| Full Stack Training in Bangalore | Certification | Online Training Course | Full Stack Training in Hyderabad | Certification | Online Training Course | Full Stack Developer Training in Chennai | Mean Stack Developer Training in Chennai | Full Stack Training | Certification | Full Stack Online Training Course
Superb Blog Post. Thanks for sharing.
ReplyDeletealso, check Reactjs course in Pune