React.js

There has never been such a great race for adapting new JavaScript technologies. It's the best time for JavaScript. The Facebook team has a strong contender known as React.js. So, unlike other MVC frameworks such as Angular, React.js is just a view from Model-View-Controller. It is lightweight and renders with amazing speed. The basic encapsulated unit of code is called a component. These components are composed together, forming a whole UI. Let's create a simple component using the es6 class for the greeting example, as follows:

class Greet extends React.Component {
render() {
this.props.user = this.props.user || 'All';
return ( < div >
<
h4 > Greeting to { this.props.user }! < /h4> <
/div>);
}
}

The preceding snippet created a simple class to greet the users. We extended React.component to provide its public methods and variables to be accessible in the Greet class. Each component created requires a render method, which contains the html template of the respective component. The props is the public variable use to pass the data from containers to child components, and so on.

Now, we need to load the component in our HTML document. To do this, we need to register under the reactDOM API, which is provided globally by the React.js library. This can be done as follows:

ReactDOM.render(
<Greet user="Developers" />,
document.getElementById('root')
);

The render method of the ReactDOM object requires two parameters. First the root node, and second, the root element. The root node is an element used to declare a host for the different parent components. The root element <div id="root" /> is written in the body of our index.html to host the entire view of the React components.
reactDOM is responsible for creating a virtual DOM and observes for any changes to be made to each component. Only the changed/acted on part is re-rendered, keeping other components intact. This boosts up the performance of application. The changes in the components we read about are also called states of the components maintained by different libraries such as reflux.js or redux.js.
Another important feature is one-way binding using props. The props are only a way to pass data to the view. Once the scaffold and the data flow are set, the react projects provide great scalable code and ease of maintenance for complex projects. There is a huge list of projects on React.js https://github.com/facebook/react/wiki/sites-using-react. Once you get comfortable with the react web app, you can easily switch to react native which create amazing native mobile applications.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.191.93.12