What is React and How to Install Locally ? - part 1

In this tutorial, we'll learn about react, how it works, and its benefits and characteristics. Don't worry if you're not familiar with terms like components, properties, virtual dom, and JSX; the purpose of this introduction is to help you grasp react and how to develop with it.

What is react ?

React is a free and open-source component-based Javascript library for creating user interfaces for web and mobile applications.

It was developed by Meta engineer "Jordan Walke" and is supported by Meta and the open-source community.

How It Works?

It uses a virtual dom to determine what is truly changing in the UI and will re-render only what has changed, resulting in greater performance.

As a result, if the state of our application changes, the virtual DOM is updated first, rather than the real DOM.

Advantages of Reactjs

There are many benefits to using react, here I am highlighting 5 following points.

1. Reusable Component

Components are independent, reusable code blocks that can be reused across multiple applications with similar functionality. 

Because a single application is often made up of several separate components, For example, we can have a button component that displays different text on different pages, reusing them speeds up development.

2. Usability

React use JSX and Component which make the user interface easy to use and readable. A user can simply learn and accomplish basic tasks.

3. Performance

It relies on virtual dom that is lightweight javascript, react creates a virtual DOM in memory, it compares the current version of the virtual DOM with the previous version of the virtual DOM and only updates objects that have changed accordingly which makes the application faster.

4. Declarative

React is declarative, which means that we describe desired results without directly stating commands or processes to be taken, and we design the structure and elements without describing the control flow. It eliminates side effects.

 For example, when we modify the state of the UI, we do not provide step-by-step instructions.

5. Unidirectional data flow

In react data transferred in the application from one part to other parts in one-flow it means data come from the parent component to the child component in one way and the child component can't update it.

Features of React

Components: In react, components are building blocks; a single page may have multiple components, each of which is responsible for displaying a piece of HTML.

Props: Props or property refers to data passed in the Parent component.

JSX: It is a basic extension that enables us to write HTML elements within JavaScript code. React uses JSX to describe how the user interface should look.

React Hooks: React Hook is a built-in method that allows you to manage state and other features within a functional component. It usually replaces a class component.

Local Development Environment

We will learn about these topics in-depth in other articles.  Enough of all the information let's installed the new react app in our local system.

For this tutorial we need a text editor, you may use any text editor you want. I am using VS Code, If you are thinking about switching to a new editor or you are installing new, I will recommend you use VS Code. It has great extensions and will speed up your development. On code.visualstudio.com you can download and install it for all operating systems.

Finally, we can begin writing our react code. To do so, we will need the react project. The quickest method to get started with a react project it is to use a tool called 

create-react-app

For more details go to this page here. 

When you create your project with create react app tool, it provides a nice development environment. It will set up a live development server that allows you to preview the application locally on your system. This makes our development process much easier.

Getting started with create react app is straightforward, but, we will need the most recent version of NodeJs installed on our system to run create-react-app command. Otherwise, this will fail, so go to nodejs.org and download from there.

NodeJs is not directly related to react but would allow you to run JavaScript code outside of the browser.

Open your Visual Studio Code editor, in the menu, go to the terminal, new terminal, and open a new terminal that will now be your default system terminal or command prompt.

You can type node -v in your terminal, and you will see a version that means you have installed the node successfully.

node -v

Now run the following code in your terminal.

npx create-react-app react-app

'react-app' here is a project name, you can name it as you want it. 

This will now create a new react project in the location where you run this upper command. It will create a folder with the name you choose.

It will take a few minutes to finish the installation, once it finished it will generate 'react-app' project folder and within this folder it setup all necessary file you need to write react code and develop your react application. 

Lets check out the files and directory it downloaded. 

node_modules: this folder contains all npm dependency. 

Package.json: This file contains three dependencies that allow us to use react, react-dom and react-scripts. 

It also stores the list of dependency packages that our project depends on, as well as the version. Our react application's rendering to the DOM is handled by react-dom. 

Public folder 📁: It has index.js file it is like any other HTML document contain description, link and metadata. You can also add your own meta, links and title in this file. 

<div id="root"> </div>

It is a root DOM node, React DOM will control everything inside it.

Src folder 📁: This folder contains all the real source code that you will be working. You can add your own image, logo, file, stylesheets and directories inside.

cd stands for change directory. With cd react-app, we will change to the newly formed folder. 

So, in your terminal type following code and press enter-

cd reat-app

Now, for starting live development server, from root directory run -

npm start

Ta Da, Congratulation! You created your new react app I know it is default but we have completed our step. 

It automatically open localhost:3000 if in some case it does not open you  can manually type localhost:3000 in your browser. 

Since it is live development server if you make changes to your app.js file the browser will automatically update the page. 

You can shut down your development server with control+c command and press y. Now if you reload the page it will not work any more. 

Okay, we will learn more React in next article thanks for reading if you like this please share and comment below and tell me how was your experience.