create-react-app 脚手架环境搭建

安装 create-react-app

create-react-app 是一个包,也可以叫做脚手架,项目环境的搭建需要使用到它,所以需要先安装。

这里使用 npm 进行安装脚手架,如果没有安装 npm,可以先安装 nvm 再进行安装。

nvm安装教程: https://my.oschina.net/u/3500483/blog/909858

$ npm install -g create-react-app

这里也许要等待漫长的时间........

在项目中使用脚手架

在d盘根目录下创建文件夹 react-demo,目录为:d:/react-demo,以下简称项目根目录。

$ create-react-app d:/react-demo

这一步骤的操作会在项目根目录下自动创建脚手架目录结构以及下载一些依赖包。

过程中可能会遇到的问题:create-react-app 不是内部或外部命令解决方案?

解决方法:https://my.oschina.net/u/3500483/blog/909864

等到项目根目录下出现以下完整目录结构就说明项目中已经成功的引入了脚手架。

测试脚手架

安装了之后,要验证是否安装成功。需要执行一下步骤:

$ cd d:/react-demo // 跳转项目根目录

$ npm start // 启动服务

当服务完全启动之后,浏览器中输入:localhost:3000 地址回车(也可能是浏览器自动弹出),出现以下页面说明环境搭建成功。

参考资料:

环境搭建

https://github.com/facebookincubator/create-react-app/blob/master/README.md

用户指南 API

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...