ReactJS is an open source javascript library which is developed by Facebook. It is used for building user interfaces.
Introduction:
- It is widely used to create mobile and web application.
- It allows to create reusable UI components.
- It creates its own Virtual DOM.
- It makes the process of building apps very simple.
- It provides the possibility to create apps that are updated from time to time without the need to reload the page.
- It is just the View and output is simply HTML.
Component
ReactJS consider everything as a component. It has no Controllers, Directives, Views, View model, Templates, Global event listener, has just COMPONENTS (these are reusable, testable and maintainable)
Example – Shopping Cart
We can separate concerns like CartComponent, CartList Component , Cart ListItem Component and Button Component.
Virtual DOM
Virtual DOM is a simpler programming model.It uses render() to create real DOM. Rather than touching the DOM directly, we build an abstract version of it. It modifies real DOM when something changes. Here DOM is not used as DOM was never optimized for creating dynamic UI.
JSX
JSX is a JavaScript syntax extension which looks similar to XML. JSX syntax can be used with React. One can also used JS with React but it is recommended to use JSX as it has a familiar syntax like XML to define tree structures with attributes.
Take an example of Hello World:
Create an aspx page, take a div control in it. Use two js files directly or can download it from NuGet packages
<script src="https://fb.me/react-15.2.1.js"></script>
<script src="https://fb.me/react-dom-15.2.1.js"></script>
<div id="content"></div>
Create a js file with an extension of jsx and use it in created aspx page, use the div control to populate the data
var HelloMesssage = React.createClass({
render: function() {
return (
<div > Hello, world!
</div>
);
}
});
ReactDOM.render(
<HelloMessage />, document.getElementById('content')
);
Here "HelloMessage" is a component and ReactDOM.render is used for rendering into the real DOM.
Hope it will help you. Thanks
0 Comment(s)