使用create-react-app快速开发React应用

柔光的暖阳◎ 2022-05-25 23:42 152阅读 0赞

React是一个JavaScript语言的工具库，在这个JavaScript工具铺天盖地的时代，没有意外，首先需要安装Node.js和npm，React本身并不依赖Node.js，但是我们开发中用到的诸多工具需要Node.js的支持。在Node.js的官网（https://nodejs.org/）可以找到合适的安装方式，安装Node.js的同时也就安装了npm，npm是Node.js的安装包管理工具，因为我们不可能自己开发所有功能，会大量使用现有的安装包，就需要npm的帮助。

React技术依赖于一个很庞大的技术栈，比如，转译JavaScript代码需要使用Babel，模块打包工具又要使用Webpack，定制build过程需要grunt或者gulp。。这些技术栈都需要各自的配置文件，还没有开始写一行React相关代码，开发人员就已经被各种技术名词淹没。

庆幸的是Facebook提供了一个快速开发React应用的工具，名叫create-react-app

create-react-app是一个通过npm发布的安装包，在确认Node.js和npm安装好之后，命令行中执行以下命令进行安装：

npm install --global create-react-app

安装完之后，你的电脑中就会有一个create-react-app的执行命令。

接下来我们可以在任意一个想要创建项目的目录下通过cmd命令行创建第一个react项目，只需执行以下命令

create-react-app 20180420react

这个命令会在当前目录下创建一个名为20180420react的目录，在这个目录中会自动添加一个应用的框架，随后我们只需要在这个框架的基础上修改文件就可以开发React应用，避免了大量的手工配置工作。

在create-react-app命令一大段文字输出之后，根据提示，输入下面的命令：

cd 20180420react

npm start

这个命令会启动一个开发模式的服务器，同时也会让你的浏览器自动打开一个网页，指向本地地址http://localhost:3000/，显示界面如下所示：

![WEBRESOURCE68933c01402b534d52f59bb46ba1108a][]

我们可以通过修改src/App.js文件来修改网页内容：

![WEBRESOURCE2819c24594aa6db61be9e982e4e53039][]

![WEBRESOURCE59c082d10830a0db9564814c577f411b][]

![WEBRESOURCE3f340da1a6db9a5625b59c6c687daa38][]

恭喜你，你的第一个React应用就诞生了~接下来继续探索React的神奇世界吧，你会发现越来越有趣~

[WEBRESOURCE68933c01402b534d52f59bb46ba1108a]: http://note.youdao.com/yws/res/3003/WEBRESOURCE68933c01402b534d52f59bb46ba1108a
[WEBRESOURCE2819c24594aa6db61be9e982e4e53039]: http://note.youdao.com/yws/res/3006/WEBRESOURCE2819c24594aa6db61be9e982e4e53039
[WEBRESOURCE59c082d10830a0db9564814c577f411b]: https://note.youdao.com/yws/res/3008/WEBRESOURCE59c082d10830a0db9564814c577f411b
[WEBRESOURCE3f340da1a6db9a5625b59c6c687daa38]: https://note.youdao.com/yws/res/3010/WEBRESOURCE3f340da1a6db9a5625b59c6c687daa38