In this session, we will learn more about React JS Installation and Environment Setup, In this article, we will learn how we successfully develop our first React Js application.
We have already learned about The Fundamental Concept of React JS in the previous section, React, is a front-end JavaScript framework that is a JavaScript library created by Facebook. React is a tool for creating user interface components. React creates a VIRTUAL DOM in memory. Instead of directly manipulating the browser DOM, React creates a virtual DOM in memory, where it performs all necessary manipulations, before making changes to the browser DOM. React only changes what needs to be changed!
React finds out what changes have been made and only changes what needs to be changed.
Requirements of Installation of React JS
- Node JS
- Text Editor (such as Sublime, VS Code etc.)
- React and React DOM
1. Download Node JS
Firstly, Download the Node Js – Download Link. NPM and Node are required to develop react applications.
Why Node is important in React JS?
Nodejs is the most convenient platform to host and run an internet server for a React application. this is often for 2 main reasons:
- Using Associate in Nursing NPM (Node Package Manager), Node works aboard the NPM written account to simply install any package through the NPM user interface.
- Node bundles a React application into one file for straightforward compilation exploitation webpack different and several other} other Node modules.
Additionally, exploitation Nodejs to host and run your net server helps in several ways:
- Nodejs uses a speed-optimized V8 engine to method bulk requests that square measure processed through recall functions to make sure quality and amount.
- Nodejs and React square measure javascript languages that may be run on both the client-side and server-side.
- Developers will run Reactjs code directly within the Nodejs setting.
- The React DOM has elements specifically designed to figure with Nodejs that cut back lines of code, creating server-side rendering comparatively straightforward.
- Sometimes utterly dynamical your backend isn’t a possible choice. Suppose you’ve got RoR (Ruby on Rails) as your backend. you’ll be able to still use Nodejs to run the webserver hosting your React application.
But however, would I would like Nodejs for an internet server after I have already got ROR you will ask?
Well, Nodejs offers extremely reliable and economical tools that may be used while not the requirement of a Node net server. you’ll be able to use quality from Node to make the RoR asset pipeline, leverage CommonJS to create your job easier.
Why NPM is important in React JS?
NPM is basically (Node Package Manager), Node works alongside the NPM registry to easily install any package through the NPM CLI. Node bundles a React application into a single file for easy compilation using web-pack and several other Node modules.
NPM is an Associate in Nursing abbreviation used for the node package manager. It’s a package manager for JavaScript. this is often the default package manager that comes with NodeJS once you install it. It consists of a command-line interface and web info of public packages and paid non-public packages, referred to as npm written account.
Downloading Node, npm automatically installed in your system. For checking whether it is installed or not run the respective commands in the command prompt or in the terminal of your system.
// For Node version
node -v
// For Npm version
npm -v
It is not necessary that the version you get is the same which is shown above in Fig-1. It may be different according to the updates made by Node and NPM.
2. Download a Code Editor or an IDE
There are lots of code editors and IDE and it is difficult to choose the right tool. Some of the development tools are:
- Atom
- Sublime Text Editor
- Brackets
- VS Code
and there are lots of many more tools, choose anyone you want. If you ask me I am using VS Code Editor for a long time and it has all I need. I will give you the basic knowledge of Visual Studio Code and if you want to know about any other Editors please do comment below.
Visual Studio Code or VS Code
VS Code was published by Microsoft: the tool is available under the MIT open-source license. Thanks to its functionality and freedom, VScode often wins the vote as the most popular IDE. Visual Studio Code IDE is available for Windows, Linux, and Mac operating systems. It supports lots of languages like JavaScript and React, Node.js, TypeScript, along with a whole ecosystem of extensions for other languages including C++, C#, Python, PHP, and (well sure) .NET.
VS Code is a great IDE to start your work as it supports many programming languages and has many features that will help you along your journey.
Main characteristics :
- It has built-in support for IntelliSense code completion and also a very good understanding of semantic code.
- imported modules;
- Integration with GitHub;
- Wide selections of themes;
- Built-in tools for testing code;
- Version control via extensions;
- Built-in debugger;
- Supports syntax highlighting;
- Integrated terminal;
- Go to Definition;
- Definition of Peek;
- You can also jump to any class definition;
- Tools for JSX/React, Html, JSON.
URL: Visual Studio Code Download Link
Extensions Needed To be downloaded for Running React
- ES7 React/Redux/GraphQL/React-Native snippets
- Prettier
3. Install React
We can install React npm packages by using the command. To execute packages Npx tool is used. Npx is also a CLI tool whose purpose is to facilitate the installation and management of dependencies hosted in the npm registry.
It is now very easy to run any type of Node Js-based executable that you would normally install through npm.
To create a React App run this command:
npx create-react-app my-app // my-app is the name of the app and you can choose of your wishGo to that App directory
cd my-appStart React App
npm start
Congratulations!! You created your first App…
Summary
I know, you find it more confusing in this article but it is not, all you need to do:
=> Open Command Prompt or Terminal and run:
=> npx create-react-app my-app
=> cd my-app
=> npm start
Started a series of React Js, read and comment if you like it.
1. The Fundamental Concept of React JS
2. React JS Installation and Environment Setup
Read More:
We have a series of C++ too please do check this.
