React的环境搭建以及脚手架的安装
<p>1.安装<strong>node.js</strong></p><p> 如果安装了，就请参照第二步；没有的话，去node.js官网下载：<span class="md-link md-expand">https://nodejs.org/zh-cn/download/</span></p>
<p>2.检查</p>
<p> win键+r ----->打开资源管理器---->输入cmd------>在命令窗口输入node -v和npm -v(是为了检查版本号) </p>
<p> <img src="https://img2018.cnblogs.com/i-beta/1902049/202002/1902049-20200203180831471-2122600090.png"></p>
<p> 因为国内使用npm很慢，我们可以使用淘宝的cnpm，同时设置镜像地址</p>
<p> 指令：npm install -g cnpm --registry=https://registry.npm.taobao.org</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1902049/202002/1902049-20200203181121619-1206563474.png"></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> 检查淘宝镜像是否安装成功 cnpm -v(出现下面的地址就意味着安装成功)</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1902049/202002/1902049-20200203181345487-1815354346.png"></p>
<p> </p>
<p> </p>
<p> </p>
<p> 3.全局安装<strong>react</strong>脚手架</p>
<p> 如已经安装了淘宝镜像，就在命令窗口输入：cnpm install -g create-react-app；</p>
<p> 没有安装淘宝镜像，可以输入这样的指令：npm i -g create-react-app（注：i是install的简写）</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1902049/202002/1902049-20200203182127637-421749504.png"></p>
<p> </p>
<p> </p>
<p> 出现上面的情形，就证明react的全局安装已经结束，之后就可以关闭了命令窗口。</p>
<p>4.创建项目</p>
<p> 进入我们要创建react项目的文件中，在地址栏里输入 cmd 进入cmd窗口，然后输入指令：create-react-app 项目名称</p>
<p> 例子：创建一个todolist的项目</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1902049/202002/1902049-20200203182956329-1084336684.png"></p>
<p><img src="https://img2018.cnblogs.com/i-beta/1902049/202002/1902049-20200203182956329-1084336684.png"></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> 创建成功之后，在命令窗口输入cd todolist(进入当前的文件夹)，之后再命令窗口输入npm start(启动当前的项目)</p>
<p> </p>
<p><img src="https://img2018.cnblogs.com/i-beta/1902049/202002/1902049-20200203184235981-1420407327.png"></p>
<p> </p>
<p> </p>
<p> </p>
<p> <img src="https://img2018.cnblogs.com/i-beta/1902049/202002/1902049-20200203184629663-1856639486.png"></p>
<p> </p>
<p> </p>
<p> 启动成功之后，在浏览器上会自动打开，打开之后的页面是下面的样子。（注：我的端口号是3001，是因为我之前已经有了一个，一般我们默认的端口号是3000）</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1902049/202002/1902049-20200203184949791-1585017437.png"></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><strong> </strong></p><br><br>
来源：https://www.cnblogs.com/xps-03/p/12256777.html
頁:
[1]