nodejs的安装与创建react应用

野性酷女 2022-05-06 05:58 348阅读 0赞

<table> 
 <tbody> 
 <tr> 
 <td>&nbsp;</td> 
 <td> nodejs的安装 
 <hr> 
 <ul> 
 <li> 下载最新的按照包 NODE-V8.9.3-X64.MSI- 安装完毕后，检查按照版本 <img alt="enter image description here" src="http://www.zootopia.unicom.local/static/upload/share/image/d8696b55-3c44-4776-a50d-d39def30f4dc.png"> </li> 
 <li> <code>npm install -g create-react-app</code> //安装react框架 -g 是全局安装 <img alt="enter image description here" src="http://www.zootopia.unicom.local/static/upload/share/image/3060fa3d-63f8-478b-8d47-96301d119c13.png"> </li> 
 <li> <code>npm list -g --depth 0</code> 查看安装框架 <img alt="enter image description here" src="http://www.zootopia.unicom.local/static/upload/share/image/2699affe-3dc3-4135-9ea0-46f4b2322a0f.png"> </li> 
 <li> <code>create-react-app myapp</code> //创建react工程,myapp为工程名 <img alt="enter image description here" src="http://www.zootopia.unicom.local/static/upload/share/image/323ae338-71c6-4ae7-bce7-b4faf8ab10eb.png"><img alt="enter image description here" src="http://www.zootopia.unicom.local/static/upload/share/image/a02f8ee6-1f7b-4421-94e0-a5b6fd79173d.png"><img alt="enter image description here" src="http://www.zootopia.unicom.local/static/upload/share/image/6ce16f9d-f367-4f2e-ae9d-0ef9c89cd9b6.png"> </li> 
 <li> 浏览器启动及按照成功！ <img alt="enter image description here" src="http://www.zootopia.unicom.local/static/upload/share/image/ce2bfce3-d5f3-4155-b60a-1b9afb1e5048.png"> </li> 
 <li> ！如果安装失败：使用国内镜像安装 </li> 
 <li> <code>npm install -g cnpm --registry=ry=https://registry.npm.taobao.org</code> </li> 
 <li> <code>npm config set registry ry https://registry.npm.taobao.org</code> </li> 
 </ul> 
 <hr> 
 <ul> 
 <li> 1、在Hbuilder里新建一个web项目，起名：react; </li> 
 <li> 2、设置JavaScript版本ECMAScript6，语法框架 在react15.1.0勾选； <img alt="enter image description here" src="http://www.zootopia.unicom.local/static/upload/share/image/b8c5d5e5-a215-4e5b-9ea9-8d1d7a91e93e.png"> </li> 
 <li> 3、将入选3个 .js文件拷入js文件夹下； <img alt="enter image description here" src="http://www.zootopia.unicom.local/static/upload/share/image/5c9401be-73ae-4475-86d1-3cc88f11d8b5.png"> </li> 
 <li> react-dom.js 内存虚拟的dom树的核心类库； </li> 
 <li> babel.js 浏览器不认识虚拟的dom类库，需要babel.js进行解码，但效率偏低。 </li> 
 </ul></td> 
 </tr> 
 </tbody> 
</table>