REACTJS FOR BEGINNERS | A STEP BY STEP APPROACH

There are many problems while building large applications with data that changes over time. To solve this ,I suggest checking out ReactJS. React lets you express how your app should look at any given point, and can automatically manage all UI updates when your underlying data changes.

React is one of the most popular JavaScript front end libraries which is developed by Facebook. It’s used for handling view layer for web and mobile apps. The main feature of ReactJS is that it allows us to create reusable UI components.  The syntax used in React is JSX which allows you to mix HTML with JavaScript. This is not a requirement – you can still write in plain JavaScript. But this is suggested because this makes writing your components a breeze.

Installation

To install React with Yarn, run:

1 2	yarn init yarn add react react-dom

To install React with npm, run:

1 2	npm init npm install --save react react-dom

The bundlers like webpack or Browserify is recommended. So you can write modular code and bundle it together into small packages to optimize load time.

Use React with Babel to let you use ES6 and JSX in your JavaScript code. ES6 is a set of modern JavaScript features that make development easier.  JSX is an extension to the JavaScript language that works nicely with ReactJS.

React is efficient

ReactJS creates its own virtual DOM where your components actually live. It calculates what changes need to be made in the DOM beforehand and updates the DOM tree accordingly. So it is flexible and gives amazing gains in performance. It can be used on client and server side. This way, React avoids costly DOM operations and makes updates in a very efficient manner.

The smallest ReactJS example looks like this:

1 2 3 4 5

ReactDOM.render(   <h1>Hello, world!</h1>,   document.getElementById('root') );

It renders a header saying “Hello, World!” on the page. You can see the demo here.

React Features

Components are the heart and soul of ReactJS. You need to think of everything as a component. This is why it is helpful to maintain the code when working on larger scale projects. The one way data flow in react makes it easy to reason about your app. “Flux” is a pattern that helps keeping your data unidirectional. Components accept arbitrary inputs called “props” and return React elements describing what should appear on the screen.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// Create a component named MessageComponent class MessageComponent extends React.Component{   render() {     return (       <div>{this.props.message}</div>     );   } }   // Render an instance of MessageComponent into document.getElementById ReactDOM.render(   <MessageComponent message="Hello!"  />,   document.getElementById('root') );

Create a new component class using component class approach. Components have one requirement, they must implement render function that tells the component what to render. You can see the demo here.

States in React

State is the place where the data comes from. You should always try to make your state as simple as possible and minimize number of stateful components.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

class App extends React.Component {    constructor(props) {       super(props);         this.state = {          header: "Header from state...",          "content": "Content from state..."       }    }      render() {       return (          <div>             <h1>{this.state.header}</h1>             <h2>{this.state.content}</h2>          </div>       );    } }

Now this will render the function. You can see the demo here.

The key difference between props and state is that state is internal and controlled by the component itself while props are external and controlled by whatever renders the component. To access a component’s state, use “this.state” , just like how we use “this.props” . To update a component’s state, call “this.setState” with an object map of keys to updated values.

Component lifecycle

Lifecycle methods are  special methods that automatically get called as our component goes about its business. Each component has several “lifecycle methods” that you can override to run code at particular times in the process.

getInitialState()

This method is invoked once, right before the mounting phase.  The return value of this method will be used as initial value of this.state and should be an object.

1 2 3

getInitialState: function(){     return { /* something here */}; }

getDefaultProps()

This can be used to define any default props which can be accessed via this.props.

1 2 3

getDefaultProps: function(){     return { /* something here */}; }

componentWillMount()

This is the last method that gets called before your component gets rendered to the DOM. If you were to call “setState” inside this method, your component will not re-render.

1 2 3 4

getInitialState: function() {...}, componentWillMount: function() {     console.log('componentWillMount'); }

componentDidMount()

This function is called as the render method has been executed. This method is the best place for initializing other Javascript libraries that need access to the DOM and for data fetching operations.

1 2	componentDidMount: function() { }

shouldComponentUpdate() 

This method allows you to control the updating behavior. If you use this method and return a true value, the component will update. If this method returns a falsevalue, this component will skip updating.

1 2 3 4

shouldComponentUpdate: function(nextProps, nextState){     // return a boolean value     return true; }

componentWillReceiveProps()

This is only called when the props have changed and we can use this method as an opportunity to react to a prop transition before the render() method is called.

1 2 3 4 5

componentWillReceiveProps: function(nextProps) {   this.setState({     // set something   }); }

componentWillUpdate()

This gets called  just before your component is about to update.

1 2 3

componentWillUpdate: function(nextProps, nextState) {     console.log('componentWillUpdate', nextProps, nextState); }

componentDidUpdate()

Finally this is called after the render method. This method can be used to perform DOM operations after the data has been updated.

1 2 3

componentDidUpdate: function(prevProps, prevState){     // }

React is a Javascript library which allows developers to create fast user interfaces. React views are typically rendered using components that contain additional components specified as custom HTML tags. One of the unique features of ReactJS is not only it can perform on the client-side, but it can also be rendered on the server-side, and they can work together.

It also uses the concept called Virtual DOM, creates an in-memory data structure cache, enumerates the resulting differences, and then updates the browser’s displayed DOM efficiently. That is the react libraries only renders the sub-components that have been modified. So this makes it faster and efficient.

References

https://facebook.github.io/react/

https://www.tutorialspoint.com/reactjs/

http://buildwithreact.com/tutorial