React脚手架 create-react-app 快速上手教程

O、运行环境

$ node -v
v10.13.0

$ npm -v
6.4.1

一、安装create-react-app

npm install -g create-react-app

二、创建react应用

使用 create-react-app 命令，创建react项目：

$ create-react-app hello-react-demo

Creating a new React app in /Users/jack/tutorials/hello-react-demo/hello-react-demo.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

> fsevents@1.2.4 install /Users/jack/tutorials/hello-react-demo/hello-react-demo/node_modules/fsevents
> node install

[fsevents] Success: "/Users/jack/tutorials/hello-react-demo/hello-react-demo/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
+ react@16.6.1
+ react-dom@16.6.1
+ react-scripts@2.1.1
added 1766 packages from 678 contributors in 94.392s

Initialized a git repository.

Success! Created hello-react-demo at /Users/jack/tutorials/hello-react-demo/hello-react-demo
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 hello-react-demo
  npm start

Happy hacking!

生成项目目录结构：

其中，package.json 内容如下：

{
  "name": "hello-react-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.6.1",
    "react-dom": "^16.6.1",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

这个脚手架的核心就在 react-scripts ：

hello-react-demo/node_modules/react-scripts$ tree .
.
├── LICENSE
├── README.md
├── bin
│   └── react-scripts.js
├── config
│   ├── env.js
│   ├── jest
│   │   ├── babelTransform.js
│   │   ├── cssTransform.js
│   │   └── fileTransform.js
│   ├── paths.js
│   ├── webpack.config.dev.js
│   ├── webpack.config.prod.js
│   └── webpackDevServer.config.js
├── lib
│   └── react-app.d.ts
├── package.json
├── scripts
│   ├── build.js
│   ├── eject.js
│   ├── init.js
│   ├── start.js
│   ├── test.js
│   └── utils
│       ├── createJestConfig.js
│       ├── verifyPackageTree.js
│       └── verifyTypeScriptSetup.js
├── template
│   ├── README.md
│   ├── gitignore
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   └── manifest.json
│   └── src
│       ├── App.css
│       ├── App.js
│       ├── App.test.js
│       ├── index.css
│       ├── index.js
│       ├── logo.svg
│       └── serviceWorker.js
└── template-typescript
    ├── README.md
    ├── gitignore
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   └── manifest.json
    └── src
        ├── App.css
        ├── App.test.tsx
        ├── App.tsx
        ├── index.css
        ├── index.tsx
        ├── logo.svg
        └── serviceWorker.ts

12 directories, 45 files

react-scripts.js

#!/usr/bin/env node
/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  throw err;
});

const spawn = require('react-dev-utils/crossSpawn');
const args = process.argv.slice(2);

const scriptIndex = args.findIndex(
  x => x === 'build' || x === 'eject' || x === 'start' || x === 'test'
);
const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];

switch (script) {
  case 'build':
  case 'eject':
  case 'start':
  case 'test': {
    const result = spawn.sync(
      'node',
      nodeArgs
        .concat(require.resolve('../scripts/' + script))
        .concat(args.slice(scriptIndex + 1)),
      { stdio: 'inherit' }
    );
    if (result.signal) {
      if (result.signal === 'SIGKILL') {
        console.log(
          'The build failed because the process exited too early. ' +
            'This probably means the system ran out of memory or someone called ' +
            '`kill -9` on the process.'
        );
      } else if (result.signal === 'SIGTERM') {
        console.log(
          'The build failed because the process exited too early. ' +
            'Someone might have called `kill` or `killall`, or the system could ' +
            'be shutting down.'
        );
      }
      process.exit(1);
    }
    process.exit(result.status);
    break;
  }
  default:
    console.log('Unknown script "' + script + '".');
    console.log('Perhaps you need to update react-scripts?');
    console.log(
      'See: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases'
    );
    break;
}

运行测试：

npm start

/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run start --scripts-prepend-node-path=auto

> hello-react-demo@0.1.0 start /Users/jack/tutorials/hello-react-demo/hello-react-demo
> react-scripts start

Starting the development server...

Compiled successfully!

You can now view hello-react-demo in the browser.

http://localhost:3000/

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

---

Kotlin 开发者社区

国内第一Kotlin 开发者社区公众号，主要分享、交流 Kotlin 编程语言、Spring Boot、Android、React.js/Node.js、函数式编程、编程思想等相关主题。

开发者社区 QRCode.jpg