react项目启动详解（转载）

人生累了就换一条路走 發表於 2019-11-22 15:21:00

转载：https://blog.csdn.net/github_squad/article/details/57452333。
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word">前言:
<blockquote style="box-sizing: border-box; outline: 0; margin: 0 0 0 40px; padding: 0; border-style: none; background-image: initial; background-color: rgba(255, 255, 255, 1); overflow: auto; overflow-wrap: break-word; word-break: normal; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun">
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(79, 79, 79, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word">create-react-app 是一个全局的命令行工具用来创建一个新的项目
react-scripts 是一个生成的项目所需要的开发依赖</blockquote>
<span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">  <br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">      一般我们开始创建react web应用程序的时候,要自己通过 npm 或者 yarn 安装项目的全部依赖，再写webpack.config.js,一系列复杂的配置,搭建好开发环境后写src源代码。<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">现在如果你正在搭建react运行环境，使用 create-react-app 去自动构建你的app程序。你的项目所在的文件夹下是没有配置文件。react-scripts 是唯一的额外的构建依赖在你的package.json中，你的运行环境将有每一个你需要用来构建一个现代React app应用程序。你需要的依赖，和在配置文件中编写的配置代码，react-scripts 都帮你写了，比如：react-scripts帮你自动下载需要的 webpack-dev-server 依赖，然后react-scripts自己写了一个nodejs服务端的脚本代码 start.js来实例化 WebpackDevServer ，并且运行启动了一个使用 express 的Http服务器，现在你只需要专心写src源代码就可以了。省去了很多精力，最适合快速上手一个demo了。<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">react-scripts有以下支持，都帮你配置好了：<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">React, JSX, ES6, and Flow syntax support.<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">Language extras beyond ES6 like the object spread operator.<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">Import CSS and image files directly from JavaScript.<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">Autoprefixed CSS, so you don’t need -webkit or other prefixes.<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">A build script to bundle JS, CSS, and images for production, with sourcemaps.<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">A dev server that lints for common errors.<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px">
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word">Getting Started
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word">安装
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word"><span style="color: rgba(0, 0, 0, 1); font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; white-space: pre; background-color: rgba(243, 244, 245, 1)">npm <span class="hljs-keyword" style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; color: rgba(166, 38, 164, 1); overflow-wrap: break-word; font-size: 14px; white-space: pre">install<span style="color: rgba(0, 0, 0, 1); font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; white-space: pre; background-color: rgba(243, 244, 245, 1)"> -g <span class="hljs-keyword" style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; color: rgba(166, 38, 164, 1); overflow-wrap: break-word; font-size: 14px; white-space: pre">create<span style="color: rgba(0, 0, 0, 1); font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; white-space: pre; background-color: rgba(243, 244, 245, 1)">-react-app
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word"> 
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word"><span style="color: rgba(51, 51, 51, 1); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; font-size: 14px">创建一个应用程序 
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word"><span style="color: rgba(0, 0, 0, 1); font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; white-space: pre; background-color: rgba(243, 244, 245, 1)">create-react-app <span class="hljs-keyword" style="font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; white-space: pre; box-sizing: border-box; outline: 0; margin: 0; padding: 0; color: rgba(166, 38, 164, 1); overflow-wrap: break-word">my<span style="color: rgba(0, 0, 0, 1); font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; white-space: pre; background-color: rgba(243, 244, 245, 1)">-app<br style="color: rgba(0, 0, 0, 1); font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; white-space: pre"><span style="color: rgba(0, 0, 0, 1); font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; white-space: pre; background-color: rgba(243, 244, 245, 1)">cd <span class="hljs-keyword" style="font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; white-space: pre; box-sizing: border-box; outline: 0; margin: 0; padding: 0; color: rgba(166, 38, 164, 1); overflow-wrap: break-word">my<span style="color: rgba(0, 0, 0, 1); font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; white-space: pre; background-color: rgba(243, 244, 245, 1)">-app
<span style="font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif">生成的目录结构
my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
没有配置文件（webpack.config.js）
 
 
运行应用程序
 
npm run start 
or 
yarn start
在浏览器中打开
http://localhost:3000 
现在我们看 my-app文件夹下的public/index.html 和src/index.js的源码，我们可以在这里编写项目代码，但是注意 public/index.html 是启动http服务器的首页，src/index.js是编译的入口文件，只能叫index这个名字，改别的名字不行。
 
打开 http://localhost:3000/index.html 首页，f12查看网页源码，你会看到 
<script type="text/javascript" src="/static/js/bundle.js"></script>
/static/js/bundle.js
在你的项目my-app你是看不到这个文件路径的，你也没有写配置文件webpack.config.js,
http服务器配置,自动代开浏览器窗口，react，es6语法编译，babel-core，webpack，等等这些你都没下载，配置。
这些活，react-scripts 都帮你做了。
 
 
 
 
刚才的过程分析
回顾 
npm run start
我们一开始这么启动服务运行项目
打开你的my-app\package.json
 
"scripts": {
    "start": "react-scripts start",
      ...
  }
所以执行的是 react-scripts start 
打开你的my-app\node_modules\react-scripts这个文件夹下的bin文件夹下的react-scripts.js文件
#!/usr/bin/env node
var spawn = require('cross-spawn');
var script = process.argv;
var args = process.argv.slice(3);
 
switch (script) {
case 'build':
case 'eject':
case 'start':
case 'test':
  var result = spawn.sync(
    'node',
    .concat(args),
  .......
上面代码中  script 的变量值是 start
所以执行 my-app\node_modules\react-scripts\scripts 文件夹下的  start.js 文件代码节选重点如下
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');  // 启动http服务器
var paths = require('../config/paths');  //要编译的文件路径与生成路径等
var config = require('../config/webpack.config.dev');
var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; //这就是为什么端口号不是8080 而是 3000 的原因，在这里可以改成8080，重新npm run start 生效 
detect(DEFAULT_PORT).then(port => {
  if (port === DEFAULT_PORT) {
    run(port); //这里开始运行
    return;
  }
......
 
function run(port) { 
// 这里可以设置 http协议, 或者可以在 npm run start 之前 cmd命令窗口中执行 set HTTPS=true&&npm start 改成https 安全协议
  var protocol = process.env.HTTPS === 'true' ? "https" : "http"; 
  var host = process.env.HOST || 'localhost';   
  setupCompiler(host, port, protocol);  // 编译源码，生成路径
  runDevServer(host, port, protocol);  //启动 http服务器
}
 
 
//配置http服务器
function runDevServer(host, port, protocol) {
  var devServer = new WebpackDevServer(compiler, {
   compress: true,   
    clientLogLevel: 'none',
    contentBase: paths.appPublic,   //根据导入的paths 指定应用根目录（即index.html所在目录）
    hot: true,
 
    publicPath: config.output.publicPath, //根据导入的 config 变量,指定虚拟目录，自动指向path编译目录（/assets/ => /build/js/）。html中引用js文件时，
                                             //必须引用此虚拟路径（但实际上引用的是内存中的文件，既不是/build/js/也不是/assets/）。
 
    quiet: true,
 
 
    watchOptions: {
      ignored: /node_modules/
    },
    // Enable HTTPS if the HTTPS environment variable is set to 'true'
    https: protocol === "https",
    host: host
  });
  /**
   * 省略其他代码
   */
    openBrowser(protocol + '://' + host + ':' + port + '/');    // 打开浏览器向服务器发送请求
  });
}
 
 
function setupCompiler(host, port, protocol) {
 
  compiler = webpack(config, handleCompile);  //  根据导入的 config 变量  指向的 webpack.config.dev 配置文件  运行
     /**
   * 省略其他代码
   */
}
 start.js 文件代码中导入了  my-app\node_modules\react-scripts\config文件夹下的  webpack.config.dev.js 与 paths.js
paths.js  代码节选如下:
var appDirectory = fs.realpathSync(process.cwd());   // 获取npm run start 运行所在的路径
function resolveApp(relativePath) {
  return path.resolve(appDirectory, relativePath);
}
 
module.exports = {
  appPath: resolveApp('.'),
  ownPath: resolveApp('node_modules/react-scripts'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),   //  这就是  一开始  我们的项目要使用public/index.html作为默认首页 
                //  这里写什么文件名，项目中就要使用什么文件名  包括也要有public文件夹
  appIndexJs: resolveApp('src/index.js'),   //编译的入口文件的文件名  项目中要包括src文件夹
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
  // this is empty with npm3 but node resolution searches higher anyway:
  ownNodeModules: resolveOwn('node_modules'),
  nodePaths: nodePaths,
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json'))
};
 /**
   * 省略其他代码
   */
webpack.config.dev.js  代码节选如下:
var paths = require('./paths');  //也导入了同文件夹下的 paths.js
module.exports = {  entry: [    require.resolve('react-dev-utils/webpackHotDevClient'),    require.resolve('./polyfills'),    paths.appIndexJs     // 编译的入口文件  ],  output: {    path: paths.appBuild,    pathinfo: true,       filename: 'static/js/bundle.js', // 只是编译后生成的目标文件，这就是一开始我们打开浏览器按f12看到的index.html导入的           //  <script type="text/javascript" src="/static/js/bundle.js"></script>    publicPath: publicPath  },
 /**
   * 省略其他代码
   */
 
}
 
 
已经搭建好运行环境了，接下来如何开发app
 
导入组件
 
由于babel依赖，这个项目支持es6模块
当你仍然使用require() and module.exports ，我们鼓励你去使用import and export 替代.
 
例如: 
Button.js
 
import React, { Component } from 'react';
 
class Button extends Component {
  render() {
    // ...
  }
}
export default Button; // 不要忘记去使用 export default!
 
DangerButton.js
import React, { Component } from 'react';
import Button from './Button'; //从另一个文件导入一个组件
 
 
class DangerButton extends Component {
  render() {
    return <Button color="red" />;
  }
}
export default DangerButton;
 
增加样式
Button.css
.Button {
  padding: 20px;
}
Button.js
import React, { Component } from 'react';
import './Button.css'; // 告诉webpack Button.js 使用这些样式
 
 
class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}
 
Autoprefixer
react-scripts 通过Autoprefixer 帮你的css文件自动添加浏览器兼容前缀
例如：
 
.App {
  display: flex;
  flex-direction: row;
  align-items: center;
}
变成
.App {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
 
 
 
增加CSS预处理器
 
首先在 my-app/  目录下  安装node-sass用来将scss编译成css
npm install node-sass --save-dev
打开my-app/package.json,增加以下代码到scripts中
   "scripts": {
+    "build-css": "node-sass src/ -o src/",
+    "watch-css": "npm run build-css && node-sass src/ -o src/ --watch",
     "start": "react-scripts start",
     "build": "react-scripts build",
     ......
    }
 
现在你可以重新命名my-app/src/App.css to my-app/src/App.scss and 运行   npm run watch-css
或者你可以改成
"scripts": {
    "build-css": "node-sass src/ -o src/",
    "start": "npm run build-css && react-scripts start",  //先执行 build-css 再执行 react-scripts start
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
直接 npm run start
 
 
增加图片
import React from 'react';
import logo from './logo.png'; // 告诉webpack 这个js文件使用这张图片
 
console.log(logo); // /logo.84287d09.png  会改变图片的名字
 
function Header() {
  //导入结果是这个图片的url地址
  return <img src={logo} alt="Logo" />;
}
 
export default Header;
当项目构建的时候，Webpack将正确的移动图片到构建的文件夹下，提供我们正确的路径
在css工作中的方式也一样
 
.Logo {
  background-image: url(./logo.png);
}
webpack发现所有的相对模块，以 ./  开始
 
增加 bootstrap
在react+es6 moudle+bootstrap
你不是一定要React Bootstrap和React 一起使用，但是他是流行的库去整合 bootstrap 和react应用程序，如果你需要他，你可以通过Create React App整合他，通过以下几个步骤
 
首先安装React Bootstrap and Bootstrap从npm，React Bootstrap 不包括Bootstrap CSS ，所以你需要去安装
在 my-app/  目录下  安装
 
npm install react-bootstrap --save
npm install bootstrap@3 --save
 
 
修改 my-app/src/index.js
在你的src/index.js 文件内容的顶部，导入 Bootstrap CSS 和可选的 Bootstrap theme CSS
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';  // 必须的
import 'bootstrap/dist/css/bootstrap-theme.css';  //  可选的
import App from './App';
import './index.css';
 
ReactDOM.render(
  <App />,
  document.getElementById('root')
);
 
修改 my-app/src/App.js
import React, { Component } from 'react';
import { Grid, Navbar, Jumbotron, Button } from 'react-bootstrap';
 
class App extends Component {
  render() {
    return (
      <div>
        <Navbar inverse fixedTop>
          <Grid>
            <Navbar.Header>
              <Navbar.Brand>
                <a href="/">React App</a>
              </Navbar.Brand>
              <Navbar.Toggle />
            </Navbar.Header>
          </Grid>
        </Navbar>
        <Jumbotron>
          <Grid>
            <h1>Welcome to React</h1>
            
              <Button
                bsStyle="success"
                bsSize="large"
                href="http://react-bootstrap.github.io/components.html"
                target="_blank">
                View React Bootstrap Docs
              </Button>
            
          </Grid>
        </Jumbotron>
      </div>
    );
  }
}
 
export default App;
 
 
最后运行
npm run start
 
 
参考链接 https://github.com/facebookincubator/create-react-app
 
 
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word">前言:
<blockquote style="box-sizing: border-box; outline: 0; margin: 0 0 0 40px; padding: 0; border-style: none; background-image: initial; background-color: rgba(255, 255, 255, 1); overflow: auto; overflow-wrap: break-word; word-break: normal; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun">
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(79, 79, 79, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word">create-react-app 是一个全局的命令行工具用来创建一个新的项目
react-scripts 是一个生成的项目所需要的开发依赖</blockquote>
<span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">  <br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">      一般我们开始创建react web应用程序的时候,要自己通过 npm 或者 yarn 安装项目的全部依赖，再写webpack.config.js,一系列复杂的配置,搭建好开发环境后写src源代码。<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">现在如果你正在搭建react运行环境，使用 create-react-app 去自动构建你的app程序。你的项目所在的文件夹下是没有配置文件。react-scripts 是唯一的额外的构建依赖在你的package.json中，你的运行环境将有每一个你需要用来构建一个现代React app应用程序。你需要的依赖，和在配置文件中编写的配置代码，react-scripts 都帮你写了，比如：react-scripts帮你自动下载需要的 webpack-dev-server 依赖，然后react-scripts自己写了一个nodejs服务端的脚本代码 start.js来实例化 WebpackDevServer ，并且运行启动了一个使用 express 的Http服务器，现在你只需要专心写src源代码就可以了。省去了很多精力，最适合快速上手一个demo了。<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">react-scripts有以下支持，都帮你配置好了：<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">React, JSX, ES6, and Flow syntax support.<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">Language extras beyond ES6 like the object spread operator.<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">Import CSS and image files directly from JavaScript.<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">Autoprefixed CSS, so you don’t need -webkit or other prefixes.<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">A build script to bundle JS, CSS, and images for production, with sourcemaps.<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">A dev server that lints for common errors.<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px">
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word">Getting Started
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word">安装
<div class="dp-highlighter bg_plain" style="box-sizing: border-box; outline: 0; margin: 0 0 24px; padding: 1px 0 0; position: relative; font-family: Consolas, "Courier New", Courier, mono, serif; font-size: 12px; background-color: rgba(231, 229, 220, 1); width: 790.016px; overflow-wrap: break-word; border-color: rgba(204, 204, 204, 1); color: rgba(85, 85, 85, 1)">
<div class="bar" style="box-sizing: border-box; outline: 0; margin: 0; padding: 0 0 0 45px; overflow-wrap: break-word">
<div class="tools" style="box-sizing: border-box; outline: 0; margin: 0; padding: 3px 8px 10px 10px; overflow-wrap: break-word; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: rgba(192, 192, 192, 1); background-color: rgba(248, 248, 248, 1); border-left: 3px solid rgba(108, 226, 108, 1); border-right: 1px solid rgba(231, 229, 220, 1)"> view plain copy
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; position: absolute; left: 514px; top: 836px; width: 16px; height: 16px; z-index: 99"> </div>
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; width: 16px; height: 16px"> </div>
</div>
</div>
<ol style="box-sizing: border-box; outline: 0; margin-top: 0; margin-right: 0; margin-bottom: 24px; padding: 0; list-style-position: initial; list-style-image: initial; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; border-top: none; border-right: 1px solid rgba(231, 229, 220, 1); border-bottom: none; border-left: none; background-color: rgba(255, 255, 255, 1); color: rgba(92, 92, 92, 1); font-size: 16px; overflow-wrap: break-word" start="1">
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">npm install -g create-react-app  </li>
</ol></div>
<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">创建一个应用程序 
<div class="dp-highlighter bg_plain" style="box-sizing: border-box; outline: 0; margin: 0 0 24px; padding: 1px 0 0; position: relative; font-family: Consolas, "Courier New", Courier, mono, serif; font-size: 12px; background-color: rgba(231, 229, 220, 1); width: 790.016px; overflow-wrap: break-word; border-color: rgba(204, 204, 204, 1); color: rgba(85, 85, 85, 1)">
<div class="bar" style="box-sizing: border-box; outline: 0; margin: 0; padding: 0 0 0 45px; overflow-wrap: break-word">
<div class="tools" style="box-sizing: border-box; outline: 0; margin: 0; padding: 3px 8px 10px 10px; overflow-wrap: break-word; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: rgba(192, 192, 192, 1); background-color: rgba(248, 248, 248, 1); border-left: 3px solid rgba(108, 226, 108, 1); border-right: 1px solid rgba(231, 229, 220, 1)"> view plain copy
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; position: absolute; left: 514px; top: 983px; width: 16px; height: 16px; z-index: 99"> </div>
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; width: 16px; height: 16px"> </div>
</div>
</div>
<ol style="box-sizing: border-box; outline: 0; margin-top: 0; margin-right: 0; margin-bottom: 24px; padding: 0; list-style-position: initial; list-style-image: initial; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; border-top: none; border-right: 1px solid rgba(231, 229, 220, 1); border-bottom: none; border-left: none; background-color: rgba(255, 255, 255, 1); color: rgba(92, 92, 92, 1); font-size: 16px; overflow-wrap: break-word" start="1">
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">create-react-app my-app  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">cd my-app  </li>
</ol></div>
<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">生成的目录结构
<div class="dp-highlighter bg_plain" style="box-sizing: border-box; outline: 0; margin: 0 0 24px; padding: 1px 0 0; position: relative; font-family: Consolas, "Courier New", Courier, mono, serif; font-size: 12px; background-color: rgba(231, 229, 220, 1); width: 790.016px; overflow-wrap: break-word; border-color: rgba(204, 204, 204, 1); color: rgba(85, 85, 85, 1)">
<div class="bar" style="box-sizing: border-box; outline: 0; margin: 0; padding: 0 0 0 45px; overflow-wrap: break-word">
<div class="tools" style="box-sizing: border-box; outline: 0; margin: 0; padding: 3px 8px 10px 10px; overflow-wrap: break-word; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: rgba(192, 192, 192, 1); background-color: rgba(248, 248, 248, 1); border-left: 3px solid rgba(108, 226, 108, 1); border-right: 1px solid rgba(231, 229, 220, 1)"> view plain copy
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; position: absolute; left: 514px; top: 1148px; width: 16px; height: 16px; z-index: 99"> </div>
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; width: 16px; height: 16px"> </div>
</div>
</div>
<ol style="box-sizing: border-box; outline: 0; margin-top: 0; margin-right: 0; margin-bottom: 24px; padding: 0; list-style-position: initial; list-style-image: initial; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; border-top: none; border-right: 1px solid rgba(231, 229, 220, 1); border-bottom: none; border-left: none; background-color: rgba(255, 255, 255, 1); color: rgba(92, 92, 92, 1); font-size: 16px; overflow-wrap: break-word" start="1">
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">my-app/  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">  README.md  </li>
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">  node_modules/  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">  package.json  </li>
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">  .gitignore  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">  public/  </li>
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">    favicon.ico  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">    index.html  </li>
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">  src/  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">    App.css  </li>
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">    App.js  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">    App.test.js  </li>
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">    index.css  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">    index.js  </li>
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">    logo.svg  </li>
</ol></div>
<span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">没有配置文件（webpack.config.js）
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word"> 
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word">运行应用程序
<div class="dp-highlighter bg_plain" style="box-sizing: border-box; outline: 0; margin: 0 0 24px; padding: 1px 0 0; position: relative; font-family: Consolas, "Courier New", Courier, mono, serif; font-size: 12px; background-color: rgba(231, 229, 220, 1); width: 790.016px; overflow-wrap: break-word; border-color: rgba(204, 204, 204, 1); color: rgba(85, 85, 85, 1)">
<div class="bar" style="box-sizing: border-box; outline: 0; margin: 0; padding: 0 0 0 45px; overflow-wrap: break-word">
<div class="tools" style="box-sizing: border-box; outline: 0; margin: 0; padding: 3px 8px 10px 10px; overflow-wrap: break-word; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: rgba(192, 192, 192, 1); background-color: rgba(248, 248, 248, 1); border-left: 3px solid rgba(108, 226, 108, 1); border-right: 1px solid rgba(231, 229, 220, 1)"> view plain copy
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; position: absolute; left: 514px; top: 1593px; width: 16px; height: 16px; z-index: 99"> </div>
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; width: 16px; height: 16px"> </div>
</div>
</div>
<ol style="box-sizing: border-box; outline: 0; margin-top: 0; margin-right: 0; margin-bottom: 24px; padding: 0; list-style-position: initial; list-style-image: initial; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; border-top: none; border-right: 1px solid rgba(231, 229, 220, 1); border-bottom: none; border-left: none; background-color: rgba(255, 255, 255, 1); color: rgba(92, 92, 92, 1); font-size: 16px; overflow-wrap: break-word" start="1">
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">npm run start   </li>
</ol></div>
<span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">or 
<div class="dp-highlighter bg_plain" style="box-sizing: border-box; outline: 0; margin: 0 0 24px; padding: 1px 0 0; position: relative; font-family: Consolas, "Courier New", Courier, mono, serif; font-size: 12px; background-color: rgba(231, 229, 220, 1); width: 790.016px; overflow-wrap: break-word; border-color: rgba(204, 204, 204, 1); color: rgba(85, 85, 85, 1)">
<div class="bar" style="box-sizing: border-box; outline: 0; margin: 0; padding: 0 0 0 45px; overflow-wrap: break-word">
<div class="tools" style="box-sizing: border-box; outline: 0; margin: 0; padding: 3px 8px 10px 10px; overflow-wrap: break-word; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: rgba(192, 192, 192, 1); background-color: rgba(248, 248, 248, 1); border-left: 3px solid rgba(108, 226, 108, 1); border-right: 1px solid rgba(231, 229, 220, 1)"> view plain copy
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; position: absolute; left: 514px; top: 1718px; width: 16px; height: 16px; z-index: 99"> </div>
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; width: 16px; height: 16px"> </div>
</div>
</div>
<ol style="box-sizing: border-box; outline: 0; margin-top: 0; margin-right: 0; margin-bottom: 24px; padding: 0; list-style-position: initial; list-style-image: initial; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; border-top: none; border-right: 1px solid rgba(231, 229, 220, 1); border-bottom: none; border-left: none; background-color: rgba(255, 255, 255, 1); color: rgba(92, 92, 92, 1); font-size: 16px; overflow-wrap: break-word" start="1">
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">yarn start  </li>
</ol></div>
<span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">在浏览器中打开
<div class="dp-highlighter bg_plain" style="box-sizing: border-box; outline: 0; margin: 0 0 24px; padding: 1px 0 0; position: relative; font-family: Consolas, "Courier New", Courier, mono, serif; font-size: 12px; background-color: rgba(231, 229, 220, 1); width: 790.016px; overflow-wrap: break-word; border-color: rgba(204, 204, 204, 1); color: rgba(85, 85, 85, 1)">
<div class="bar" style="box-sizing: border-box; outline: 0; margin: 0; padding: 0 0 0 45px; overflow-wrap: break-word">
<div class="tools" style="box-sizing: border-box; outline: 0; margin: 0; padding: 3px 8px 10px 10px; overflow-wrap: break-word; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: rgba(192, 192, 192, 1); background-color: rgba(248, 248, 248, 1); border-left: 3px solid rgba(108, 226, 108, 1); border-right: 1px solid rgba(231, 229, 220, 1)"> view plain copy
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; position: absolute; left: 514px; top: 1843px; width: 16px; height: 16px; z-index: 99"> </div>
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; width: 16px; height: 16px"> </div>
</div>
</div>
<ol style="box-sizing: border-box; outline: 0; margin-top: 0; margin-right: 0; margin-bottom: 24px; padding: 0; list-style-position: initial; list-style-image: initial; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; border-top: none; border-right: 1px solid rgba(231, 229, 220, 1); border-bottom: none; border-left: none; background-color: rgba(255, 255, 255, 1); color: rgba(92, 92, 92, 1); font-size: 16px; overflow-wrap: break-word" start="1">
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">http://localhost:3000   </li>
</ol></div>
<span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">现在我们看 my-app文件夹下的public/index.html 和src/index.js的源码，我们可以在这里编写项目代码，但是注意 public/index.html 是启动http服务器的首页，src/index.js是编译的入口文件，只能叫index这个名字，改别的名字不行。<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">打开 http://localhost:3000/index.html 首页，f12查看网页源码，你会看到 
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word"> 
<div class="dp-highlighter bg_plain" style="box-sizing: border-box; outline: 0; margin: 0 0 24px; padding: 1px 0 0; position: relative; font-family: Consolas, "Courier New", Courier, mono, serif; font-size: 12px; background-color: rgba(231, 229, 220, 1); width: 790.016px; overflow-wrap: break-word; border-color: rgba(204, 204, 204, 1); color: rgba(85, 85, 85, 1)">
<div class="bar" style="box-sizing: border-box; outline: 0; margin: 0; padding: 0 0 0 45px; overflow-wrap: break-word">
<div class="tools" style="box-sizing: border-box; outline: 0; margin: 0; padding: 3px 8px 10px 10px; overflow-wrap: break-word; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: rgba(192, 192, 192, 1); background-color: rgba(248, 248, 248, 1); border-left: 3px solid rgba(108, 226, 108, 1); border-right: 1px solid rgba(231, 229, 220, 1)"> view plain copy
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; position: absolute; left: 514px; top: 2059px; width: 16px; height: 16px; z-index: 99"> </div>
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; width: 16px; height: 16px"> </div>
</div>
</div>
<ol style="box-sizing: border-box; outline: 0; margin-top: 0; margin-right: 0; margin-bottom: 24px; padding: 0; list-style-position: initial; list-style-image: initial; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; border-top: none; border-right: 1px solid rgba(231, 229, 220, 1); border-bottom: none; border-left: none; background-color: rgba(255, 255, 255, 1); color: rgba(92, 92, 92, 1); font-size: 16px; overflow-wrap: break-word" start="1">
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word"><script type="text/javascript" src="/static/js/bundle.js"></script>  </li>
</ol></div>
<span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">/static/js/bundle.js<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">在你的项目my-app你是看不到这个文件路径的，你也没有写配置文件webpack.config.js,<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">http服务器配置,自动代开浏览器窗口，react，es6语法编译，babel-core，webpack，等等这些你都没下载，配置。<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">这些活，react-scripts 都帮你做了。
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word"> 
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word"> 
<span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">刚才的过程分析
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word"> 
<p style="box-sizing: border-box; outline: 0; margin: 0 0 16px; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 16px; color: rgba(77, 77, 77, 1); line-height: 26px; overflow-x: auto; overflow-wrap: break-word">回顾  npm run start 我们一开始这么启动服务运行项目 打开你的my-app\package.json
<div class="dp-highlighter bg_plain" style="box-sizing: border-box; outline: 0; margin: 0 0 24px; padding: 1px 0 0; position: relative; font-family: Consolas, "Courier New", Courier, mono, serif; font-size: 12px; background-color: rgba(231, 229, 220, 1); width: 790.016px; overflow-wrap: break-word; border-color: rgba(204, 204, 204, 1); color: rgba(85, 85, 85, 1)">
<div class="bar" style="box-sizing: border-box; outline: 0; margin: 0; padding: 0 0 0 45px; overflow-wrap: break-word">
<div class="tools" style="box-sizing: border-box; outline: 0; margin: 0; padding: 3px 8px 10px 10px; overflow-wrap: break-word; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: rgba(192, 192, 192, 1); background-color: rgba(248, 248, 248, 1); border-left: 3px solid rgba(108, 226, 108, 1); border-right: 1px solid rgba(231, 229, 220, 1)"> view plain copy
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; position: absolute; left: 514px; top: 2503px; width: 16px; height: 16px; z-index: 99"> </div>
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; width: 16px; height: 16px"> </div>
</div>
</div>
<ol style="box-sizing: border-box; outline: 0; margin-top: 0; margin-right: 0; margin-bottom: 24px; padding: 0; list-style-position: initial; list-style-image: initial; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; border-top: none; border-right: 1px solid rgba(231, 229, 220, 1); border-bottom: none; border-left: none; background-color: rgba(255, 255, 255, 1); color: rgba(92, 92, 92, 1); font-size: 16px; overflow-wrap: break-word" start="1">
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">"scripts": {  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">    "start": "react-scripts start",  </li>
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">      ...  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">  }  </li>
</ol></div>
<span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">所以执行的是 react-scripts start <br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">打开你的my-app\node_modules\react-scripts这个文件夹下的bin文件夹下的react-scripts.js文件
<div class="dp-highlighter bg_plain" style="box-sizing: border-box; outline: 0; margin: 0 0 24px; padding: 1px 0 0; position: relative; font-family: Consolas, "Courier New", Courier, mono, serif; font-size: 12px; background-color: rgba(231, 229, 220, 1); width: 790.016px; overflow-wrap: break-word; border-color: rgba(204, 204, 204, 1); color: rgba(85, 85, 85, 1)">
<div class="bar" style="box-sizing: border-box; outline: 0; margin: 0; padding: 0 0 0 45px; overflow-wrap: break-word">
<div class="tools" style="box-sizing: border-box; outline: 0; margin: 0; padding: 3px 8px 10px 10px; overflow-wrap: break-word; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: rgba(192, 192, 192, 1); background-color: rgba(248, 248, 248, 1); border-left: 3px solid rgba(108, 226, 108, 1); border-right: 1px solid rgba(231, 229, 220, 1)"> view plain copy
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; position: absolute; left: 514px; top: 2705px; width: 16px; height: 16px; z-index: 99"> </div>
<div style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; width: 16px; height: 16px"> </div>
</div>
</div>
<ol style="box-sizing: border-box; outline: 0; margin-top: 0; margin-right: 0; margin-bottom: 24px; padding: 0; list-style-position: initial; list-style-image: initial; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; border-top: none; border-right: 1px solid rgba(231, 229, 220, 1); border-bottom: none; border-left: none; background-color: rgba(255, 255, 255, 1); color: rgba(92, 92, 92, 1); font-size: 16px; overflow-wrap: break-word" start="1">
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">#!/usr/bin/env node  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">var spawn = require('cross-spawn');  </li>
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">var script = process.argv;  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">var args = process.argv.slice(3);  </li>
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">switch (script) {  </li>
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">case 'build':  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">case 'eject':  </li>
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">case 'start':  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">case 'test':  </li>
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">  var result = spawn.sync(  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">    'node',  </li>
<li class="alt" style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); color: inherit; line-height: 18px; overflow-wrap: break-word">    .concat(args),  </li>
<li style="box-sizing: border-box; outline: 0; margin: 8px 0 0 40px; padding: 0 3px 0 10px; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgba(108, 226, 108, 1); background-color: rgba(248, 248, 248, 1); line-height: 18px; overflow-wrap: break-word">  .......  </li>
</ol></div>
<span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">上面代码中  script 的变量值是 start<br style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, SimHei, SimSun; color: rgba(85, 85, 85, 1); font-size: 15px"><span style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; overflow-wrap: break-word; color: rgba(85, 85, 85, 1); font-size: 15px">所以执行 my-app\node_modules\react-scripts\scripts 文件夹下的  start.js 文件代码节选重点如下 
来源：https://www.cnblogs.com/yeduweichengzhaoyu/p/11911743.html

頁: [1]

琼殿技术论坛's Archiver

react项目启动详解（转载）