React JS Basic Concepts Reference

Last Updated : 21 Apr, 2025

React is a library and not a framework. It was developed by Facebook to address its specific challenges. Understanding a new library or framework can be exciting, but it’s important to first grasp its core concepts.

Setting Up the Development Environment

Before going into the practical aspects of ReactJS, it is Important to set up the development Environment. This guide will walk you through the process of installing the necessary tools and creating your first React Project.

Prerequisites:

To begin, you will need Node.js and npm(Node Package Manager). Node.js is a JavaScript runtime that allows you to run JavaScript outside the browser, while npm is used to manage your project’s dependencies.

1. Install Node.js and npm:

Visit the Official Node.js website and download (https://nodejs.org/en/download) the version recommended for most users.
After Installation, verify that everything is working by running the following Commands in your terminal.

$ node --version

2. Code Editor: While you can use any text editor, Visual Studio Code is highly recommended for its syntax highlighting, auto completion, and Git Integration.

Here’s a list of some good code editors you can explore:

Create a New React.JS Project

1. Install Vite and Create a Project

bash

npm create vite@latest my-react-app -- --template react

Replace my-react-app with your desired project name.

2. Navigate into your project directory

bash

cd my-react-app

3. Install dependencies:

bash

npm install

4. Start the development server:

XML

npm run dev

This will launch the app in your browser at http://localhost:3000.

Understanding the Project Structure:

Your new React project comes with a predefined structure. Here are the key files and folders you’ll work with:

public/index.html: The single HTML file where your React app will be rendered.
src/index.js: The JavaScript entry point for your React application.
src/App.js: A basic React component that serves as the starting point for your app.

Example: In this example, we have implemented a basic react app with the hello world output.

JavaScript

import React from 'react';

function App() {
    return (
        <div className="App">
            <h1 style={
                { textAlign: 'center' }
            }>
                Hello, World!
            </h1>
        </div>
    );
}

export default App;

Output:

Output

React Basic Concepts Reference

React Basic Concepts	Description
React JS Introduction to JSX	JSX (JavaScript XML) is a syntax extension for React.js that allows developers to write HTML elements.
React JS Rendering Elements	Rendering Elements in React involves efficiently updating the user interface by creating and updating virtual representations of the UI components.
React JS Components	Components in React are modular, reusable building blocks for UI elements.
React JS Components – Set 2	Components in React are modular, reusable building blocks for UI elements.
React JS Fragments	We may render a single element or multiple elements, though rendering multiple elements will require a ‘div’ tag called Fragment
React JS Props – Set 1	React allows us to pass information to a Component using something called props.
React JS Props – Set 2	React allows us to pass information to a Component using something called props.
React JS PropTypes	use the propType for validating any data we are receiving from props.
React JS State in React	React JS State is a way to store and manage the information or data while creating a React Application.
React JS Lifecycle of Components	Every React Component has a lifecycle of its own, lifecycle of a component can be defined as the series of methods that are invoked in different stages of the component’s existence.
React JS Conditional Rendering	Rendering based on the conditions called conditional rendering in React
React JS Lists	React Lists are very useful when it comes to developing the UI of any website
React JS Keys	React JS keys are a way of providing a unique identity to each item while creating the React JS Lists so that React can identify the element to be processed.
React JS Refs	React JS Refs are used to access and modify the DOM elements in the React Application.
React JS forms	In React Forms, All the form data is stored in the React’s component state
React JS Hooks	Hooks are used to give functional components an access to use the states and are used to manage side-effects in React.
React JS Router	In React mostly SPA are developed so Navigation is complex.
React JS ReactDOM	React provides the developers with a package react-dom to access and modify the DOM.
React JS Event Handling	Modern webpages rely on user interactions, triggering events like clicks or keypresses.
React JS Synthetic Events	Synthetic events in React are cross-browser wrappers around the browser’s original event.
React JS ContextAPI	Context API is used to pass global variables anywhere in the code.
React JS Controlled Components	React’s Controlled Components manage form data via component state, receiving values through props and updating through callbacks like onChange.