Learn React In 2024 – A Step-By-Step Guide

What is React ? Why would you use it ?

  • React is open source JavaScript Libraby for building fast and interactive user interfaces.
  • Entire React application build with independent, isolated and reusable set of component. These component are put together to design to design complex layout. In other words we can say components are the building block of react application.
  • React simplifies the creation of SPA (Single Page Application) by using Reusable Component.

Why React – If we visit a React based application like netflix, we can see navigation of all pages around the application are super smooth, instant and you will never seen any effect to reload a new page.

Library of react help us to build user interfaces because React is a java script library. Clicking of different tabs triggers event listers and kicks of a series of function executions that display content & highlight the selected tab.

What is SPA(Single Page Application) ?

A single-page application is an app that works inside a browser and does not require page reload during use. SPA are all about serving an outstanding user experience(UX) by trying to imitate a “natural” environment in the browser — no page reloads, no extra wait time. It is just one HTML page that we visit which then loads all other content using JavaScript. For Example : Gmail, Facebook, Instagram.

React Interview Q&A

React Environment Setup

To run any React application, we need to first setup a ReactJS development environment. In this article, we will show you a step-by-step guide to installing and configuring a working React development environment.

Prerequisite :

  • Setup IDE
  • Create a React App
  • Project Structure

Integrated Development Environment(IDE)

Some of the basic features of IDE are :

  • Increase Productivity.
  • Offers a unified workplace.
  • Code Autocomplete.
  • Syntax Highlighting.
  • Error Checking.
  • IDE designed to improve developer efficiency.
  • Easy for problem identification.
  • Version Control.

Setup IDE

  • Install latest Node
  • Install VS Code
  • VS Code Extension and Setting
    1. Live Server / Live Preview
    2. Prettier (Format on Save)
    3. Word Wrap
    4. Tab Size from 4 to 2

Live Server / Live Preview

Prettier (Format on Save)

Go to File => Performance => Settings

Type on Search box “Format on Save” and enable check box Format On Save.

Word Wrap

Again Type on Search box “Word Wrap” and switch to ON

Tab Size from 4 to 2

All the necessary tools has been installed and configured all the settings. Now we have to create React APP. There are 2 different way to create app.

CRUD operation Asp .Net Core with Entity Framework Data First Approach

Create a React App

  • Official tool is CRA(Create React APP)
  • Vite is a modern tool to create React Project
  • Vite produces Quick and Small bundle size
  • Vite : Use “npm run dev” to launch dev server.
  • Use “npm start” for CRA.
If you are a first time react learner I will strongly recommend to use Vite to create React Application.

Go to your command prompt for window operation system or open terminal for Mac Operating System and install latest version of Vite.

  • Place Command : npm create vite@latest
  • Enter Project Name which you want : first-react-app
  • Select a framework : React
  • Select a Variant: JavaScript
  • If you install previous version of NPM then update with new one
    • npm install -g npm@latest

Now go inside the first-react-app

If you want to see all the files and folder then place ls(Mac User) and dir(Window User)

All these steps has done in command prompt for window’s operating system. Now open your visual studio code which you have installed earlier.

Open VS Code => Go to File => Open Folder => Select the application folder

Click on the option “Yes, I trust the authors” then your project structure looks like below:

Now execute the application without any changes in application to check the application is successfully created or not.

Select View => Terminal to open terminal and install NPM.

“npm install” install all the dependencies of the application along with the supported version.

Now we have to run the application to the browser.

Command : npm run dev

You can see application is successfully run to the browser on Port : 5173

Related Topics