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

更新日期: 2023-11-09阅读: 923标签: React


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 获取数据并相应地更新组件的状态。

创建 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;

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

10.社交媒体动态

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

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

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

如何优雅的设计 React 组件

如今的 Web 前端已被 React、Vue 和 Angular 三分天下,尽管现在的 jQuery 已不再那么流行,但 jQuery 的设计思想还是非常值得致敬和学习的,特别是 jQuery 的插件化。

React深度编程:受控组件与非受控组件

受控组件与非受控组件在官网与国内网上的资料都不多,有些人觉得它可有可不有,也不在意。这恰恰显示React的威力,满足不同规模大小的工程需求。

React框架学习_关于React两种构建应用方式选择

一般在传统模式下,我们构建前端项目很简单。就是下载各种js文件,如JQuery、Echart等,直接放置在html静态文件。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。

Gatsby.js_一款基于React.js静态站点生成工具

Gatsby能快速的使用 React 生态系统来生成静态网站,可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。

React创建组件的三种方式及其区别

React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:函数式定义的无状态组件、es5原生方式React.createClass定义的组件、es6形式的extends React.Component定义的组件

react生命周期详解_深入理解React生命周期

React主要思想是通过构建可复用组件来构建用户界面,每个组件都有自己的生命周期,它规定了组件的状态和方法需要在哪个阶段改变和执行。所谓组件就是有限状态机,,表示有限个状态以及在这些状态之间的转移和动作行为的模型。

React + Webpack 构建打包优化

React 相关的优化:使用 babel-react-optimize 对 React 代码进行优化,检查没有使用的库,去除 import 引用,按需打包所用的类库,比如 lodash 、echarts 等.Webpack 构建打包存在的问题两个方面:构建速度慢,打包后的文件体积过大

react router中页面传值的三种方法

这篇文章主要介绍React Router定义路由之后如何传值,有关React和React Router 。react router中页面传值的三种方法:props.params、query、state

react 高阶组件的 理解和应用

react 高阶组件简单的理解是:一个包装了另一个基础组件的组件。高阶组件的两种形式:属性代理(Props Proxy)、反向继承 (Inheritance Inversion)

react中的refs属性的使用方法

React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!