React create-react-app

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

create-react-app是初学者的绝佳工具，可让您快速创建和运行React项目。它不需要手动进行任何配置。这个工具包装了所有必需的依赖项，例如Webpack，Babel for React项目本身，然后您只需要专注于编写React代码。该工具可设置开发环境，提供出色的开发人员体验，并优化用于生产的应用程序。

要求

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

• 节点版本> = 8.10
• NPM版本> = 5.6

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

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

$ node -v

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

$ npm -v

安装

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

安装React

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

C:\Users\javatpoint> npm install -g create-react-app

创建一个新的React项目

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

C:\Users\javatpoint> create-react-app reactproject

注意：我们可以使用npx在单个命令中结合上述两个步骤。 npx是npm 5.2及更高版本附带的打包运行程序工具。

C:\Users\javatpoint> npx create-react-app reactproject

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

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

$ cd Desktop
$ npm start

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

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

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

• node_modules：它包含React库和所需的任何其他第三方库。
• public：它拥有应用程序的公共资产。它包含index.html，默认情况下，React将在其中将应用程序安装在
  元素上。
• src：它包含App.css，App.js，App.test.js，index.css，index.js和serviceWorker.js文件。在这里，App.js文件始终负责在React中显示输出屏幕。
• package-lock.json：对于npm package修改node_modules树或package.json的任何操作，它都会自动生成。无法发布。如果找到顶层软件包以外的其他地方，它将被忽略。
• package.json：它包含项目所需的各种元数据。它向npm提供信息，从而可以识别项目并处理项目的依赖关系。
• README.md：它提供了阅读React主题的文档。

反应环境设置

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

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

$ npm build