适合初学者学习的 10 个 React.js 项目

react.js，通常称为 React，是一个用于构建用户界面的开源 JavaScript 库。由于其在创建动态 Web 应用程序方面的简单性和高效性，多年来它获得了极大的流行。对于初学者来说，React 提供了进入前端开发世界的绝佳切入点。为了帮助您开始 React 之旅，我们为初学者整理了 10 个最热门的 React.js 项目列表。这些项目经过精心挑选，旨在提供渐进式学习体验，同时涵盖 React 开发的各个方面。那么，让我们一步步深入探索这些项目。

1.React中的Hello World

过渡到新技术通常从经典的“Hello World”程序开始。在 React 世界中，这意味着创建一个显示“Hello, World!”的简单组件。在网页上。以下是在 React 中实现这一目标的方法：

import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default HelloWorld;

这是您的第一个 React 组件。您可以将其包含在您的项目中并查看“Hello, World!” 在浏览器中呈现。这是一个基本示例，但它向您介绍了 React 组件、JSX 的基本结构以及渲染的概念。

2. 待办事项列表应用程序

下一步是创建一个简单的待办事项列表应用程序。该项目非常适合学习如何管理和更新 React 中的状态。您还将获得事件处理的实践经验。下面是 React 中待办事项列表的基本示例：

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    setTodos([...todos, input]);
    setInput('');
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

该项目向您介绍了 useState 挂钩，它允许您管理应用程序的状态。这是学习如何创建交互式应用程序的实用方法。

3.天气应用

构建天气应用程序是初学者探索发出 api 请求和处理数据的绝佳项目。该项目涉及连接到天气 API 并根据用户输入（例如城市或邮政编码）显示当前天气信息。以下是使用 OpenWeatherMap API 的简化示例：

import React, { useState, useEffect } from 'react';

function WeatherApp() {
  const [location, setLocation] = useState('');
  const [weather, setWeather] = useState(null);

  const API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY';

  useEffect(() => {
    if (location) {
      fetch(`https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${API_KEY}`)
        .then((response) => response.json())
        .then((data) => setWeather(data));
    }
  }, [location]);

  return (
    <div>
      <h1>Weather App</h1>
      <input type="text" placeholder="Enter location" value={location} onChange={(e) => setLocation(e.target.value)} />
      {weather && (
        <div>
          <p>Temperature: {weather.main.temp}°C</p>
          <p>Weather: {weather.weather[0].description}</p>
        </div>
      )}
    </div>
  );
}

export default WeatherApp;

该项目教您如何从外部 API 获取数据并相应地更新组件的状态。

4.GitHub用户搜索

创建 GitHub 用户搜索应用程序允许您探索从 API 路由和获取数据的概念。在此项目中，您可以搜索 GitHub 用户并查看他们的个人资料。下面是一个使用 React Router 和 GitHub API 的简化示例：

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

