Top 5 React Project for Beginners

A simple to-do list app

This is a great project for beginners because it’s relatively simple to implement and it allows you to demonstrate your understanding of the basic concepts of React.

import React, { useState } from "react";
import axios from "axios";

const TodoList = () => {
  const [todos, setTodos] = useState([]);

  const handleAddTodo = (todo) => {
    axios.post("/todos", { todo })
      .then((res) => {
        setTodos([...todos, res.data]);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const handleDeleteTodo = (id) => {
    axios.delete(`/todos/${id}`)
      .then((res) => {
        setTodos(todos.filter((todo) => todo.id !== id));
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <div>
      <h1>To-Do List</h1>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => handleDeleteTodo(todo.id)}>
              Delete
            </button>
          </li>
        ))}
      </ul>
      <input
        type="text"
        placeholder="Add a new todo"
        onChange={(e) => handleAddTodo(e.target.value)}
      />
    </div>
  );
};

export default TodoList;

This code uses the useState hook to store the list of todos in the state. When a new todo is added, the handleAddTodo function is called, which makes a POST request to the /todos endpoint. The response from the API is then used to update the list of todos in the state.

The handleDeleteTodo a function is used to delete a todo from the list. It makes a DELETE request to the /todos endpoint with the id of the todo to be deleted. The response from the API is then used to update the list of todos in the state.

The TodoList component is a simple React component that renders a list of todos and a form for adding new todos. The handleAddTodo and handleDeleteTodo functions are used to interact with the API.

To run this code, you will need to install the axios package. You can do this by running the following command in your terminal:

npm install axios

Once you have installed the axios package, you can run the code by starting a development server. You can do this by running the following command in your terminal:

npm start

This will start a development server on port 3000. You can then open your browser and navigate to http://localhost:3000 view the to-do list app.

To add a new todo, simply enter the todo text in the input field and click the “Add” button. To delete a todo, click the “Delete” button next to the todo.

The to-do list app will interact with the API to save and delete todos. You can view the API documentation by opening the api.docs.json file in your text editor.

A weather app

This is a more challenging project, but it’s a great way to show off your skills with React and APIs. You can use an API like OpenWeatherMap to get weather data, and then use React to create a user interface that displays the weather for a specific location.

Here are the steps on how to build a weather app with React and OpenWeatherMap API:

Create a new React project.
Install the axios package.
Import the axios package and the useState hook from React.
Create a function called getWeather that makes a GET request to the OpenWeatherMap API.
Create a Weather component that renders the weather data.
Start a development server and test the app.

Here is the code for the getWeather function:

import axios from "axios";

const getWeather = (city) => {
  return axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`)
    .then((res) => {
      return res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

Here is the code for the Weather component:

import React, { useState } from "react";
import { getWeather } from "./utils";

const Weather = () => {
  const [weather, setWeather] = useState(null);

  const handleChange = (e) => {
    setWeather(null);
    const city = e.target.value;
    getWeather(city).then((data) => {
      setWeather(data);
    });
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Enter a city"
        onChange={handleChange}
      />
      {weather && (
        <div>
          <h1>Weather for {weather.name}</h1>
          <p>
            Temperature: {weather.main.temp}°C
          </p>
          <p>
            Feels like: {weather.main.feels_like}°C
          </p>
          <p>
            Description: {weather.weather[0].description}
          </p>
        </div>
      )}
    </div>
  );
};

export default Weather;

This code will create a simple weather app that allows you to enter a city and get the weather for that city. The weather data is fetched from the OpenWeatherMap API.

To run the app, you can start a development server by running the following command in your terminal:

npm start

This will start a development server on port 3000. You can then open your browser and navigate to http://localhost:3000 to view the weather app.

A Portfolio Website

This is a great way to showcase your skills and experience to potential employers. You can use React to create a custom portfolio website that highlights your work and projects.

Here are the steps on how to build a portfolio website with React:

Create a new React project.
Install the react-bootstrap package.
Import the react-bootstrap package and the useState hook from React.
Create a Portfolio component that renders your work and projects.
Start a development server and test the app.

Here is the code for the Portfolio component:

import React, { useState } from "react";
import { Card, Button } from "react-bootstrap";

const Portfolio = () => {
  const [projects, setProjects] = useState([]);

  const handleAddProject = (project) => {
    setProjects([...projects, project]);
  };

  return (
    <div>
      <h1>My Portfolio</h1>
      <ul>
        {projects.map((project) => (
          <li key={project.id}>
            <Card>
              <Card.Body>
                <h2>{project.title}</h2>
                <p>{project.description}</p>
                <Button onClick={() => handleAddProject(project)}>
                  Add Project
                </Button>
              </Card.Body>
            </Card>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Portfolio;

This code will create a simple portfolio website that allows you to add your work and projects. The projects are rendered as cards, and you can add a new project by clicking the “Add Project” button.

To run the app, you can start a development server by running the following command in your terminal:

npm start

This will start a development server on port 3000. You can then open your browser and navigate to http://localhost:3000 to view the portfolio website.

This is a more complex project, but it’s a great way to show off your skills with React and state management.

Here are the steps on how to build a social media app with React:

Create a new React project.
Install the react-router-dom package.
Import the react-router-dom package and the useState hook from React.
Create a SocialMediaApp component that renders the main user interface.
Create Profile and Post components that render the user profile and posts.
Start a development server and test the app.

Here is the code for the SocialMediaApp component:

import React, { useState } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Profile from "./Profile";
import Post from "./Post";

const SocialMediaApp = () => {
  const [currentUser, setCurrentUser] = useState(null);

  return (
    <BrowserRouter>
      <Switch>
        <Route path="/profile" component={Profile} />
        <Route path="/posts" component={Post} />
      </Switch>
    </BrowserRouter>
  );
};

export default SocialMediaApp;

This code will create a simple social media app that allows users to view their profile and posts. The user profile and posts are rendered as separate components.

To run the app, you can start a development server by running the following command in your terminal:

npm start

This will start a development server on port 3000. You can then open your browser and navigate to http://localhost:3000 to view the social media app.

Here are some additional tips for building a social media app with React:

Use a responsive layout so that your app looks good on all devices.
Use a state management library like Redux to manage the state of your app.
Use a routing library like React Router to navigate between different pages in your app.
Use a templating library like Material UI to style your app.
Make sure your app is secure and uses HTTPS.

A Tic Tac Toe game

This is a great way to show off your creativity and your skills with React and animation.

here are the steps on how to build a game with React:

Create a new React project.
Install the react-dom and react-game-kit packages.
Import the react-dom and react-game-kit packages and the useState hook from React.
Create a Game component that renders the game board and logic.
Start a development server and test the game.

Here is the code for the Game component:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { useGame } from "react-game-kit";

const Game = () => {
  const [board, setBoard] = useState([
    [" ", " ", " "],
    [" ", " ", " "],
    [" ", " ", " "],
  ]);

  const handleClick = (i, j) => {
    setBoard([...board, [board[i][j], " ", " "]]);
  };

  return (
    <div>
      <table>
        {board.map((row, i) => (
          <tr key={i}>
            {row.map((cell, j) => (
              <td
                key={j}
                onClick={() => handleClick(i, j)}
                style={{
                  backgroundColor: cell === " " ? "white" : "black",
                }}
              >
                {cell}
              </td>
            ))}
          </tr>
        ))}
      </table>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<Game />, rootElement);

This code will create a simple tic-tac-toe game that allows users to click on the board to make a move. The game board is rendered as a table and the cells in the table are rendered as buttons.

To run the app, you can start a development server by running the following command in your terminal: