使用create-react-app创建React项目 – ReactJS实战教程 create-react-app创建React项目|Rea

上一章ReactJS实战教程请查看：React环境安装和配置完全解读
使用这么多构建工具启动一个新的React项目非常复杂。在编写一行React代码之前，它使用许多依赖项、配置文件和其他需求，如Babel、Webpack、ESLint。Create React App CLI工具消除了所有的复杂性，使React App变得简单。为此，我们首先需要使用NPM安装包，然后运行几个简单的命令来获得一个新的React项目。
create-react-app是一个非常适合初学者的工具，它允许你快速创建和运行React项目。它不需要手动进行任何配置。这个工具包装了所有需要的依赖，如Webpack, Babel的React项目本身，然后你需要专注于写React代码。该工具设置开发环境，提供优秀的开发人员体验，并优化应用程序以用于生产。
Create React App使用准备Create React App由Facebook维护，可以在macOS、Windows、Linux等任何平台上运行。要使用create- React -app创建一个React项目，你需要在系统中安装以下内容。

NodeJS版本>= 8.10
NPM版本>= 5.6

安装NodeJS和NPM可以参考以下内容：

OS X使用nvm安装NodeJS和NPM
windows使用nvm安装NodeJS和NPM?

让我们检查一下系统中Node和NPM的当前版本。
运行以下命令，在命令提示符中查看NodeJS版本。

$ node -v

使用create-react-app创建React项目 – ReactJS实战教程

文章图片
运行以下命令，在命令提示符中查看NPM版本。

$ npm -v

文章图片
安装React和创建React项目在这里，我们将学习如何使用CRA工具安装React，为此，我们需要遵循如下步骤。
安装React
我们可以使用以下命令使用npm包管理器安装React，没有必要担心React安装的复杂性，create-react-app npm包管理器将管理React项目所需的一切。

> npm install -g create-react-app

创建一个新的React项目
React安装成功后，我们可以使用create-react-app命令创建一个新的React项目。在这里选择“reactproject”作为项目名称。

> create-react-app reactproject

注意：我们可以使用npx将上述两个步骤合并到一个命令中，npx是一个包运行器工具，附带npm 5.2及以上版本。

> npx create-react-app reactproject

文章图片
上面的命令将花费一些时间来安装React并创建一个名为“reactproject”的新项目，现在，我们可以看到终端如下图所示。

文章图片
上面的屏幕显示在我们的系统上成功创建了React项目。现在，我们需要启动服务器，以便能够在浏览器上访问应用程序。在终端窗口中输入以下命令。

$ cd reactproject $ npm start

NPM是一个包管理器，它启动服务器并在缺省服务器http://localhost:3000访问应用程序。现在，我们将看到以下屏幕。

文章图片
接下来，在代码编辑器上打开项目，这里，我使用的是Visual Studio Code。我们项目的默认结构如下图所示。

文章图片
在React应用程序中，根目录中有几个文件和文件夹。其中一些问题如下：
node_modules：它包含React库和其他任何需要的第三方库。
public：它持有应用程序的公共资源，它包含index.html, React默认将应用程序挂载在< div id=” root” >< /div>元素上。
src：它包含了App.css, App.js, App.test.js、index.css、index.js和serviceWorker.js文件。这里，App.js文件总是负责在React中显示输出屏幕。
package-lock.json：当npm包修改node_modules树或package.json时，它会自动生成，不能发发布。如果它找到的是其他位置而不是顶级包，那么它将被忽略。
package.json：它包含项目所需的各种元数据，它向npm提供信息，npm允许识别项目并处理项目依赖关系。
README.md：自述文件，它提供了有关React主题的文档。
React环境安装现在，打开src >> App.js文件，并进行你希望在屏幕上显示的更改。进行了所需的更改之后，保存文件。一旦我们保存了文件，Webpack就会重新编译代码，页面就会自动刷新，变化就会反映在浏览器屏幕上。现在，我们可以创建任意数量的组件，将新创建的组件导入到App.js文件中，该文件将被Webpack编译后包含在主index.html文件中。
【使用create-react-app创建React项目 – ReactJS实战教程】接下来，如果我们希望将项目设置为生产模式，请输入以下命令。此命令将生成最佳优化的生产构建。