Learn About The React JS State Concept

0
479
React JS State Concept

ReactJS is a popular front-end JavaScript framework which is powered by Facebook. Like other front-end frameworks, it is capable of handling the view layer for mobiles as well as web applications. Using React JS, we can build reusable UI components. In this article, we are going to quickly create our workspace to build a React JS based web application where we will discuss the concept of state in detail.

React JS is widely used to build reusable UI components through composeable user interfaces with which data presentation changes from time to time. React JS is capable of abstracting away the DOM that offers a simpler programming model with better performance over other front-end libraries. We can use React Native to power native apps in order to render it on the server by using Node. It implements one-way reactive data flow that helps to reduce the boilerplate and provide edge over the traditional data binding.

Creating React JS workspace

We require Node.JS to be installed on your device before we can work with ReactJS in order to build a responsive web application. We need to create the root directory where we are going to develop a web project with React JS and webpack dependencies.

STEP 1: – Open the windows command line and execute the following command. It will create our project root directory as “react-js-state-demo”.

C:\Upwork\Abhishek - Eduonix\ReactJS\Workspace>mkdir react-js-state-demo

STEP 2: – Next, we are going to create “package. json” file by executing the following command at the project root directory “react-js-state-demo”.

C:\Upwork\Abhishek - Eduonix\ReactJS\Workspace>cd react-js-state-demo C:\Upwork\Abhishek - Eduonix\ReactJS\Workspace\react-js-state-demo>npm init

The command “npm init” will create a “package. json” file where it will ask us to enter the name, version, scripts and description of the project which we are going to create.

STEP 3: – Next, we are going to install the required dependencies to build and run the project using React JS libraries. We need the following libraries.

C:\Upwork\Abhishek - Eduonix\ReactJS\Workspace\react-js-state-demo>npm install babel babel-cli react react-addons-css-transition-group react-dom babel-core babel-loader babel-preset-react babel-preset-es2015 webpack webpack-cli webpack-dev-server --save-dev

These libraries will be downloaded and installed under the node_modules directory and our final “package. json” file will look as shown below after STEP 3 completion.

File: “package. json”

STEP 4: – Next, we need to create “webpack.config.js” file with the following configuration content in it as shown below.

File: “webpack.config.js”

STEP 5: – Next, we need to create the following files with the given content in them at project root “react-js-state-demo” directory as shown below.

File: “Application. jsx”
In this file, we are going to define the state of the application. State can be defined as the place which supplies the data. It is recommended to make our state (i.e. data supplier) as comprehensive as possible and also we need to minimize the number of stateful components. Say for example, if we have five components that requires data from the state, then we should be creating just one container component which can keep the state for all the five components (i.e. simplicity). The file content is shown below.

File: “main.js”

File: “index.html”
It is our view layer which will do the required styling from “/css/style.css” and display the app “index.js” which we have created through react JS application (Application. Jsx) which we have just created.

File: “/css/style.css”
It is the stylesheet used by the web application.

Application Execution

At the project root, execute the command “npm start”, the system will show below logs with compilation successful and application can be assessed from this URL “http://localhost:8080/”.

Our React JS Web application at http://localhost:8080/ will look as shown below.

Thank You Message

Conclusion: –
In this article, we have created our workspace to build a React JS based web application and we discussed the concept of state in detail.

LEAVE A REPLY

Please enter your comment!
Please enter your name here