Skip to main content
Welcome to the React documentation! This guide will help you understand the basics of React and how to get started building user interfaces.

​
What is React?

React is a popular open-source JavaScript library for building user interfaces, especially single-page applications. It lets you compose complex UIs from small, isolated pieces of code called components.

​
Prerequisites

Before you begin, make sure you have the following installed:
  • Node.js and npm: React applications are built using Node.js. You can download it from nodejs.org.

​
Setup a React Project

The easiest way to set up a new React project is by using a build tool like Vite or the official Create React App. Vite is often preferred for its speed and simplicity.
1

Create project

Create a new React project with Vite:
npm create vite@latest my-app -- --template react
2

Navigate to project

Change into the project directory:
cd my-app
3

Install dependencies

Install the required packages:
npm install
4

Start development server

Run the development server:
npm run dev
This will create a new directory called my-app with a basic React project structure and start a development server.

​
File Structure

A typical React project has the following structure: 
my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   ├── main.jsx
│   └── ...
├── .gitignore
├── package.json
└── README.md
  • public/: Contains the main HTML file and other static assets.
  • src/: Contains the React components and application logic.

​
Core Concepts

​
Components and JSX

Components are the building blocks of a React application. They are typically written as functional components that return JSX. JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files. 
import React from 'react';

// A simple functional component
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Another component using the Welcome component
function App() {
  return <Welcome name="John" />;
}

export default App;

​
Props

Props (short for “properties”) are used to pass data from a parent component to a child component, similar to function arguments. 
// Parent Component
import React from 'react';
import Welcome from './Welcome';

function App() {
  return <Welcome name="John" />;
}

export default App;

​
State and Hooks

State is used to manage data that can change over time within a component. Hooks are functions that let you use state and other React features in functional components. The most common Hooks are useState and useEffect.

​
useState

For managing state. It returns an array with the current state value and a function to update it. 
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

​
useEffect

For handling side effects (e.g., data fetching, subscriptions, manual DOM manipulation). It runs after every render, by default. 
import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // This function will run whenever `userId` changes
    fetch(`https://api.example.com/users/${userId}`)
      .then(response => response.json())
      .then(data => setUser(data));
  }, [userId]); // The dependency array ensures the effect only re-runs when `userId` changes

  if (!user) {
    return <div>Loading...</div>;
  }

  return <h1>Hello, {user.name}</h1>;
}

​
Styling in React

There are several ways to style React components:
  • CSS Stylesheets: The simplest way is to import a CSS file into your component.
  • Inline Styles: Apply styles directly to an element using a JavaScript object.
  • CSS-in-JS Libraries: Use libraries like styled-components or Emotion for a more component-based approach to styling.

​
React Router

React Router is the standard library for handling navigation in a React application. The latest version (v6) provides a simpler, more powerful way to define routes.
1

Install React Router

npm install react-router-dom
2

Configure router in main file

// src/main.jsx (or index.js)
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);
3

Define routes in App component

// src/App.jsx
import { Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

​
Additional Resources

Author: EasyGoDocs Team
Contributors: Anup Kumar

Build docs developers (and LLMs) love

Get started for freeTalk to us