使用React CLI工具创建React应用程序的教程在这篇博文中，我们将学习使用React CLI工具创建React应

在这篇博文中，我们将学习使用React CLI工具创建React应用程序。

React框架是Facebook的一个开源组件框架，用于开发用户界面应用程序。它是一个流行的库。对于手动创建React应用来说，创建React应用是非常困难的。手动需要添加创建反应式应用程序所需的配置。React团队提供了create-react-appcli工具，可以从头开始创建一个React应用程序，而不需要手动编写。
以下是创建react应用程序的前提条件

安装Node和NPM命令

首先在你的操作系统上安装Nodejs。NodeJs提供node和npm命令行工具。请发出以下命令来检查nodejs和npm的安装情况

B:\Workspace\blog>node --version  
v8.10.0  
B:\Workspace\blog>npm --version  
5.6.0

如果给出正确的版本号，那么我们可以认为NodeJS安装正确。

create-react-app cli npm package installation

一旦node和npm安装完毕，请安装create-react-app npm包

npm install -g create-react-app

这将在全局范围内安装 create-react-app npm 包，并且 create-react-app 命令可以在任何文件夹上使用。以下命令检查 create-react-app 的安装情况

B:\Workspace\blog\reactapp>create-react-app --help  
Usage: create-react-app  [options]  
  
Options:  
  
  -V, --version                            output the version number  
  --verbose                                print additional logs  
  --info                                   print environment debug info  
  --scripts-version   use a non-standard version of react-scripts  
  --use-npm  
  --use-pnp  
  -h, --help                               output usage information  
    Only  is required.  
  
    A custom --scripts-version can be one of:  
      - a specific npm version: 0.8.2  
      - a specific npm tag: @next  
      - a custom fork published on npm: my-react-scripts  
      - a local path relative to the current working directory: file:../my-react-scripts  
      - a .tgz archive: https://mysite.com/my-react-scripts-0.8.2.tgz  
      - a .tar.gz archive: https://mysite.com/my-react-scripts-0.8.2.tar.gz  
    It is not needed unless you specifically want to use a fork.  
  
    If you have any problems, do not hesitate to file an issue:  
      https://github.com/facebook/create-react-app/issues/new

一旦cli安装完毕，创建一个React应用程序

这是一个使用cli创建React应用程序的例子。

首先，进入我们需要创建react应用程序的目录。这将安装具有初始配置的React模板应用程序

B:\Workspace\blog\reactapp>create-react-app helloworldreact  
  
Creating a new React app in B:\Workspace\blog\reactapp\helloworldreact.  
  
Installing packages. This might take a couple of minutes.  
Installing react, react-dom, and react-scripts...  
  
yarn add v1.5.1  
[1/4] Resolving packages...  
[2/4] Fetching packages...  
info There appears to be trouble with your network connection. Retrying...  
info fsevents@1.2.4: The platform "win32" is incompatible with this module.  
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.  
[3/4] Linking dependencies...  
[4/4] Building fresh packages...  
success Saved lockfile.  
warning Your current version of Yarn is out of date. The latest version is "1.10.1", while you're on "1.5.1".  
info To upgrade, run the following command:  
$ curl -o- -L https://yarnpkg.com/install.sh | bash  
success Saved 10 new dependencies.  
info Direct dependencies  
├─ react-dom@16.5.2  
├─ react-scripts@2.0.5  
└─ react@16.5.2  
info All dependencies  
├─ babel-plugin-dynamic-import-node@2.2.0  
├─ babel-preset-react-app@5.0.4  
├─ confusing-browser-globals@1.0.4  
├─ eslint-config-react-app@3.0.4  
├─ object.assign@4.1.0  
├─ react-dev-utils@6.0.5  
├─ react-dom@16.5.2  
├─ react-error-overlay@5.0.5  
├─ react-scripts@2.0.5  
└─ react@16.5.2  
Done in 353.50s.  
  
Success! Created helloworldreact at B:\Workspace\blog\reactapp\helloworldreact  
Inside that directory, you can run several commands:  
  
  yarn start  
    Starts the development server.  
  
  yarn build  
    Bundles the app into static files for production.  
  
  yarn test  
    Starts the test runner.  
  
  yarn 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 helloworldreact  
  yarn start  
  
Happy hacking!

create-react-app文件夹结构解释

package.json文件

这个文件包含了 react 应用程序的所有元信息和依赖关系。其中一些配置项如下

使用 "name "的react应用程序名称。"helloworldreact"
应用程序的当前版本使用 "version"。"0.1.0"
发布到npm注册表的私有配置 using "private": true
应用程序的依赖项 using

"dependencies": {  
    "react": "^16.5.2",  
    "react-dom": "^16.5.2",  
    "react-scripts": "2.0.5"  
  }

用于启动/构建/测试应用程序的应用脚本

"scripts": {  
    "start": "react-scripts start",  
    "build": "react-scripts build",  
    "test": "react-scripts test",  
    "eject": "react-scripts eject"  
  }

node_modules文件夹
这包含package.json中定义的react应用的直接和间接依赖
public文件夹
这文件夹包含react应用的静态资产。它包含以下文件：

index.html - 这是一个应用程序的开始和入口
favicon.ioc - react应用程序最喜欢的标题图标
manifest.json - 这是一个渐进式web应用程序的配置。当使用添加到主屏幕功能时，它包含了安卓和IOS的快捷图标。
src文件夹：这是react web应用程序的实际javascript源代码。它包含js、css和svg。

反应式应用开发服务器启动

应用程序文件夹已经创建，现在是启动开发服务器的时候了。请发出以下npm命令来启动服务器

B:\Workspace\blog\reactapp\helloworldreact>npm start  
  
> helloworldreact@0.1.0 start B:\Workspace\blog\reactapp\helloworldreact  
> react-scripts start  
  
Compiled successfully!  
  
You can now view helloworldreact in the browser.  
  
  Local:            http://localhost:3000/  
  On Your Network:  http://192.168.12.54:3000/  
  
Note that the development build is not optimized.  
To create a production build, use yarn build.

并输出为

create-react-app cli example