In this article we will go through Basic concepts of React.js which will help to implement small and basic react.js application concepts, it is a most trending JavaScript library for building dynamic and interactive user interfaces (UIs). It was developed by Facebook and is known for its component-based architecture, which allows developers to create reusable UI elements. React is widely used for building single-page applications (SPAs) and is a powerful tool for creating complex web applications that are easier to manage and maintain.

In this article, we will learn how to implement a basic setup of React.js, including installation, page setup, package installation, and how to import and use Node packages in our React application. We will also explore the most commonly used hooks in React.js, such as useEffect, useState (for state management), useRef, useCallback, useContext, and useDebugValue. So, let’s start with the basic React application setup first

Getting Started with React Installation

To get started with React, you’ll need to have Node.js and npm (Node Package Manager) installed on your system. Once you have these prerequisites, you can use Create React App (CRA) to set up a new React project with minimal configuration. Run the following command in your terminal to create a new React app, let start by creating new app.

Creating new react Application

To install the react application open your terminal in Visual Studio Code or you can use normal windows terminal and go to you directory where you want to install the react application and use the below command

npx create-react-app my-react-app

It will create new folder my-react-app inside you project if you want to do it on root folder just use . after npx create-react-app example as below

npx create-react-app .

Now once you APP got installed you can run below command to start you local server or to start your react application, in the root folder on in the folder where application is installed use below code

cd my-app

cd command will change your directory to the folder where application is installed

Then, start the development server:

npm start

This command will open your new React application in your default web browser, typically at http://localhost:3000. If everything is set up correctly, you should see the React logo and a welcome message as below image

Conclusion

You have successfully installed React and set up your first application using create-react-app. This tool abstracts away the configuration details, allowing you to focus on building your application. Happy coding!

Now below are some basic Hooks for React which you will continuously use in your React projects.

Most commonly used React Hooks