function GitHubUserSearch() {
  const [query, setQuery] = useState('');
  const [user, setUser] = useState(null);

  useEffect(() => {
    if (query) {
      fetch(`https://api.github.com/users/${query}`)
        .then((response) => response.json())
        .then((data) => setUser(data));
    }
  }, [query]);

  return (
    <Router>
      <div>
        <h1>GitHub User Search</h1>
        <input type="text" placeholder="Enter GitHub username" value={query} onChange={(e) => setQuery(e.target.value)} />
        <Link to={`/user/${query}`}>Search</Link>
        <Switch>
          <Route path="/user/:username">
            {user && (
              <div>
                <h2>{user.name}</h2>
                <p>Followers: {user.followers}</p>
                <p>Repos: {user.public_repos}</p>
              </div>
            )}
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default GitHubUserSearch;

该项目向您介绍 React Router，支持在应用程序的不同部分之间进行导航。

5. 电影搜索应用程序

电影搜索应用程序是一个很棒的项目，用于探索更高级的 API 用法和处理搜索查询。在此项目中，您可以搜索电影并获取有关它们的详细信息。以下是使用 OMDB API 的简化示例：

import React, { useState, useEffect } from 'react';

function MovieSearch() {
  const [query, setQuery] = useState('');
  const [movies, setMovies] = useState([]);

  const API_KEY = 'YOUR_OMDB_API_KEY';

  useEffect(() => {
    if (query) {
      fetch(`https://www.omdbapi.com/?s=${query}&apikey=${API_KEY}`)
        .then((response) => response.json())
        .then((data) => setMovies(data.Search || []));
    }
  }, [query]);

  return (
    <div>
      <h1>Movie Search</h1>
      <input type="text" placeholder="Search for a movie" value={query} onChange={(e) => setQuery(e.target.value)} />
      <ul>
        {movies.map((movie) => (
          <li key={movie.imdbID}>
            <h2>{movie.Title}</h2>
            <p>Year: {movie.Year}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default MovieSearch;

该项目更深入地研究 API 集成和处理更复杂的数据结构。

6.计算器

创建一个简单的计算器应用程序可以让您探索如何处理用户输入并执行计算。在此项目中，您可以构建一个基本计算器，可以对数字进行加、减、乘、除操作。这是

一个简化的例子：

import React, { useState } from 'react';

function Calculator() {
  const [input, setInput] = useState('');
  const [result, setResult] = useState('');

  const handleInput = (value) => {
    setInput(input + value);
  };

  const calculateResult = () => {
    try {
      setResult(eval(input));
    } catch (error) {
      setResult('Error');
    }
  };

  const clearInput = () => {
    setInput('');
    setResult('');
  };

  return (
    <div>
      <h1>Calculator</h1>
      <input type="text" value={input} readOnly />
      <div className="buttons">
        <button onClick={() => handleInput('1')}>1</button>
        <button onClick={() => handleInput('2')}>2</button>
        <button onClick={() => handleInput('+')}>+</button>
        <button onClick={calculateResult}>=</button>
        <button onClick={clearInput}>C</button>
      </div>
      <div>
        <p>Result: {result}</p>
      </div>
    </div>
  );
}

export default Calculator;

该项目教您如何处理用户输入、执行计算和错误处理。

7. 食谱查找器

Recipe Finder 应用程序是一个有趣的项目，适合初学者学习复杂的状态管理和使用外部 API。在这个项目中，您可以根据成分搜索食谱。下面是一个使用 Spoonaulous API 的简化示例：

import React, { useState, useEffect } from 'react';

function RecipeFinder() {
  const [query, setQuery] = useState('');
  const [recipes, setRecipes] = useState([]);

  const API_KEY = 'YOUR_SPOONACULAR_API_KEY';

  useEffect(() => {
    if (query) {
      fetch(`https://api.spoonacular.com/recipes/findByIngredients?ingredients=${query}&apiKey=${API_KEY}`)
        .then((response) => response.json())
        .then((data) => setRecipes(data));
    }
  }, [query]);

  return (
    <div>
      <h1>Recipe Finder</h1>
      <input type="text" placeholder="Search for recipes by ingredient" value={query} onChange={(e) => setQuery(e.target.value)} />
      <ul>
        {recipes.map((recipe) => (
          <li key={recipe.id}>
            <h2>{recipe.title}</h2>
            <p>Missing Ingredients: {recipe.missedIngredientCount}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default RecipeFinder;

该项目扩展了您对 API 交互和使用更复杂的数据结构的了解。

8. 博客应用

创建博客应用程序是理解状态管理和 CRUD（创建、读取、更新、删除）操作的重要一步。在此项目中，您可以构建一个基本博客，您可以在其中创建、阅读、更新和删除博客文章。这是一个简化的示例：

import React, { useState } from 'react';

function BlogApp() {
  const [posts, setPosts] = useState([]);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [editIndex, setEditIndex] = useState(null);

  const addPost = () => {
    if (title && content) {
      if (editIndex !== null) {
        const updatedPosts = [...posts];
        updatedPosts[editIndex] = { title, content };
        setPosts(updatedPosts);
        setTitle('');
        setContent('');
        setEditIndex(null);
      } else {
        setPosts([...posts, { title, content }]);
        setTitle('');
        setContent('');
      }
    }
  };

  const editPost = (index) => {
    const post = posts[index];
    setTitle(post.title);
    setContent(post.content);
    setEditIndex(index);
  };

  const deletePost = (index) => {
    const updatedPosts = [...posts];
    updatedPosts.splice(index, 1);
    setPosts(updatedPosts);
  };

  return (
    <div>
      <h1>Blog App</h1>
      <input type="text" placeholder="Title" value={title} onChange={(e) => setTitle(e.target.value)} />
      <textarea placeholder="Content" value={content} onChange={(e) => setContent(e.target.value)} />
      <button onClick={addPost}>{editIndex !== null ? 'Edit Post' : 'Add Post'}</button>
      <ul>
        {posts.map((post, index) => (
          <li key={index}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
            <button onClick={() => editPost(index)}>Edit</button>
            <button onClick={() => deletePost(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default BlogApp;

该项目为您提供了应用状态管理和 CRUD 操作知识的机会。

9. 电商购物车

创建电子商务购物车是一个更复杂的项目，涉及管理购物车、处理用户交互和维护状态。在此项目中，您可以构建一个基本的电子商务购物车，允许用户在购物车中添加和删除商品。这是一个简化的示例：

import React, { useState } from 'react';

function ECommerceCart() {
  const [cart, setCart] = useState([]);
  const [products] = useState([
    { id: 1, name: 'Product 1', price: 10.99 },
    { id: 2, name: 'Product 2', price: 19.99 },
    { id: 3, name: 'Product 3', price: 14.99 },
  ]);

  const addToCart = (product) => {
    setCart([...cart, product]);
  };

  const removeFromCart = (product) => {
    const updatedCart = cart.filter((item) => item.id !== product.id);
    setCart(updatedCart);
  };

  return (
    <div>
      <h1>E-commerce Cart</h1>
      <div className="product-list">
        {products.map((product) => (
          <div key={product.id} className="product">
            <h2>{product.name}</h2>
            <p>${product.price}</p>
            <button onClick={() => addToCart(product)}>Add to Cart</button>
          </div>
        ))}
      </div>
      <div className="cart">
        <h2>Shopping Cart</h2>
        <ul>
          {cart.map((item) => (
            <li key={item.id}>
              <h3>{item.name}</h3>
              <p>${item.price}</p>
              <button onClick={() => removeFromCart(item)}>Remove</button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default ECommerceCart;

该项目增强了您对状态管理和用户交互的了解。

社交媒体源项目对于初学者来说是一个具有挑战性但有益的项目。它涉及创建一个类似于社交媒体平台的用户界面，包含帖子、点赞、评论和用户个人资料。虽然这

是一个简化版本，可以对其进行扩展以获得更多复杂性：

import React, { useState } from 'react';

function SocialMediaFeed() {
  const [posts, setPosts] = useState([]);
  const [input, setInput] = useState('');

  const addPost = () => {
    if (input) {
      setPosts([{ text: input, likes: 0, comments: [] }, ...posts]);
      setInput('');
    }
  };

  const addComment = (postIndex, comment) => {
    const updatedPosts = [...posts];
    updatedPosts[postIndex].comments.push(comment);
    setPosts(updatedPosts);
  };

  const likePost = (postIndex) => {
    const updatedPosts = [...posts];
    updatedPosts[postIndex].likes += 1;
    setPosts(updatedPosts);
  };

  return (
    <div>
      <h1>Social Media Feed</h1>
      <div className="post-input">
        <input type="text" placeholder="What's on your mind?" value={input} onChange={(e) => setInput(e.target.value)} />
        <button onClick={addPost}>Post</button>
      </div>
      <div className="posts">
        {posts.map((post, index) => (
          <div key={index} className="post">
            <p>{post.text}</p>
            <button onClick={() => likePost(index)}>Like ({post.likes})</button>
            <div className="comments">
              {post.comments.map((comment, commentIndex) => (
                <p key={commentIndex}>{comment}</p>
              ))}
            </div>
            <input
              type="text"
              placeholder="Add a comment"
              onChange={(e) => {
                const comment = e.target.value;
                if (comment) {
                  addComment(index, comment);
                  e.target.value = '';
                }
              }}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

export default SocialMediaFeed;

该项目挑战您处理复杂的数据结构和用户交互。

结论

作为初学者，深入研究 React.js 可能是一次令人兴奋且有益的旅程。成功的关键是从简单的项目开始，逐渐转向更复杂的项目。我们在本文中介绍的 10 个项目为您提供了学习 React 的结构化路径，从渲染组件的基础知识到处理用户交互、使用外部 API 和管理状态。随着您获得更多经验，您可以进一步扩展和自定义这些项目，以展示您的技能并创建您自己的独特应用程序。因此，请毫不犹豫地跳入 React.js 并开始构建！快乐编码！

翻译来自：https://javascript.withcodeexample.com/blog/top-10-react-js-projects-for-beginners-learning/

链接: https://www.fly63.com/article/detial/12549