React was engendered by Jordan Walke, a programmer at Facebook. On April 18, 2017, Facebook publicized React Fiber associate a new core algorithm program of React framework library for building user interfaces. React Fiber can become the substratum of any future enhancements and have a development of the React framework. React initial deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012. The latest version of React JS is 16.4. It had been published on May 23, 2018.
Let us take a lot of proximate look at some important features of React.
- Components: React is all concerning elements. you would like to think about everything as a part. this may assist you to keep up the code once performing on larger scale projects.
- Unidirectional knowledge flow and Flux: React implements a technique knowledge flow that makes it simple to reason concerning your app. Flux is the architecture which is using Uni-directional data flow.
- License: React is accredited under Facebook Inc. Documentation is accredited under CC-BY 4.0.
Benefits of ReactJS:
1. Fast Learning Curve
2. Reusable Components
React provides an element based structure. Elements are your lego pieces. You begin with little parts like button, checkbox, dropdown etc. and therefore you produce wrapper parts composed of these smaller parts then you write higher-level wrapper parts. And, it goes on like that till you have got this one root elements which element is your app. Each component decides how it should be rendered. Every component has its own internal logic. This approach has some wonderful results. You will be able to re-use parts anywhere you would like. As a result, (1) your app has consistent look and feel, (2) code re-use makes it easier to keep upend grow your codebase, and (3) it is easier to develop your app. This element based mostly structure helped us tremendously building our large web app.
ReactJS applications are super easy to test. React views is treated as functions of the state, thus we will manipulate with the state we tend to pass to the Reacjs view and take a glance at the output and triggered actions, events, functions, etc.
NodeJS and NPM: NodeJS is that the platform required for the ReactJS development.
- npm install -g babel
- npm install -g babel-cli (Install babel)
- mkdir reactApp (Create root folder)
- npm init –f (Create package.json)
- Add Dependencies:
- npm install webpack –save
- npm install webpack-dev-server –save
- npm install react –save
- npm install react-dom –save
- Install Babel Plugins
- npm install babel-core
- npm install babel-loader
- npm install babel-preset-react
- npm install babel-preset-es2015
Create a simple application:
- npm install –g create-react-app
- create-react-app hello-world(appName)
- Cd appName
- npm start
- You would need to have the latest version(October 2017 (version 1.18)) of VS Code and VS Code Chrome Debugger Extension installed.
- Dependency to format code automatically
- npm install –save husky lint-staged prettier
- husky makes it easy to use githooks as if they are npm scripts.
- lint-staged allows us to run scripts on staged files in git. See this
- blog post about lint-staged to learn more about it.
- npm install –save react-router