React JS – “Reactjs” is a JavaScript library to develop and maintain by Facebook. Basically “Reactjs” is built for complex UI (User Interface) design. If you want to create beautiful UI for your application then you need to install React Js. It’s a component-based UI development technique that really help you to build a complex UI for modern application.
How work “React.js”
This library works in the client site and does not manipulate the browser’s DOM directly, first, it creates virtual DOM in memory and make necessary manipulation then change the browser’s DOM. React change only those elements which need to change rather than all elements in the browser.
React divide a complex UI into multiple components to simplify designing technique and reuse of code. For example if you need to design a page containing header footer and main body then you can simply divide the page into three separate components like header, footer and main body and you can also reuse the header and footer component to design other pages.
Basic Requirement before start “React”
If you want to learn how to develop a modern application with “Reactjs” then you should need to know the following 3 things.
- Knowledge about HTML and CSS.
- Little familiarity with JavaScript.
- Concepts about programming language, like function, class, object, array, etc.
Why you should start learning “React”
React.js development technique is very user friendly and easy to use every state of your application. It’s declarative so react is perfectly update states of your application’s UI and make your code more predictable and easier to resolve errors.
5 Reasons for start React.js development.
- Component bases architecture which easy to develop the user interface of an application
- Learn once and write anywhere – If you understand the concept of the React.js development technique then no need to learn mobile app development separately, you can able to build Android and iOS app beside web applications.
- Reusable components really help to develop and maintain a big application.
- The React community is amazing. The community helps to maintain and grow react.js library, everyone can contribute their own components.
- Now most of the repudiated organizations start using react.js, so it generates huge demand. If you want to be a front-end developer then definitely you should start React.js development.
How to Install and configure React js
Simple you can include react.js libraries in your project and start writing component base react code, but if you want to develop a big project then it’s recommended that setup react environment. And a good code editor (Visual Studio Code is a very good editor). It helps you to keep your project simple and easy to maintain.
Install React JS Step by step
Step 1: Install node.js – Node.js is not required for Reactjs if you use React CDN Link library directly on the web page, but to beautify your application and manage easily we need to install some packages when needed. So you need to use Node Package Manager (NPM), That’s why we always recommend to install node.js,
Read More
Install React JS With Visual Studio Code
If you want to develop big application and also manage it. Then install and configure React Js with Visual Studio Code . for more click the above link.
Step 2: After installation of node.js we use command prompt to interact with node.js. Open the command prompt and follow the commands.
- Create project directory
- Enter in the directory
- Create package.json
- Install React and other modules
To create package.json file just type following command and press enter
npm init
above command create following package.json file
{
"name": "react_app1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}Step 3: Now for install react module type the following commands and press enter
npm install –save react
This command will install react in your project and update package.json file
npm install –save react-dom
This command will install react-dom which needs to create and manipulate react virtual DOM.
After finished you need to enter the app directory and write the command to run react.
npm start
If you create react app with basic node modules with a single command then you can use the following command
npx create-react-app my-app
and to run application use npm start command.
Now you have successfully created the React app. If everything is well then you will see the following output.
