react脚手架搭建
Posted oklfx
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react脚手架搭建相关的知识,希望对你有一定的参考价值。
react脚手架搭建
由于我们在安装的过程中要使用到npm 因此需要先前安装好node.js
直接到官方下载即可 一般建议大家下载稳定版的(左边那个!)
知道你们懒,咯官网戳→_→ node.js官网:https://nodejs.org/en/
判断安装成功与否的标志↓
打开cmd命令行,输入 node -v 和 npm -v 来查看版本号,如果显示则安装完成
然后我们就可以开始create-react-app脚手架搭建之旅了
第一步:
打开你想要保存项目的盘 如D盘 新建一个目录如:my_reactDemo
第二步
打开cmd命令板 输入d: 回车 然后输入cd my_reactDemo 回车 这样我们就跳到了我们新建的那个目录下了
第三步
输入npm install -g create-react-app 回车 全局安装create-react-app脚手架(安装时间可能会比较长 视网速而定)
第四步
输入 create-react-app my-new-app 回车 在my_reactDemo目录下创建my-new-app文件夹
其中,node_modules用于存放项目的依赖包,也就是构建这个React项目可能会用到的工具,
--public文件夹中是 index.html存放目录,也就是React根页面的所在地
--src中用于存放js文件,也就是项目开发中的主要区域
--package.json用于记录项目信息,以及外部依赖包的导入信息等
--json文件不能直接打开,需要用到文本编辑器,本人用的是VScode
然后,在命令行中“ cd ”该目录,输入如下命令,部署npm,以及导入react-dom依赖包.
cmd中输入:
npm init (然后一路回车)
npm install --save react react-dom ( 在该目录下导入react和react-dom)
npm install --save react-router-dom (react路由,以后会用到)
再看看真实项目搭建过程
以上是关于react脚手架搭建的主要内容,如果未能解决你的问题,请参考以下文章
使用 create-react-app 脚手架搭建 react 项目,释放配置文件且注入 less 依赖