Introduction to ReactJS - in 8 easy steps

1. What is ReactJS

It’s a Javascript Library.
It is one of the industry’s leading front-end development libraries.
Backed by Facebook and supported by an extensive user community

2. Why ReactJS

ReactJS’s popularity today has eclipsed that of all other front-end development frameworks. Here is why:

Easy creation of dynamic applications
Improved performance
Reusable components
Small learning curve
It can be used for the development of both web and mobile apps

3. Advantages of ReactJS

Below are some of the advantages of React:

Re-usability
Testing
Development efficiency
Consistency
Maintainability

4. Library VS Framework

We just went through that React is a library that has been developed and powered by Facebook.

But what is a library and why React isn’t a framework?

A library is a collection of different functions. These functions can be hundreds and thousands in numbers
While a framework is a collection of libraries. A framework is a full-blown technology that contains multiple or several hundred libraries that power the entire framework. A popular example of a framework is Angular

5. What is ECMAScript

ECMAScript is a JavaScript standard that was put in place to ensure that all different browsers like Google Chrome, Edge from Windows, or Safari from Mac OS had the same type of JS implementation at the backend to ensure cross-browser compatibility. That means an application/web page running on Edge should behave the same on Safari or Chrome. In other words, EcmaScript is just a different way to write out the logic in JavaScript.

React 18 uses ECMAScript 6 or higher for all JavaScript code implementations.

6. Development environment setup

We need the following installed on our system to begin React application development:

VS Code
NodeJS
ES7 + React/Redux/React Native snippets – Vs Code Extension
React Component – Vs Code Extension

If you are looking for a tutorial to install VS code and NodeJS. You need to follow the “How to Install Visual Code Studio” and 1st step of “Create NextJS project from Scratch” respectively.

7. NodeJS and NPM(node package manager)

Until now you’ve all executed JavaScript inside your browser. What if I wanted to run the same JavaScript outside my browser? That is where Node comes into play.

NodeJS is a JavaScript Backend runtime environment that runs on the JS V8 engine and executes JS code outside a browser. You can download it from the best way to download and install it is from its official website https://nodejs.org/en/.

NPM is a package manager for JavaScript runtime environment, Node. NPM hosts all free and paid packages that can be used in your applications

If you are looking for a tutorial to install npm on your PC, then you can follow “How to install NPM”.

8. Starting ReactJS development – CRA – create-react-app

In order to start developing our very first react-based application we will do the following:

1. Open VS Code in a new folder

2. Open VS Code Terminal – [CTRL + `]

3. Type the following command:

npx create-react-app my-app

It will create a React app with all the built-in React directories.

4. Now type the following command:

cd my-app

then

npm start

It will start your app’s development server on localhost//:3000, you will see this type of interface in your browser, where you can see live changes you do in your app.

If you want to check out a more detailed tutorial on how to create a ReactJS project from scratch then go to “Create a ReactJS project from Scratch”.

That’s it for the ReactJS introduction. if you want to learn React and become a Pro React Developer you can follow the full React tutorial series on “ReactJS”. Happy Coding!