React脚手架 create-react-app 快速上手教程Kotlin 开发者社区

$ node -v
v10.13.0

$ npm -v
6.4.1

$ 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!

{
  "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"
  ]
}

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

#!/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;
}

/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!