本文介绍了如何使用Create React App工具快速创建React应用，无需手动配置复杂的构建系统。该工具内置了代码转译、基本的代码检查、测试和构建流程。通过几个简单的步骤，包括安装依赖、启动服务器、修改主页和标题样式等，即可开始编写React代码。教程适合具备JavaScript基础知识的开发者，结束后将得到一个可运行的React应用，作为未来项目的基石。
The author selected Creative Commons to receive a donation as part of the Write for DOnations program.
作者选择了创用CC来接受捐赠，这是Write for DOnations计划的一部分。
介绍 (Introduction)
React is a popular JavaScript framework for creating front-end applications. Originally created by Facebook, it has gained popularity by allowing developers to create fast applications using an intuitive programming paradigm that ties JavaScript with an HTML-like syntax known as JSX.
React是用于创建前端应用程序的流行JavaScript框架。 它最初由Facebook创建，通过允许开发人员使用直观的编程范例创建快速的应用程序而广受欢迎，该直观的范例将JavaScript与类似于JSX的类似HTML的语法联系起来。
Starting a new React project used to be a complicated multi-step process that involved setting up a build system, a code transpiler to convert modern syntax to code that is readable by all browsers, and a base directory structure. But now, Create React App includes all the JavaScript packages you need to run a React project, including code transpiling, basic linting, testing, and build systems. It also includes a server with hot reloading that will refresh your page as you make code changes. Finally, it will create a structure for your directories and components so you can jump in and start coding in just a few minutes.
启动一个新的React项目曾经是一个复杂的多步骤过程，涉及到建立构建系统，一个将现代语法转换为所有浏览器均可读取的代码的代码编译器，以及一个基本目录结构。 但是现在， Create React App包含了运行React项目所需的所有JavaScript程序包，包括代码转译，基本整理，测试和构建系统。 它还包括一个具有热重装功能的服务器，当您更改代码时，该服务器将刷新您的页面。 最后，它将为您的目录和组件创建一个结构，以便您可以在几分钟之内进入并开始编码。
In other words, you don’t have to worry about configuring a build system like Webpack. You don’t need to set up Babel to transpile you code to be cross-browser usable. You don’t have to worry about most of the complicated systems of modern front-end development. You can start writing React code with minimal preparation.
换句话说，您不必担心配置Webpack之类的构建系统。 您无需设置Babel即可转换您的代码以跨浏览器使用。 您不必担心现代前端开发的大多数复杂系统。 您可以以最少的准备工作开始编写React代码。
By the end of this tutorial, you’ll have a running React application that you can use as a foundation for any future applications. You’ll make your first changes to React code, update styles, and run a build to create a fully minified version of your application. You’ll also use a server with hot reloading to give you instant feedback and will explore the parts of a React project in depth. Finally, you will begin writing custom components and creating a structure that can grow and adapt with your project.
在本教程结束时，您将拥有一个正在运行的React应用程序，您可以将其用作将来任何应用程序的基础。 您将对React代码进行首次更改，更新样式，并运行构建以创建应用程序的完全精简版本。 您还将使用带有热重载的服务器来为您提供即时反馈，并将深入探讨React项目的各个部分。 最后，您将开始编写自定义组件并创建可以随项目增长并适应其需求的结构。
先决条件 (Prerequisites)
To follow this tutorial, you’ll need the following:
要遵循本教程，您需要具备以下条件：
Node.js version 10.16.0 installed on your computer. To install this on macOS or Ubuntu 18.04, follow the steps in How to Install Node.js and Create a Local Development Environment on macOS or the Installing Using a PPA section of How To Install Node.js on Ubuntu 18.04.
您的计算机上安装了Node.js版本10.16.0。 要将其安装在macOS或Ubuntu 18.04上，请遵循如何在macOS上安装Node.js并创建本地开发环境中的步骤，或如何在Ubuntu 18.04上安装Node.js的 使用PPA安装部分中的步骤 。
It will also help to have a basic understanding of JavaScript, which you can find in the How To Code in JavaScript series, along with a basic knowledge of HTML and CSS.
这也将有助于您对JavaScript有基本的了解，您可以在《 如何在JavaScript中编写代码》系列中找到该知识，以及HTML和CSS的基本知识。
第1步—使用Create React App创建一个新项目 (Step 1 — Creating a New Project with Create React App)
In this step, you’ll create a new application using the npm package manager to run a remote script. The script will copy the necessary files into a new directory and install all dependencies.
在此步骤中，您将使用npm软件包管理器创建一个新应用程序以运行远程脚本。 该脚本会将必要的文件复制到新目录并安装所有依赖项。
When you installed Node, you also installed a package managing application called npm. npm will install JavaScript packages in your project and also keep track of details about the project. If you’d like to learn more about npm, take a look at our How To Use Node.js Modules with npm and package.json tutorial.
安装Node时，还安装了名为npm的软件包管理应用npm 。 npm将在您的项目中安装JavaScript软件包，并跟踪有关该项目的详细信息。 如果您想了解有关npm更多信息，请看一下我们如何通过npm和package.json教程使用Node.js模块 。
npm also includes a tool called npx, which will run executable packages. What that means is you will run the Create React App code without first downloading the project.
npm还包括一个名为npx的工具，它将运行可执行程序包。 这意味着您无需先下载项目即可运行Create React App代码。
The executable package will run the installation of create-react-app into the directory that you specify. It will start by making a new project in a directory, which in this tutorial will be called digital-ocean-tutorial. Again, this directory does not need to exist beforehand; the executable package will create it for you. The script will also run npm install inside the project directory, which will download any additional dependencies.
可执行软件包将在您指定的目录中运行create-react-app的安装。 首先在目录中创建一个新项目，在本教程中该目录称为digital-ocean-tutorial 。 同样，该目录不需要预先存在； 可执行程序包将为您创建它。 该脚本还将在项目目录中运行npm install ，该目录将下载所有其他依赖项。
To install the base project, run the following command:
要安装基础项目，请运行以下命令：
npx create-react-app digital-ocean-tutorial
npx create-react-app 数字海洋教程
This command will kick off a build process that will download the base code along with a number of dependencies.
此命令将启动一个构建过程，该过程将下载基本代码以及许多依赖项。
When the script finishes you will see a success message that says:
脚本完成后，您将看到一条成功消息，内容为：
Output
...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd digital-ocean-tutorial
npm start
Happy hacking!
your_file_path will be your current path. If you are a macOS user, it will be something like /Users/your_username; if you are on an Ubuntu server, it will say something like /home/your_username.
your_file_path将是您当前的路径。 如果您是macOS用户，则类似于/Users/ your_username ； 如果您在Ubuntu服务器上，它将显示类似/home/ your_username 。
You will also see a list of npm commands that will allow you to run, build, start, and test your application. You’ll explore these more in the next section.
您还将看到npm命令列表，这些命令将允许您运行，构建，启动和测试应用程序。 您将在下一部分中进一步探讨这些内容。
Note: There is another package manager for JavaScript called yarn. It’s supported by Facebook and does many of the same things as npm. Originally, yarn provided new functionality such as lock files, but now these are implemented in npm as well. yarn also includes a few other features such as offline caching. Further differences can be found on the yarn documentation.
注意：还有另一个JavaScript软件包管理器称为yarn 。 它得到了Facebook的支持，并且与npm做很多相同的事情。 最初， yarn提供了新功能，例如锁定文件，但现在这些功能也都在npm中实现。 yarn还包括其他一些功能，例如离线缓存。 可以在yarn文档中找到更多区别。
If you have previously installed yarn on your system, you will see a list of yarn commands such as yarn start that work the same as npm commands. You can run npm commands even if you have yarn installed. If you prefer yarn, just replace npm with yarn in any future commands. The results will be the same.
如果您先前已在系统上安装yarn ，则将看到yarn命令列表，例如yarn start ，其工作方式与npm命令相同。 即使安装了yarn也可以运行npm命令。 如果您更喜欢yarn ，只需在以后的任何命令中将npm替换为yarn 。 结果将是相同的。
Now your project is set up in a new directory. Change into the new directory:
现在，您的项目已建立在新目录中。 转到新目录：
cd digital-ocean-tutorial
cd 数字海洋教程
You are now inside the root of your project. At this point, you’ve created a new project and added all of the dependencies. But you haven’t take any actions to run the project. In the next section, you’ll run custom scripts to build and test the project.
您现在位于项目的根目录下。 至此，您已经创建了一个新项目并添加了所有依赖项。 但是您没有采取任何措施来运行该项目。 在下一部分中，您将运行自定义脚本来构建和测试项目。
第2步-使用react-scripts (Step 2 — Using react-scripts)
In this step, you will learn about the different react-scripts that are installed with the repo. You will first run the test script to execute the test code. Then you will run the build script to create a minified version. Finally, you’ll look at how the eject script can give you complete control over customization.
在这一步中，您将了解与存储库一起安装的不同的react-scripts 。 您将首先运行test脚本以执行测试代码。 然后，您将运行build脚本来创建缩小版本。 最后，您将了解eject脚本如何使您可以完全控制自定义。
Now that you are inside the project directory, take a look around. You can either open the whole directory in your text editor, or if you are on the terminal you can list the files out with the following command:
既然您位于项目目录中，请四处看看。 您可以在文本编辑器中打开整个目录，或者如果您在终端上，则可以使用以下命令列出文件：
- ls -a ls -a
The -a flag ensures that the output also includes hidden files.
-a标志可确保输出还包括隐藏文件。
Either way, you will see a structure like this:
无论哪种方式，您都会看到这样的结构：
Output
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json
Let’s explain these one by one:
让我们一一解释：
node_modules/contains all of the external JavaScript libraries used by the application. You will rarely need to open it.node_modules/包含应用程序使用的所有外部JavaScript库。 您几乎不需要打开它。The
public/directory contains some base HTML, JSON, and image files. These are the roots of your project. You’ll have an opportunity to explore them more in Step 4.public/目录包含一些基本HTML， JSON和图像文件。 这些是您项目的根源。 在第4步中，您将有机会进一步探索它们。The
src/directory contains the React JavaScript code for your project. Most of the work you do will be in that directory. You’ll explore this directory in detail in Step 5.src/目录包含您项目的React JavaScript代码。 您所做的大部分工作将在该目录中。 您将在步骤5中详细浏览此目录。The
.gitignorefile contains some default directories and files that git—your source control—will ignore, such as thenode_modulesdirectory. The ignored items tend to be larger directories or log files that you would not need in source control. It also will include some directories that you’ll create with some of the React scripts..gitignore文件包含一些默认目录和git(您的源代码控制)将忽略的文件，例如node_modules目录。 被忽略的项目通常是在源代码管理中不需要的较大目录或日志文件。 它还将包括您将使用某些React脚本创建的一些目录。README.mdis a markdown file that contains a lot of useful information about Create React App, such as a summary of commands and links to advanced configuration. For now, it’s best to leave theREADME.mdfile as you see it. As your project progresses, you will replace the default information with more detailed information about your project.README.md是一个markdown文件，其中包含有关Create React App的许多有用信息，例如命令摘要和指向高级配置的链接。 现在，最好保留所看到的README.md文件。 随着项目的进行，您将用有关项目的更多详细信息替换默认信息。
The last two files are used by your package manager. When you ran the initial npx command, you created the base project, but you also installed the additional dependencies. When you installed the dependencies, you created a package-lock.json file. This file is used by npm to ensure that the packages match exact versions. This way if someone else installs your project, you can ensure they have identical dependencies. Since this file is created automatically, you will rarely edit this file directly.
最后两个文件由包管理器使用。 运行初始npx命令时，您创建了基础项目，但同时还安装了其他依赖项。 安装依赖项时，创建了package-lock.json文件。 npm使用此文件来确保软件包与确切版本匹配。 这样，如果其他人安装了您的项目，则可以确保他们具有相同的依赖项。 由于此文件是自动创建的，因此您很少会直接编辑此文件。
The last file is a package.json. This contains metadata about your project, such as the title, version number, and dependencies. It also contains scripts that you can use to run your project.
最后一个文件是package.json 。 它包含有关项目的元数据，例如标题，版本号和依赖项。 它还包含可用于运行项目的脚本。
Open the package.json file in your favorite text editor:
在您喜欢的文本编辑器中打开package.json文件：
- nano package.json 纳米package.json
When you open the file, you will see a JSON object containing all the metadata. If you look at the scripts object, you’ll find four different scripts: start, build, test, and eject.
打开文件时，您将看到一个包含所有元数据的JSON对象。 如果您查看scripts对象，则会发现四个不同的脚本： start ， build ， test和eject 。
These scripts are listed in order of importance. The first script starts the local development environment; you’ll get to that in the next step. The second script will build your project. You’ll explore this in detail in Step 4, but it’s worth running now to see what happens.
这些脚本按重要性顺序列出。 第一个脚本启动本地开发环境。 您将在下一步中进行介绍。 第二个脚本将构建您的项目。 您将在第4步中对此进行详细探讨，但是现在值得运行以了解发生了什么。
在build脚本 (The build Script)
To run any npm script, you just need to type npm run script_name in your terminal. There are a few special scripts where you can omit the run part of the command, but it’s always fine to run the full command. To run the build script, type the following in your terminal:
要运行任何npm脚本，只需在终端中键入npm run script_name 。 您可以省略一些特殊的脚本来run命令的run部分，但是运行完整的命令总是可以的。 要运行build脚本，请在终端中键入以下内容：
- npm run build npm运行构建
You will immediately see the following message:
您将立即看到以下消息：
Output
> digital-ocean-tutorial@0.1.0 build your_file_path/digital-ocean-tutorial
> react-scripts build
Creating an optimized production build...
...
This tells you that Create React App is compiling your code into a usable bundle.
这告诉您Create React App正在将您的代码编译为可用的包。
When it’s finished, you’ll see the following output:
完成后，您将看到以下输出：
Output
...
Compiled successfully.
File sizes after gzip:
39.85 KB build/static/js/9999.chunk.js
780 B build/static/js/runtime-main.99999.js
616 B build/static/js/main.9999.chunk.js
556 B build/static/css/main.9999.chunk.css
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
List out the project contents and you will see some new directories:
列出项目内容，您将看到一些新目录：
- ls -a ls -a
Output
build/
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json
You now have a build directory. If you opened the .gitignore file, you may have noticed that the build directory is ignored by git. That’s because the build directory is just a minified and optimized version of the other files. There’s no need to use version control since you can always run the build command. You’ll explore the output more later; for now, it’s time to move on to the test script.
现在，您有了一个build目录。 如果打开.gitignore文件，则可能已经注意到git忽略了build目录。 这是因为build目录只是其他文件的缩小版本和优化版本。 无需使用版本控制，因为您始终可以运行build命令。 您将在以后更多地探索输出。 现在，是时候继续test脚本了。
test脚本 (The test Script)
The test script is one of those special scripts that doesn’t require the run keyword, but works even if you include it. This script will start up a test runner called Jest. The test runner looks through your project for any files with a .spec.js or .test.js extension, then runs those files.
test脚本是不需要run关键字的特殊脚本之一，但是即使包含它也可以使用。 该脚本将启动一个名为Jest的测试运行程序。 测试运行程序在您的项目中.test.js扩展名为.spec.js或.test.js任何文件，然后运行这些文件。
To run the test script, type the following command:
要运行test脚本，请键入以下命令：
- npm test npm测试
After running this script your terminal will have the output of the test suite and the terminal prompt will disappear. It will look something like this:
运行此脚本后，您的终端将具有测试套件的输出，并且终端提示将消失。 它看起来像这样：
Output
PASS src/App.test.js
✓ renders learn react link (67ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.204s
Ran all test suites.
Watch Usage
› Press f to run only failed tests.
› Press o to only run tests related to changed files.
› Press q to quit watch mode.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press Enter to trigger a test run.
There are a few things to notice here. First, as noted before, it automatically detects any files with test extensions including .test.js and .spec.js. In this case, there is only one test suite—that is, only one file with a .test.js extension—and that test suite contains only one test. Jest can detect tests in your code hierarchy, so you can nest tests in a directory and Jest will find them.
这里有一些注意事项。 首先，如前所述，它会自动检测任何带有测试扩展名的文件，包括.test.js和.spec.js 。 在这种情况下，只有一个测试套件 -即只有一个扩展名为.test.js文件-并且该测试套件仅包含一个测试。 Jest可以检测代码层次结构中的测试，因此您可以将测试嵌套在目录中，然后Jest会找到它们。
Second, Jest doesn’t run your test suite once and then exit. Rather, it continues running in the terminal. If you make any changes in the source code, it will rerun the tests again.
其次，Jest不会一次运行测试套件然后退出。 而是继续在终端中运行。 如果您对源代码进行了任何更改，它将再次重新运行测试。
You can also limit which tests you run by using one of the keyboard options. If you type o, for example, you will only run the tests on files that have changed. This can save you lots of time as your test suites grow.
您还可以使用键盘选项之一来限制要运行的测试。 例如，如果键入o ，则将仅对已更改的文件运行测试。 随着测试套件的增长，这可以节省大量时间。
Finally, you can exit the test runner by typing q. Do this now to regain your command prompt.
最后，您可以输入q退出测试运行程序。 立即执行此操作以重新获得命令提示符。
eject脚本 (The eject Script)
The final script is npm eject. This script copies your dependencies and configuration files into your project, giving you full control over your code but ejecting the project from the Create React App integrated toolchain. You will not run this now because, once you run this script, you can’t undo this action and you will lose any future Create React App updates.
最终脚本是npm eject 。 该脚本将您的依赖项和配置文件复制到您的项目中，使您可以完全控制代码，但可以从Create React App集成工具链中弹出项目。 您现在将不会运行此脚本，因为一旦运行此脚本，您将无法撤消该操作，并且以后将丢失任何Create React App更新。
The value in Create React App is that you don’t have to worry about a significant amount of configuration. Building modern JavaScript applications requires a lot of tooling from build systems, such as Webpack, to compilation tools, such as Babel. Create React App handles all the configuration for you, so ejecting means dealing with this complexity yourself.
Create React App中的价值在于您不必担心大量的配置。 构建现代JavaScript应用程序需要大量工具，从构建系统(例如Webpack )到编译工具(例如Babel) 。 Create React App将为您处理所有配置，因此弹出意味着您自己要处理这种复杂性。
The downside of Create React App is that you won’t be able to fully customize the project. For most projects that’s not a problem, but if you ever want to take control of all aspects of the build process, you’ll need to eject the code. However, as mentioned before, once you eject the code you will not be able to update to new versions of Create React App, and you’ll have to manually add any enhancements on your own.
Create React App的缺点是您将无法完全自定义项目。 对于大多数项目而言，这不是问题，但是，如果您想控制构建过程的各个方面，则需要弹出代码。 但是，如前所述，一旦退出代码，您将无法更新到Create React App的新版本，并且您必须自己手动添加任何增强功能。
At this point, you’ve executed scripts to build and test your code. In the next step, you’ll start the project on a live server.
至此，您已经执行了脚本来构建和测试代码。 在下一步中，您将在实时服务器上启动项目。
步骤3 —启动服务器 (Step 3 — Starting the Server)
In this step, you will initialize a local server and run the project in your browser.
在此步骤中，您将初始化本地服务器并在浏览器中运行项目。
You start your project with another npm script. Like npm test, this script does not need the run command. When you run the script you will start a local server, execute the project code, start a watcher that listens for code changes, and open the project in a web browser.
您使用另一个npm脚本启动项目。 像npm test一样，此脚本不需要run命令。 运行脚本时，将启动本地服务器，执行项目代码，启动用于侦听代码更改的观察程序，并在Web浏览器中打开项目。
Start the project by typing the following command in the root of your project. For this tutorial, the root of your project is the digital-ocean-tutorial directory. Be sure to open this in a separate terminal or tab, because this script will continue running as long as you allow it:
通过在项目的根目录中键入以下命令来启动项目。 对于本教程，项目的根目录是digital-ocean-tutorial目录。 确保在单独的终端或选项卡中打开它，因为只要您允许，此脚本将继续运行：
- npm start npm开始
You’ll see some placeholder text for a brief moment before the server starts up, giving this output:
在服务器启动之前，您会短暂地看到一些占位符文本，给出以下输出：
Output
Compiled successfully!
You can now view digital-ocean-tutorial in the browser.
http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
If you are running the script locally, it will open the project in your browser window and shift the focus from the terminal to the browser.
如果您在本地运行脚本，它将在浏览器窗口中打开项目，并将焦点从终端移到浏览器。
If that doesn’t happen, you can visit http://localhost:3000/ to see the site in action. If you already happen to have another server running on port 3000, that’s fine. Create React App will detect the next available port and run the server with that. In other words, if you already have one project running on port 3000, this new project will start on port 3001.
如果没有发生，您可以访问http://localhost:3000/来查看正在运行的站点。 如果您已经碰巧在端口3000上运行了另一台服务器，那就很好。 Create React App将检测下一个可用端口并使用该端口运行服务器。 换句话说，如果您已经在端口3000上运行了一个项目，那么这个新项目将在端口3001上启动。
If you are running this from a remote server you can still see your site without any additional configuration. The address will be http://your_server_ip:3000. If you have a firewall configured, you’ll need to open up the port on your remote server.
如果从远程服务器运行此程序，则无需进行任何其他配置，仍然可以看到您的站点。 该地址将为http:// your_server_ip :3000 。 如果已配置防火墙，则需要打开远程服务器上的端口 。
In the browser, you will see the following React template project:
在浏览器中，您将看到以下React模板项目：
As long as the script is running, you will have an active local server. To stop the script, either close the terminal window or tab or type CTRL+C or ⌘-+c in the terminal window or tab that is running your script.
只要脚本正在运行，您就会拥有一个活动的本地服务器。 要停止脚本，请关闭终端窗口或选项卡，或者在运行脚本的终端窗口或选项卡中键入CTRL+C或⌘-+c 。
At this point, you have started the server and are running your first React code. But before you make any changes to the React JavaScript code, you will see how React renders to the page in the first place.
至此，您已经启动了服务器并正在运行您的第一个React代码。 但是在对React JavaScript代码进行任何更改之前，您将首先了解React如何渲染到页面。
第4步-修改主页 (Step 4 — Modifying the Homepage)
In this step, you will modify code in the public/ directory. The public directory contains your base HTML page. This is the page that will serve as the root to your project. You will rarely edit this directory in the future, but it is the base from which the project starts and a crucial part of a React project.
在此步骤中，您将修改public/目录中的代码。 public目录包含您的基本HTML页面。 这是将作为项目根目录的页面。 以后您很少会编辑此目录，但是它是项目启动的基础，也是React项目的关键部分。
If you cancelled your server, go ahead and restart it with npm start, then open public/ in your favorite text editor in a new terminal window:
如果您取消了服务器，请继续并使用npm start重启它，然后在新的终端窗口中用您喜欢的文本编辑器打开public/ ：
- nano public/ 纳米公共/
Alternatively, you can list the files with the ls command:
或者，您可以使用ls命令列出文件：
- ls public/ 公众号/
You will see a list of files such as this:
您将看到如下文件列表：
Output
favicon.ico
logo192.png
manifest.json
index.html
logo512.png
robots.txt
favicon.ico, logo192.png, and logo512.png are icons that a user would see either in the tab of their browser or on their phone. The browser will select the proper-sized icons. Eventually, you’ll want to replace these with icons that are more suited to your project. For now, you can leave them alone.
favicon.ico ， logo192.png和logo512.png是用户在浏览器选项卡或手机上看到的图标。 浏览器将选择适当大小的图标。 最终，您将要用更适合您的项目的图标替换这些图标。 现在，您可以不理会他们。
The manifest.json is a structured set of metadata that describes your project. Among other things, it lists which icon will be used for different size options.
manifest.json是描述项目的结构化元数据集。 除其他外，它列出了将用于不同大小选项的图标。
The robots.txt file is information for web crawlers. It tells crawlers which pages they are or are not allowed to index. You will not need to change either file unless there is a compelling reason to do so. For instance, if you wanted to give some users a URL to special content that you do not want easily accessible, you can add it to robots.txt and it will still be publicly available, but not indexed by search engines.
robots.txt文件是网络爬网程序的信息。 它告诉搜寻器它们被允许或不允许被索引的页面。 除非有充分的理由，否则您无需更改任何一个文件。 例如，如果您想为某些用户提供不希望访问的特殊内容的URL，则可以将其添加到robots.txt ，并且仍然可以公开使用，但不会被搜索引擎索引。
The index.html file is the root of your application. This is the file the server reads, and it is the file that your browser will display. Open it up in your text editor and take a look.
index.html文件是您的应用程序的根目录。 这是服务器读取的文件，也是浏览器将显示的文件。 在文本编辑器中将其打开并进行查看。
If you are working from the command line, you can open it with the following command:
如果您是从命令行工作的，则可以使用以下命令将其打开：
- nano public/index.html 纳米public / index.html
Here’s what you will see:
这是您将看到的内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>The file is pretty short. There are no images or words in the <body>. That’s because React builds the entire HTML structure itself and injects it with JavaScript. But React needs to know where to inject the code, and that’s the role of index.html.
该文件很短。 <body>中没有图像或单词。 这是因为React会自己构建整个HTML结构并将其注入JavaScript。 但是React需要知道将代码注入哪里，这就是index.html的作用。
In your text editor, change the <title> tag from React App to Sandbox:
在文本编辑器中，将<title>标记从React App更改为Sandbox ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
...
<title>Sandbox</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>Save and exit your text editor. Check your browser. The title is the name located on the browser tab. It will update automatically. If not, refresh the page and notice the change.
保存并退出您的文本编辑器。 检查您的浏览器。 标题是位于浏览器选项卡上的名称。 它将自动更新。 如果不是，请刷新页面并注意更改。
Now go back to your text editor. Every React project starts from a root element. There can be multiple root elements on a page, but there needs to be at least one. This is how React knows where to put the generated HTML code. Find the element <div id="root">. This is the div that React will use for all future updates. Change the id from root to base:
现在回到您的文本编辑器。 每个React项目都从一个根元素开始。 一个页面上可以有多个根元素，但至少要有一个。 这就是React知道将生成HTML代码放在何处的方式。 找到元素<div id="root"> 。 这是React将用于以后所有更新的div 。 将id从root更改为base ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="base"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>Save the changes.
保存更改。
You will see an error in your browser:
您将在浏览器中看到一个错误：
React was looking for an element with an id of root. Now that it is gone, React can’t start the project.
React正在寻找一个id为root的元素。 现在它已经不复存在，React无法启动项目。
Change the name back from base to root:
将名称从base更改回root ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>Save and exit index.html.
保存并退出index.html 。
At this point, you’ve started the server and made a small change to the root HTML page. You haven’t yet changed any JavaScript code. In the next section, you will update the React JavaScript code.
至此，您已经启动了服务器，并对根HTML页面进行了少量更改。 您尚未更改任何JavaScript代码。 在下一部分中，您将更新React JavaScript代码。
步骤5 —修改标题标签和样式 (Step 5 — Modifying the Heading Tag and Styling)
In this step, you will make your first change to a React component in the src/ directory. You’ll make a small change to the CSS and the JavaScript code that will automatically update in your browser using the built-in hot reloading.
在这一步中，您将对src/目录中的React组件进行第一次更改。 您将对CSS和JavaScript代码进行少量更改，这些代码将使用内置的热重载在浏览器中自动更新。
If you stopped the server, be sure to restart it with npm start. Now, take some time to see the parts of the src/ directory. You can either open the full directory in your favorite text editor, or you can list out the project in a terminal with the following command:
如果停止了服务器，请确保使用npm start重启它。 现在，花一些时间来查看src/目录的各个部分。 您可以在自己喜欢的文本编辑器中打开完整目录，也可以使用以下命令在终端中列出项目：
- ls src/ ls src /
You will see the following files in your terminal or text editor.
您将在终端或文本编辑器中看到以下文件。
Output
App.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
setupTests.js
Let’s go through these files one at a time.
让我们一次浏览这些文件。
You will not spend much time with the serviceWorker.js file at first, but it can be important as you start to make progressive web applications. The service worker can do many things including push notifications and offline caching, but for now it’s best to leave it alone.
首先，您不会花很多时间在serviceWorker.js文件上，但是在开始制作渐进式Web应用程序时 ，这一点很重要。 服务人员可以做很多事情，包括推式通知和脱机缓存，但是现在最好不要管它。
The next files to look at are setupTests.js and App.test.js. These are used for test files. In fact, when you ran npm test in Step 2, the script ran these files. The setupTests.js file is short; all it includes is a few custom expect methods. You’ll learn more about these in future tutorials in this series.
接下来要查看的文件是setupTests.js和App.test.js 这些用于测试文件。 实际上，当您在步骤2中运行npm test时，脚本将运行这些文件。 setupTests.js文件很短； 它包括的只是一些自定义的expect方法。 您将在本系列的后续教程中进一步了解这些内容。
Open App.test.js:
打开App.test.js ：
- nano src/App.test.js 纳米src / App.test.js
When you open it, you’ll see a basic test:
当您打开它时，您将看到一个基本测试：
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});The test is looking for the phrase learn react to be in the document. If you go back to the browser running your project, you’ll see the phrase on the page. React testing is different from most unit tests. Since components can include visual information, such as markup, along with logic for manipulating data, traditional unit tests do not work as easily. React testing is closer to a form of functional or integration testing.
测试正在寻找短语“ learn react在文档中。 如果返回运行项目的浏览器，则会在页面上看到该短语。 React测试不同于大多数单元测试 。 由于组件可以包含视觉信息(例如标记)以及用于处理数据的逻辑，因此传统的单元测试不太容易工作。 React测试更接近功能测试或集成测试的形式。
Next, you’ll see some styling files: App.css, index.css, and logo.svg. There are multiple ways of working with styling in React, but the easiest is to write plain CSS since that requires no additional configuration.
接下来，您将看到一些样式文件： App.css ， index.css和logo.svg 。 在React中有多种使用样式的方法，但是最简单的方法是编写普通CSS，因为这不需要任何额外的配置。
There are multiple CSS files because you can import the styles into a component just like they were another JavaScript file. Since you have the power to import CSS directly into a component, you might as well split the CSS to only apply to an individual component. What you are doing is separating concerns. You are not keeping all the CSS separate from the JavaScript. Instead you are keeping all the related CSS, JavaScript, markup, and images grouped together.
有多个CSS文件，因为您可以将样式导入到组件中，就像它们是另一个JavaScript文件一样。 由于您可以直接将CSS导入组件，因此最好将CSS拆分为仅应用于单个组件。 您正在做的是分离关注点。 您没有将所有CSS与JavaScript分开。 相反，您将所有相关CSS，JavaScript，标记和图像分组在一起。
Open App.css in your text editor. If you are working from the command line, you can open it with the following command:
在文本编辑器中打开App.css 。 如果从命令行工作，则可以使用以下命令将其打开：
- nano src/App.css 纳米src / App.css
This is the code you’ll see:
这是您将看到的代码：
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}This is a standard CSS file with no special CSS preprocessors. You can add them later if you want, but at first, you only have plain CSS. Create React App tries to be unopinionated while still giving an out-of-the-box environment.
这是一个标准CSS文件，没有特殊CSS预处理程序。 如果需要，可以稍后添加它们，但是起初，您只有纯CSS。 创建React App尝试不受限制，同时仍提供开箱即用的环境。
Back to App.css, one of the benefits of using Create React App is that it watches all files, so if you make a change, you’ll see it in your browser without reloading.
回到App.css ，使用Create React App的好处之一是它App.css所有文件，因此，如果进行更改，您将在浏览器中看到它而无需重新加载。
To see this in action make a small change to the background-color in App.css. Change it from #282c34 to blue then save the file. The final style will look like this:
要查看实际效果，请对App.css的background-color进行少量更改。 将其从#282c34更改为blue然后保存文件。 最终样式将如下所示：
.App {
text-align: center;
}
...
.App-header {
background-color: blue
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
...
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}Check out your browser. Here’s how it looked before:
查看您的浏览器。 这是之前的样子：
Here’s how it will look after the change:
更改后的外观如下：
Go ahead and change background-color back to #282c34.
继续，将background-color更改回#282c34 。
.App {
text-align: center;
...
.App-header {
background-color: #282c34
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
...
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}Save and exit the file.
保存并退出文件。
You’ve made a small CSS change. Now it’s time to make changes to the React JavaScript code. Start by opening index.js.
您做了一个小CSS更改。 现在是时候更改React JavaScript代码了。 首先打开index.js 。
- nano src/index.js 纳米src / index.js
Here’s what you’ll see:
这是您将看到的：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();At the top, you are importing React, ReactDOM, index.css, App, and serviceWorker. By importing React, you are actually pulling in code to convert JSX to JavaScript. JSX are the HTML-like elements. For example, notice how when you use App, you treat it like an HTML element <App />. You’ll explore this more in future tutorials in this series.
在顶部，要导入React ， ReactDOM ， index.css ， App和serviceWorker 。 通过导入React ，您实际上是在获取将JSX转换为JavaScript的代码。 JSX是类似HTML的元素。 例如，注意使用App ，如何将其视为HTML元素<App /> 。 您将在本系列的后续教程中对此进行更多探讨。
ReactDOM is the code that connects your React code to the base elements, like the index.html page you saw in public/. Look at the following highlighted line:
ReactDOM是将您的React代码连接到基本元素的代码，例如您在public/看到的index.html页面。 查看以下突出显示的行：
...
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
...
serviceWorker.unregister();This code instructs React to find an element with an id of root and inject the React code there. <App/> is your root element, and everything will branch from there. This is the beginning point for all future React code.
这段代码指示React找到一个id为root的元素，并将React代码注入那里。 <App/>是您的根元素，所有内容都将从那里分支。 这是将来所有React代码的起点。
At the top of the file, you’ll see a few imports. You import index.css, but don’t actually do anything with it. By importing it, you are telling Webpack via the React scripts to include that CSS code in the final compiled bundle. If you don’t import it, it won’t show up.
在文件顶部，您将看到一些导入。 您导入index.css ，但实际上不对其执行任何操作。 通过导入它，您通过React脚本告诉Webpack将CSS代码包含在最终的编译包中。 如果不导入，它将不会显示。
Exit from src/index.js.
从src/index.js退出。
At this point, you still haven’t seen anything that you are viewing in your browser. To see this, open up App.js:
此时，您仍未在浏览器中看到任何内容。 要看到这一点，请打开App.js ：
- nano src/App.js 纳米src / App.js
The code in this file will look like a series of regular HTML elements. Here’s what you’ll see:
该文件中的代码看起来像一系列常规HTML元素。 这是您将看到的：
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;Change the contents of the <p> tag from Edit <code>src/App.js</code> and save to reload. to Hello, world and save your changes.
从Edit <code>src/App.js</code> and save to reload.更改<p>标记的内容， Edit <code>src/App.js</code> and save to reload. 向Hello, world并保存您的更改。
...
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Hello, world
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
...Head over to your browser and you’ll see the change:
转到浏览器，您将看到更改：
You’ve now made your first update to a React component.
现在，您已经对React组件进行了第一次更新。
Before you go, notice a few more things. In this component, you import the logo.svg file and assign it to a variable. Then in the <img> element, you add that code as the src.
开始之前，请注意一些其他事项。 在此组件中，导入logo.svg文件并将其分配给变量。 然后在<img>元素中，将该代码添加为src 。
There are a few things going on here. Look at the img element:
这里发生了一些事情。 看一下img元素：
...
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Hello, world
</p>
...Notice how you pass the logo into curly braces. Anytime you are passing attributes that are not strings or numbers, you need to use the curly braces. React will treat those as JavaScript instead of strings. In this case, you are not actually importing the image; instead you are referencing the image. When Webpack builds the project it will handle the image and set the source to the appropriate place.
注意如何将logo传递到花括号中。 每当传递非字符串或数字的属性时，都需要使用花括号。 React会将它们视为JavaScript而不是字符串。 在这种情况下，您实际上并没有导入图像。 相反，您正在引用图像。 Webpack构建项目时，它将处理图像并将源设置在适当的位置。
Exit the text editor.
退出文本编辑器。
If you look at the DOM elements in your browser, you’ll see it adds a path. If you are using Chrome, you can inspect the element by right-clicking the element and selecting Inspect.
如果在浏览器中查看DOM元素，则会看到它添加了路径。 如果您使用的是Chrome ，则可以通过右键单击元素并选择检查来检查元素。
Here’s how it would look in the browser:
在浏览器中的外观如下：
The DOM has this line:
DOM具有以下行：
<img src="/static/media/logo.5d5d9eef.svg" class="App-logo" alt="logo">Your code will be slightly different since the logo will have a different name. Webpack wants to make sure the image path is unique. So even if you import images with the same name, they will be saved with different paths.
您的代码将略有不同，因为徽标将使用不同的名称。 Webpack希望确保图像路径是唯一的。 因此，即使您导入具有相同名称的图像，它们也会以不同的路径保存。
At this point, you’ve made a small change to the React JavaScript code. In the next step, you’ll use the build command to minify the code into a small file that can be deployed to a server.
至此，您已经对React JavaScript代码进行了少量更改。 在下一步中，您将使用build命令将代码缩减为一个可以部署到服务器的小文件。
步骤6 –建立专案 (Step 6 — Building the Project)
In this step, you will build the code into a bundle that can be deployed to external servers.
在此步骤中，您将把代码构建到一个可部署到外部服务器的捆绑软件中。
Head back to your terminal and build the project. You ran this command before, but as a reminder, this command will execute the build script. It will create a new directory with the combined and minified files. To execute the build, run the following command from the root of your project:
回到您的终端并构建项目。 您之前运行过此命令，但提醒一下，此命令将执行build脚本。 它将使用合并和缩小的文件创建一个新目录。 要执行构建，请从项目的根目录运行以下命令：
- npm run build npm运行构建
There will be a delay as the code compiles and when it’s finished, you’ll have a new directory called build/.
代码编译会有所延迟，完成后，您将拥有一个名为build/的新目录。
Open up build/index.html in a text editor.
在文本编辑器中打开build/index.html 。
- nano build/index.html 纳米build / index.html
You will see something like this:
您将看到如下内容：
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><link href="/static/css/main.d1b05096.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,p=r[0],l=r[1],c=r[2],i=0,s=[];i<p.length;i++)a=p[i],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this["webpackJsonpdo-create-react-app"]=this["webpackJsonpdo-create-react-app"]||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var c=0;c<p.length;c++)r(p[c]);var f=l;t()}([])</script><script src="/static/js/2.c0be6967.chunk.js"></script><script src="/static/js/main.bac2dbd2.chunk.js"></script></body></html>The build directory takes all of your code and compiles and minifies it into the smallest usable state. It doesn’t matter if a human can read it, since this is not a public-facing piece of code. Minifying like this will make the code take up less space while still allowing it to work. Unlike some languages like Python, the whitespace doesn’t change how the computer interprets the code.
构建目录将使用所有代码并进行编译，并将其最小化为最小可用状态。 人类是否可以阅读它并不重要，因为这不是面向公众的代码。 这样的最小化将使代码占用更少的空间，同时仍然允许其工作。 与某些语言(例如Python)不同，空白不会改变计算机解释代码的方式。
结论 (Conclusion)
In this tutorial, you have created your first React application, configuring your project using JavaScript build tools without needing to go into the technical details. That’s the value in Create React App: you don’t need to know everything to get started. It allows you to ignore the complicated build steps so you can focus exclusively on the React code.
在本教程中，您已经创建了第一个React应用程序，使用JavaScript构建工具来配置项目，而无需深入技术细节。 这就是Create React App的价值：您无需了解所有入门知识。 它允许您忽略复杂的构建步骤，因此您可以专注于React代码。
You’ve learned the commands to start, test, and build a project. You’ll use these commands regularly, so take note for future tutorials. Most importantly, you updated your first React component.
您已经了解了启动，测试和构建项目的命令。 您将定期使用这些命令，因此请注意以后的教程。 最重要的是，您更新了第一个React组件。
If you would like to see React in action, try our How To Display Data from the DigitalOcean API with React tutorial.
如果您想看到React的实际效果，请尝试我们的“ 如何使用带有React的DigitalOcean API显示数据”教程。
翻译自: https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-create-react-app
扫一扫
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
