个性化阅读
专注于IT技术分析

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

点击下载

上一章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可以参考以下内容:

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

运行以下命令,在命令提示符中查看NodeJS版本。

$ node -v  
查看NodeJS版本

运行以下命令,在命令提示符中查看NPM版本。

$ npm -v  
查看NPM版本

安装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  
npx create-react-app安装和创建react项目

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

成功创建react项目

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

$ cd reactproject
$ npm start  

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

运行并查看react项目

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

查看react项目文件结构

在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文件中。

接下来,如果我们希望将项目设置为生产模式,请输入以下命令。此命令将生成最佳优化的生产构建。

$ npm build 
赞(0)
未经允许不得转载:srcmini » 使用create-react-app创建React项目 – ReactJS实战教程

评论 抢沙发

评论前必须登录!