How to Learn React in 2025: A Beginner-Friendly Guide

Introduction

React remains one of the most powerful libraries for building interactive UIs in 2025. Whether you're a complete beginner or have some experience with JavaScript, this guide will help you learn React efficiently.

Prerequisites

Before diving into React, ensure you have a basic understanding of:

HTML, CSS, and JavaScript (ES6+ features like arrow functions, destructuring, and modules).

Node.js and npm (or yarn) installed on your machine.

Step 1: Setting Up Your React Environment

To start with React, you need to set up your development environment. The easiest way is to use Vite, which is faster than Create React App.

Install Node.js

Download and install the latest LTS version of Node.js from nodejs.org.

Create a React App with Vite

Run the following commands in your terminal:

# Install Vite globally (optional)
npm create vite@latest my-react-app --template react

# Navigate to project directory
cd my-react-app

# Install dependencies
npm install

# Start the development server
npm run dev

Step 2: Understanding React Components

React applications are built using components. Let's create our first component inside src/App.jsx:

function App() {
  return (
    <div>
      <h1>Hello, React 2025!</h1>
    </div>
  );
}

export default App;

Where to Add This Code?

Open src/App.jsx

Replace the existing code with the snippet above

Save and check your browser

Step 3: Using JSX & Props

JSX is a syntax extension for JavaScript that looks similar to HTML but allows dynamic rendering.

Let's create a new component src/components/Greeting.jsx:

function Greeting({ name }) {
  return <h2>Welcome, {name}!</h2>;
}

export default Greeting;

Now, use it inside App.jsx:

import Greeting from "./components/Greeting";

function App() {
  return (
    <div>
      <h1>Hello, React 2025!</h1>
      <Greeting name="Developer" />
    </div>
  );
}

Step 4: Adding State with useState Hook

React's useState helps manage component state.

Modify App.jsx to include state:

import { useState } from "react";

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

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Then, import and use it inside App.jsx:

import Counter from "./Counter";

function App() {
  return (
    <div>
      <h1>Hello, React 2025!</h1>
      <Counter />
    </div>
  );
}

Step 5: Fetching Data with useEffect

The useEffect hook is essential for fetching data.

Create src/components/Users.jsx:

import { useState, useEffect } from "react";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <div>
      <h2>Users List</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Users;

Now, use it inside App.jsx:

import Users from "./components/Users";

function App() {
  return (
    <div>
      <h1>Hello, React 2025!</h1>
      <Users />
    </div>
  );
}

Step 6: Styling Your Components

For quick styling, use Tailwind CSS:

Install Tailwind

Run this command inside your project:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Modify tailwind.config.js:

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add Tailwind to index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now, modify `App.jsx`:

function App() {
  return (
    <div className="text-center p-10">
      <h1 className="text-3xl font-bold">Hello, React 2025!</h1>
    </div>
  );
}

Conclusion

By following these steps, you've set up a React project, created components, managed state, fetched data, and added styling. Continue learning by exploring advanced topics like React Router, Context API, and Next.js!

If you found this helpful, leave a comment below! 🚀

Happy coding! 🎉