项目完成与部署

在这一节中，我们将集中讨论如何完成一个简单的 React 项目，并最终将其部署到生产环境。我们将通过一个小示例来演示整个流程，包括代码示例和如何将其部署到 Netlify。

1. 项目完成

1.1 创建项目

首先，确保你已经安装了 Node.js 和 npm。然后，你可以使用以下命令创建一个新的 React 项目：

npx create-react-app my-app
cd my-app

1.2 项目结构

在项目创建完成后，你的文件夹结构应如下所示：

my-app
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
├── .gitignore
├── package.json
└── README.md

1.3 编写代码

接下来，我们将在 src/App.js 中编写一个简单的 Todo List 应用程序。以下是代码示例：

import React, { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    if (inputValue.trim()) {
      setTodos([...todos, inputValue]);
      setInputValue('');
    }
  };

  const removeTodo = (index) => {
    setTodos(todos.filter((_, i) => i !== index));
  };

  return (
    <div className="App">
      <h1>Todo List</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Enter a new todo"
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo} <button onClick={() => removeTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

1.4 样式调整

在 src/App.css 中，你可以添加一些基本的样式，以使界面更美观。例如：

.App {
  text-align: center;
}

input {
  margin: 10px;
  padding: 5px;
}

button {
  padding: 5px 10px;
}

1.5 运行项目

完成代码后，可以通过以下命令启动开发服务器：

npm start

你现在应该可以在浏览器中访问 http://localhost:3000 查看你的 Todo List 应用。

2. 项目部署

2.1 构建项目

在部署之前，你需要构建项目，以生成生产环境下的可用代码。使用以下命令：

npm run build

该命令会在 my-app/build 文件夹中生成静态文件。

2.2 部署到 Netlify

1. 注册或登录 Netlify: 首先访问 Netlify 并注册一个账号，或使用现有账号登录。

2. 创建新站点: 在 Netlify 的仪表板上，点击 “New site from Git”。

3. 连接 Git 提供者: 选择 GitHub 或其他代码仓库托管服务，并授权 Netlify 访问你的代码。

4. 选择仓库: 找到并选择你刚刚创建的项目仓库。

5. 设置构建设置:

   • Branch to deploy: 选择 main 或 master 分支（取决于你的项目设置）。
   • Build command: 输入 npm run build。
   • Publish directory: 输入 build。

6. 点击 Deploy Site: 现在，Netlify 会自动开始构建并部署你的网站。

2.3 访问网站

部署完成后，你将获得一个 Netlify 提供的公共网址，可以在浏览器中访问你的网站并查看效果。

恭喜你！你已经成功创建并部署了一个简单的 React 项目。你可以根据自己的需要扩展和修改这个项目，探索更多的功能和技术。