使用create-react-app命令

请注意：请事先安装node.js。

如果还没有安装，请点击此处安装！

在终端中运行命令

使用”ls”命令，查看目录是否已经存在。
例如：假设目录名为react-directory（可以自定义）。

输入以下命令”npx create-react-app react-directory”。

komorioBookpuro:~ komorishuhei$ npx create-react-app react-directory
npx: 99個のパッケージを5.733秒でインストールしました。

Creating a new React app in /Users/komorishuhei/reac-directory.

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

2. 确认执行结果

执行完毕后，输入“ls”命令来确认“react-directory”是否能运行。

Success! Created react-directory at /Users/komorishuhei/react-directory
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 react-directory
  npm start

Happy hacking!

请检查package.json文件。

② 使用编辑器查看package.json文件的内容。

{
  "name": "react-directory",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

使用”npm start”命令来启动React应用程序。

在编辑器中输入”npm start”命令以获得URL输出。

Compiled successfully!

You can now view project in the browser.

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

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

5. 成功建立环境。

如果在编辑器中输出的URL上点击后成功展示了像图片一样的内容，那就很好了。
辛苦了！