React JS is the most popular to build a large, fast Web applications. React JS is a library created by the Facebook and Instagram to create a single page application in a dynamic manner.
Introduction
- V in MVC:
- Simple API:
- Declarative:
- Building composable component:
- One way Data flow:
React JS purpose is only view portion so React JS is V in MVC. Like Angular JS is MVC Framework whereas React JS is just for view layers. You can build a large application using React JS as it is very simple API.
You can get started with React JS using document provided on site. It has an easy learning curve.
Developing app with the React JS is declarative unlike jQuery, If you look at the syntax of jQuery is kind of imperative. That kind of approach becomes to make it more flexible .If you have the particular state, you can define how your app looks like in specific state.
You can build good components to build larger application. It increase the robustness and code reusability.
React JS follows one way data flow which is one of the big point of React JS. One way data flow means data is flowing in one direction so if you can quickly and easily find out the problem in one way data flow.
If you are new to React JS and want to get started with React Js, there are a couple of things you can consider.
Getting Started
- Use React Starter Kit:
- Recommended to use browserify or webpack:
- Popular starter kit:
Some starter kit provided by React JS which gives basic example of React JS. Most of examples are embedded in HTML5 and In real World application, we uses component to develop the large application.
It is very important that you make your application more manageable so these tools browserify and webpack will be useful so that you can split your application in small modules. You can also import those components to build other components or application. Also, can manage dependencies of the component. These tools are a little bit tricky.
If you want to setup or configure browserify or webpack in your application, you can rely on starter kit. React JS and React transform boilerplate are two popular starter kit available for React JS. You can use the starting point of your development and there is some basic configuration for webpack.
Simple React Component
This is a very simple counter example using React JS. I am using module system. Here, I am importing React and ReactDom library.React is basic core library and ReactDOM is to split the React into multiple level status. React also provides ReactNative used to build a mobile application. This is kind of reuse the core libraries. So, React library is used to support core react functionalities and ReactDOM for DOM-specific functionality.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Import React from 'react' Import ReactDOM from 'react-dom' State = { count = 0} incrementCount = () => { this.setState({ count = this.state.count+1}) } Render () { Return ( <div> <div>Count: {this.state.count}</div> </div> } } |
Here,Counter has some state.count which stores the count of the particular counter. IncrementCount function will increment the count whenever it is called.React component should have render method which depends on declarative to the mark of the issue. Here it is showing the button where attaching the on click button which will be called the incrementCount function. Also, we are calling this.setState method to set the state of the count.
In React, We define the initial state and two global states which have been used the method so whenever this function executed,it will increment the counter.
Here, You can see the syntax looks like HTML which is directly embedded into React JavaScript File.You can use camel tool to transform JSX into JS. You can also write code into JS for transforming JSX to JS but it is somewhat tedious part.
Unlike jQuery, React has class, ClassName, an inline style which can be treated as the template.Instead of separating things based on technologies, React JS separate it based on functionalities which are good thing.If you are working on the particular portion of React Js, you can have all the logic related to that in a single place. This is a very good advantage while working on the large application.
What is JSX?
The syntax which I have shown almost looks like XML, HTML but it’s not pure HTML. It has some minor differences. For example, You can’t use Class, You have to use ClassName, Style should object and JSX also supports Expressions so you can do a lot of logic using Expressions.
1 2 3 4 5 | <div className='title' style={{ fontsize }}> {this.props.blogtitle} </div> |
What is Composition in React JS?
One more concept support in React JS is the Composition. You can split your application in smaller functionality to build a different component and compose them to build the larger application.
Example of Composition:
If you are building a comments portion of the application. You can have comment form, comment list etc component. So, You can compose them to the comment portion of the application.
1 2 3 4 5 6 7 8 9 10 11 | <div> <commentForm> <commentList comments={this.props.comments}/> </div> <div> <commentText text={this.props.text}/> <shareButtons> </div> |
Again, CommentList can have nested components. CommentList is a list of comments.Each comment can have subcomponents like an avatar of the user on the comment page, comment text, and sharing buttons.
You can divide the application in subcomponent to make it more manageable and reusable.You can easily identify the issues in a specific section of the application.
JSX and composition are the primary things of React JS.
When it comes to data in React JS Props and States comes into the picture. Let’s understand the Props and State in the React JS.
Props VS State
There are two types of data in React JS
- Props
- States
Props are used to make the component configurable.This is what used to create the configurable component in React JS.You can treat props to pass the data from parent component to child component.
Props:
- Data passed from parent to child component
- Configuration for reusable components
The state is the UI state of the application in React JS. For example, Form can be stated. Always store the states at the higher level and good way to avoid the duplication of the state.
If multiple components using particular state,store the state at a higher level so all the components below get the state.
State:
- Minimal UI State
- Examples: Search Text, value of Checkbox etc.
- Store state at higher hierarchy (Above components that requires the state)
- Re renders for every state change
When it’s rerenders the application, React JS uses the virtual DOM.Rerenders is good for developers because no need to worry about DOM State.
Communication between Components:
As you can compose many components in React JS, it is very important to communicate between components.
There are two ways for communication between components:
- For parent-child communication, pass props: One way is to pass props from higher components to child components.
- For child-parent communication, pass callback: other way is callback to pass the necessary data from child component to parent component.In callbacks, have the state of higher components.
This is very basic way of communication between components.This works well with the one or two level of nested components but when the component hierarchy is huge so to pass props and callbacks is a very tedious task.
ECHO System:
As I said,React JS is only View of the MVC but the facebook and other third party companies are work very hard to build a very nice echo system for the application.
These are the tools useful for making application effective
- Webpack/browserify for module building
- Label for JSX to JS and ES6 to ES5 transformation
- React router for routing
- React bootstrap/material UI for common UI components
- Flux/Redux for data management
- Many more
I hope this article will help you to understand the concept of React JS and how to build components and applications with React JS.
