Introduction to React JS

Is React a Framework?

The answer is no. React JS is actually a front-end library which has been developed by facebook and instagram which again is now under facebook.

React is for building user interfaces and managing the rest of the project is up to our preference. It serves as the view of MVC architecture and is suitable for large web applications which use data and change over time without having to reload the entire page. Node JS is the running environment of React.

React abstracts the Document Object Model(DOM) away from us giving out a simple and better performance. React implements a one-way data flow.

Features in React

JSX — This is the language used by react in defining its user interfaces. Use HTML like syntax (java script syntax extension). Prevent cross-site scripting attacks.

Components — Everything in react work as components.

Data flow is from parent component to child component while the action flow is vice versa.

Uses a virtual DOM which is a Java Script object that helps to maintain the performance of the application.

Render

The way that react uses to return a description of what we should see on the screen is the render method. This renders the components.

Each time the props and states are changed, render is called.

This never uses the setState function although it can define variables and do some operations inside.

Props and State

The main difference between props and states is that props are unchangeable over time.

Data and behaviors from container components to child components are passed through props and props are read-only material.

State is the place that hosts data. If there are multiple components which need data from state, it should maintain a single container which in turn keeps the state for all of them. State is read-write enabled.

The following will show you how to combine props and state in an application.

So this is just a simple introduction on React JS and I think you would find it interesting.