React create-react-app

开始一个新的React项目非常复杂，需要很多构建工具。在编写第一行React代码之前，它需要许多依赖项、配置文件和其他要求，例如Babel、Webpack、ESLint。 Create React App CLI工具消除了所有这些复杂性，并使React应用程序变得简单。为此，您需要使用NPM安装该软件包，然后运行一些简单的命令来获取新的React项目。

create-react-app 对于初学者来说是一个极好的工具，它允许您非常快速地创建和运行React项目。它不需要任何手动配置。该工具将所有必需的依赖项（如 Webpack、 Babel 用于React项目本身）包装起来，然后您只需要专注于编写React代码。此工具设置开发环境，提供出色的开发人员体验，并优化应用程序以进行生产。

要求

Create React App 由 Facebook 维护，可以在任何 平台 上运行，例如 macOS、Windows、Linux 等。要使用 create-react-app 创建React项目，您需要在系统中安装以下内容。

1. Node 版本 >= 8.10
2. NPM 版本 >= 5.6

让我们检查一下系统中当前 Node 和 NPM 的版本。

运行以下命令以在命令提示符下检查Node版本。

运行以下命令以在命令提示符下检查NPM版本。

安装

在这里，我们将学习如何使用 CRA 工具安装React。为此，我们需要按照以下步骤操作。

安装 React

我们可以使用 npm 包管理器，通过以下命令来安装React。无需担心React安装的复杂性。 create-react-app npm 包管理器将管理React项目所需的一切。

创建一个新的 React 项目

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

注意: 我们可以使用 npx 将以上两个步骤合并为一个命令。 npx 是一个包运行器工具，它随 npm 5.2 及更高版本一起提供。

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

上面的屏幕表明React项目已在我们的系统上成功创建。现在，我们需要启动服务器，以便我们可以在浏览器上访问该应用程序。在终端窗口中键入以下命令。

NPM 是一个包管理器，它启动服务器并在默认服务器 https://:3000 上访问应用程序。现在，我们将获得以下屏幕。

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

在React应用程序中，根目录中有几个文件和文件夹。其中一些如下

1. node_modules: 它包含React库和所需的任何其他第三方库。
2. public: 它保存应用程序的公共资产。它包含 index.html，React默认情况下将在 <div id="root"></div> 元素上挂载应用程序。
3. src: 它包含 App.css、App.js、App.test.js、index.css、index.js 和 serviceWorker.js 文件。在这里，App.js 文件始终负责在React中显示输出屏幕。
4. package-lock.json: 对于 npm 包修改 node_modules 树或 package.json 的任何操作，它都会自动生成。它不能被发布。如果它在顶级包以外的任何其他位置找到，它将被忽略。
5. package.json: 它保存项目所需的各种元数据。它向 npm 提供信息，从而可以识别项目以及处理项目的依赖项。
6. README.md: 它提供了有关React主题的文档。

React 环境设置

现在，打开 src >> App.js 文件并进行要在屏幕上显示的更改。进行所需的更改后，保存 该文件。一旦我们保存文件，Webpack 就会重新编译代码，并且页面将自动刷新，并且更改会反映在浏览器屏幕上。现在，我们可以创建任意数量的组件，将新创建的组件导入到 App.js 文件中，并且该文件将在被 Webpack 编译后包含在我们的主 index.html 文件中。

接下来，如果我们想为生产模式制作项目，请键入以下命令。此命令将生成最佳优化的生产版本。