docs/guides/react_playground

React 是一个用于构建用户界面的 JavaScript 库，它可以帮助你构建高性能、响应式的应用程序。在这个指南中，我们将介绍如何在 React 中创建一个简单的 playground，以便你能够快速学习和实践。

快速开始

1. 安装 React：首先，你需要安装 React。你可以通过创建一个新的项目或者在你的现有项目中添加 React 来实现。

   npx create-react-app my-react-playground
   cd my-react-playground
   npm start
   

2. 编写你的第一个组件：在你的项目中，你将看到一个名为 src/App.js 的文件。这是你的应用程序的主要组件。

   import React from 'react';
   
   function App() {
     return (
       <div>
         <h1>Hello, React!</h1>
       </div>
     );
   }
   
   export default App;
   

3. 运行你的应用：现在，你可以启动你的开发服务器，并查看你的 React 应用程序。

   npm start
   

实践项目

为了更好地理解 React，我们可以创建一个简单的待办事项列表项目。

1. 创建待办事项列表组件：在你的 src 文件夹中创建一个新的文件，命名为 TodoList.js。

   import React, { useState } from 'react';
   
   function TodoList() {
     const [todos, setTodos] = useState([]);
   
     const addTodo = (todo) => {
       setTodos([...todos, todo]);
     };
   
     return (
       <div>
         <h2>待办事项</h2>
         <ul>
           {todos.map((todo, index) => (
             <li key={index}>{todo}</li>
           ))}
         </ul>
         <input type="text" placeholder="添加待办事项" onKeyPress={(e) => {
           if (e.key === 'Enter') {
             addTodo(e.target.value);
             e.target.value = '';
           }
         }} />
       </div>
     );
   }
   
   export default TodoList;
   

2. 在 App 组件中使用 TodoList：修改 src/App.js 文件，将 TodoList 组件添加到你的应用程序中。

   import React from 'react';
   import TodoList from './TodoList';
   
   function App() {
     return (
       <div>
         <TodoList />
       </div>
     );
   }
   
   export default App;
   

3. 运行你的应用：再次启动你的开发服务器，并查看你的待办事项列表。

   npm start
   

现在，你已经创建了一个简单的 React playground。你可以继续扩展你的项目，添加更多的功能和组件。

React Logo