初始化创建单页React应用程序的方法

首先安装 Node >= 6 版本的 node.js

要创建新应用，您可以选择以下方法之一：

• npx (npx附带npm 5.2及更高版本，请参阅旧版npm版本的说明)
  npx create-react-app my-app
• npm (npm init <initializer> 在npm 6+ 版本以上)
  npm init react-app my-app
• yarn (yarn create 在 Yarn 0.25+ 版本以上)
  yarn create react-app my-app

创建成功

运行任何这些命令都会在当前文件夹中创建一个名为my-app的目录。在该目录中，它将生成初始项目结构并安装传递依赖项：

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

安装完成后，您可以进入项目文件夹
cd my-app

启动项目

npm start 或 yarn start

$ npm start

> my-app@0.1.0 start D:\my-app
> react-scripts start

Starting the development server...

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.10.100:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

在开发模式下运行应用程序会自打开 http://localhost:3000 以在浏览器中查看它。
如果您更改代码，页面将自动重新加载。您将在控制台中看到构建错误和lint警告。

测试

npm test 或 yarn test
以交互模式运行测试观察程序。默认情况下，运行与上次提交后更改的文件相关的测试。
更多测试方法

打包部署

npm run build 或 yarn build

$ npm run build

> my-app@0.1.0 build D:\my-app
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  34.45 KB  build\static\js\1.2dd891c4.chunk.js
  763 B     build\static\js\runtime~main.229c360f.js
  711 B     build\static\js\main.8a0e707c.chunk.js
  510 B     build\static\css\main.07ef7b3f.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:

  http://bit.ly/CRA-deploy

将生产应用程序构建到 build 文件夹。
它正确地将React捆绑在生产模式中并优化构建以获得最佳性能。
构建被缩小，文件名包含哈希，应用已准备好部署。