使用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可以参考以下内容:
  • OS X使用nvm安装NodeJS和NPM
  • windows使用nvm安装NodeJS和NPM?
让我们检查一下系统中Node和NPM的当前版本。
运行以下命令,在命令提示符中查看NodeJS版本。
$ node -v

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

文章图片
运行以下命令,在命令提示符中查看NPM版本。
$ npm -v

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

文章图片
安装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

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

文章图片
上面的命令将花费一些时间来安装React并创建一个名为“reactproject”的新项目,现在,我们可以看到终端如下图所示。
使用create-react-app创建React项目 – ReactJS实战教程

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

NPM是一个包管理器,它启动服务器并在缺省服务器http://localhost:3000访问应用程序。现在,我们将看到以下屏幕。
使用create-react-app创建React项目 – ReactJS实战教程

文章图片
接下来,在代码编辑器上打开项目,这里,我使用的是Visual Studio Code。我们项目的默认结构如下图所示。
使用create-react-app创建React项目 – ReactJS实战教程

文章图片
在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实战教程】接下来,如果我们希望将项目设置为生产模式,请输入以下命令。此命令将生成最佳优化的生产构建。
$ npm build

    推荐阅读