React JS Complete Tutorial for Beginners

Introduction

React JS is a popular JavaScript library for building user interfaces. This tutorial is aimed at beginners and will cover components, state management, hooks, and building a small project.

---

Step 1: Setting Up React

You can create a new React project using Vite:

npm create vite@latest my-react-app
cd my-react-app
npm install
npm run dev

---

Step 2: Understanding Components

React applications are built with components.

Example: Functional Component

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Welcome;

Rendering a Component

import React from "react";
import ReactDOM from "react-dom/client";
import Welcome from "./Welcome";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Welcome name="React Learner" />);

---

Step 3: State Management

State allows components to remember data.

import React, { useState } from "react";

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

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

export default Counter;

---

Step 4: Using Props

Props allow passing data to components:

function Greeting({ message }) {
  return <p>{message}</p>;
}

<Greeting message="Welcome to React JS!" />

---

Step 5: Handling Events

React makes it easy to handle events:

function ClickButton() {
  const handleClick = () => alert("Button clicked!");
  return <button onClick={handleClick}>Click Me</button>;
}

---

Step 6: Building a Mini Project – To-Do List

1. Create a list of tasks using state.
2. Add, delete, and toggle tasks.

Example:

import React, { useState } from "react";

function TodoApp() {
  const [tasks, setTasks] = useState([]);
  const [task, setTask] = useState("");

  const addTask = () => {
    if(task) setTasks([...tasks, task]);
    setTask("");
  };

  return (
    <div>
      <input 
        value={task} 
        onChange={(e) => setTask(e.target.value)} 
        placeholder="Add task" 
      />
      <button onClick={addTask}>Add</button>
      <ul>
        {tasks.map((t, index) => <li key={index}>{t}</li>)}
      </ul>
    </div>
  );
}

export default TodoApp;

---

Step 7: Next Steps

• Learn React Router for navigation
• Learn Context API or Redux for state management
• Build more projects to practice components, hooks, and lifecycle methods

---

Conclusion

By following this tutorial, you’ll have a strong foundation in React JS and be ready to build interactive and dynamic web applications.

---

SEO Suggestions:

• Main keywords: React tutorial for beginners, learn React JS, React components, React hooks, React mini project
• Meta description: Complete React JS tutorial for beginners with hands-on examples, components, hooks, and a mini project. Step-by-step guide for 2025.
• Catchy title suggestions: "React JS Complete Tutorial for Beginners 2025", "Learn React JS: Step-by-Step Beginner Guide"