WHAT IS REACTJS ?
React is a JavaScript library for building user interfaces. It is used to build single page applications and allows us to create reusable UI components. But if you’re not familiar with JavaScript or JavaScript libraries, that’s not a helpful definition. JavaScript is a super important coding language used to add animated and interactive features to websites or web applications. JavaScript libraries are collections of pre-written JavaScript code that can be used for common JS tasks, allowing you to bypass the time intensive (and unnecessary) process of coding by hand. If there’s a run-of-the-mill JavaScript function that you keep needing to code there’s probably a JS library to ease your pain. There are a lot of different JS libraries out there and React JS is one of them.
WHAT MAKES REACTJS UNIQUE ?
React is a JavaScript library that specializes in helping developers build user interfaces, or UIs. In terms of websites and web applications, UIs are the collection of on-screen menus, search bars, buttons, and anything else someone interacts with to use a website or app. ReactJS enables organizations to design better UI apps to enhance user experiences. To better user experience, higher click-through levels, and sales, they need this product. Compared with those using other systems, companies that use ReactJS are assured of better performance.
ReactJS is a stronger framework because of its ability to break down the complex interface and allow users to work on individual components. ReactJS comes with the core objective is to deliver the best rendering performance possible. Its strength stems from the emphasis on individual parts. ReactJS helps a developer to break down the complicated UI into smaller components, rather than operating on the entire web framework.
For developers who were probably looking for a simple programming language beyond Angular, React JS is a viable option. Developers working with other frameworks are required to perform a lot of complex coding during the individual comment development.
In addition to providing reusable React library code (saving development time and cutting down on the chance for coding errors), React comes with two key features that add to its appeal for JavaScript developers:
- JSX
- Virtual DOM
To get an even better understanding of React JS and why you should use it, let’s take a look at both.
JSX
JSX stands for JavaScript XML. It allows us to write HTML in React. JSX makes it easier to write and add HTML in React. JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.JSX converts HTML tags into react elements.You are not required to use JSX, but JSX makes it easier to write React applications.
VIRTUAL DOM
If you’re not using React JS (and JSX), your website will use HTML to update its DOM (the process that makes things “change†on screen without a user having to manually refresh a page). This works fine for simple, static websites, but for dynamic websites that involve heavy user interaction it can become a problem (since the entire DOM needs to reload every time the user clicks a feature calling for a page refresh).
However React creates a VIRTUAL DOM in memory. Instead of manipulating the browser’s DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM. React only changes what needs to be changed. React finds out what changes have been made, and changes only what needs to be changed. This kind of selective updating takes less computing power and less loading time, which might not sound like much when you’re talking about a single blog comment, but—when you start to think about all the dynamics and updating associated with even a slightly complex website—you’ll realize it adds up to a lot.
HOW TO CREATE A REACT APP ???
In order to learn and test React, you should set up a React Environment on your computer. This tutorial uses the create-react-app. The create-react-app is an officially supported way to create React applications. If you have NPM and Node.js installed, you can create a React application by first installing the create-react-app.
- Node.js installing:
From given url you can install node.js
url : https://nodejs.org/en/download/
1. Once the installer finishes downloading, launch it. Open the downloads link in your browser and click the file. Or, browse to the location where you have saved the file and double-click it to launch.
2. The system will ask if you want to run the software – click Run.
3. You will be welcomed to the Node.js Setup Wizard – click Next.
4. On the next screen, review the license agreement. Click Next if you agree to the terms and install the software.
5. The installer will prompt you for the installation location. Leave the default location, unless you have a specific need to install it somewhere else – then click Next.
6. The wizard will let you select components to include or remove from the installation. Again, unless you have a specific need, accept the defaults by clicking Next.
7. Finally, click the Install button to run the installer. When it finishes, click Finish.
- NPM installing
Open a command prompt (or PowerShell), and enter the following:
node –v
The system should display the Node.js version installed on your system. You can do the same for NPM
npm –v
Install create-react-app by running this command in your terminal:
npm install -g create-react-app
You are now ready to create your first React application.
Run this command to create a React application named myfirstreact:
npx create-react-app myfirstreact
The create-react-app will set up everything you need to run a React application.
To run, this command to move to the myfirstreact directory:
cd myfirstreact
Run this command to execute the React application myfirstreact:
C:\Users\Your Name\myfirstreact>npm start
A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:3000 in the address bar.
