React教程

React 应用创建

启动新的React项目非常复杂,构建工具如此之多。在编写一行React代码之前,它会使用许多依赖项,配置文件和其他需求,例如Babel,Webpack,ESLint。创建React App CLI工具消除了所有复杂性,并使React应用变得简单。为此,您需要使用NPM安装软件包,然后运行一些简单的命令来获取新的React项目。
create-react-app 是一个出色的工具对于初学者,这使您可以非常快速地创建和运行React项目。它不需要手动进行任何配置。这个工具为React项目本身包装了所有必需的依赖项,例如 Webpack , Babel ,然后您只需要专注于编写React代码。该工具可以设置开发环境,为开发人员提供出色的体验,并可以优化应用程序的生产。

需求

创建React应用程序可以在任何平台上运行,例如macOS,Windows,Linux等。要使用create-react-app创建React项目,您需要安装以下内容系统中的事物。
节点版本 >= 8.10 NPM版本 >= 5.6
让我们检查系统中 Node 和 NPM 的当前版本。
运行以下命令来检查Node命令提示符中的版本。
$ node-v

React create-react-app
运行以下命令以检查NPM版本命令提示符。
$ npm-v

Reactcreate-react-app

安装

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

安装React

我们可以使用npm软件包管理器通过以下命令来安装React。无需担心React安装的复杂性。 create-react-app npm软件包管理器将管理React项目所需的所有内容。
C:\Users\lidihuo> npm install-g create-react-app

创建新的React项目

一旦成功安装React,我们就可以使用create-react-app命令创建一个新的React项目。在这里,我为项目选择" reactproject"名称。
C:\Users\lidihuo> create-react-app reactproject
注意: 注意: 我们可以使用npx在单个命令中结合上述两个步骤。 npx是npm5.2及更高版本附带的打包运行程序工具。
C:\Users\lidihuo> npx create-react-app reactproject

React create-react-app
上述命令将需要一些时间来安装React并创建一个名为" reactproject"的新项目。现在,我们可以看到如下所示的终端。
React create-react-app
以上屏幕显示React项目已在我们的系统上成功创建。现在,我们需要启动服务器,以便可以在浏览器上访问该应用程序。在终端窗口中键入以下命令。
$ cd Desktop
$ npm start
NPM是一个程序包管理器,它将启动服务器并在默认服务器http://localhost:3000上访问应用程序。现在,我们将获得以下屏幕。
React create-react-app
下一步,在代码编辑器上打开项目。在这里,我正在使用Visual Studio Code。我们项目的默认结构如下图所示。
React create-react-app
在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 package修改node_modules树或package.json的任何操作,它都会自动生成。无法发布。如果找到除顶层包之外的其他任何地方,它将被忽略。 package.json: : 它保存了项目所需的各种元数据。它向npm提供信息,从而可以识别项目并处理项目的依赖关系。 README.md: 。该文档提供了有关React主题的文档。

React环境设置

现在,打开 src >> App.js 文件,然后进行更改以显示在屏幕。进行所需的更改后,保存。保存文件后,Webpack会重新编译代码,页面将自动刷新,并且更改将反映在浏览器屏幕上。现在,我们可以根据需要创建任意数量的组件,将新创建的组件导入 App.js 文件中,该文件将包含在我们的主 index.html 文件中通过Webpack编译后。
接下来,如果我们要使项目成为生产模式,请键入以下命令。此命令将生成最优化的生产版本。
$ npm build

昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4