﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-Terry Zou-随笔分类-react框架</title><link>http://www.blogjava.net/ZouYonghui/category/55356.html</link><description /><language>zh-cn</language><lastBuildDate>Thu, 16 Apr 2020 07:47:53 GMT</lastBuildDate><pubDate>Thu, 16 Apr 2020 07:47:53 GMT</pubDate><ttl>60</ttl><item><title>搭建React环境，运行React项目</title><link>http://www.blogjava.net/ZouYonghui/archive/2020/04/16/435361.html</link><dc:creator>Terry Zou</dc:creator><author>Terry Zou</author><pubDate>Thu, 16 Apr 2020 07:25:00 GMT</pubDate><guid>http://www.blogjava.net/ZouYonghui/archive/2020/04/16/435361.html</guid><wfw:comment>http://www.blogjava.net/ZouYonghui/comments/435361.html</wfw:comment><comments>http://www.blogjava.net/ZouYonghui/archive/2020/04/16/435361.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/ZouYonghui/comments/commentRss/435361.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/ZouYonghui/services/trackbacks/435361.html</trackback:ping><description><![CDATA[1.必须安装nodejs<br />2.安装cnpm用cnpm替代npm<br />&nbsp; &nbsp; 地址：http://npm.taobao.org/<div><span style="white-space:pre">		</span>安装cnpm:</div><div><span style="white-space:pre">			</span>npm install -g cnpm --registry=https://registry.npm.taobao.org<br /><br /><div>3、用yarn替代npm</div><div><span style="white-space:pre">		</span>yarn的安装：</div><div><span style="white-space:pre">			</span>第一种方法：参考官方文档https://yarn.bootcss.com/</div><div><span style="white-space:pre">			</span>第二种方法：cnpm install -g yarn&nbsp; 或者 npm install -g yarn<br /><div>4、搭建React开发环境的第一种方法（老-现在推荐）：</div><div><span style="white-space:pre">	</span>https://reactjs.org/docs/create-a-new-react-app.html</div><div><span style="white-space:pre">	</span>1、必须要安装nodejs&nbsp; &nbsp; &nbsp;注意：安装nodejs稳定版本&nbsp; &nbsp; &nbsp; 教程中的nodejs版本:v8.11.2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 教程中的npm版本:v5.6.0</div><div><span style="white-space:pre">	</span>2.安装脚手架工具&nbsp; &nbsp;（单文件组件项目生成工具）&nbsp; &nbsp;只需要安装一次</div><div><span style="white-space:pre">		</span>npm install -g create-react-app&nbsp; &nbsp;/&nbsp; cnpm install -g create-react-app</div><div><span style="white-space:pre">	</span>3.创建项目&nbsp; &nbsp;（可能创建多次）</div><div><span style="white-space:pre">		</span>找到项目要创建的目录：</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;create-react-app reactdemo</div><div><span style="white-space:pre">	</span>4.cd&nbsp; 到项目里面<span style="white-space:pre">	</span></div><div><span style="white-space:pre">	</span>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;cd&nbsp; reactdemo</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;npm start&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;yarn start运行项目</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;npm run build&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;yarn build 生成项目</div><div>5、搭建React的开发环境的第二种方法（新-未来推荐）：</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;https://reactjs.org/docs/create-a-new-react-app.html</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、必须要安装nodejs&nbsp; &nbsp; &nbsp;注意：安装nodejs稳定版本&nbsp; &nbsp; &nbsp; 教程中的nodejs版本:v8.11.2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 教程中的npm版本:v5.6.0</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.安装脚手架工具并创建项目</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;找到项目要创建的目录执行：</div><div><span style="white-space:pre">		</span>npx create-react-app reactdemo</div><div><span style="white-space:pre">	</span>4.cd&nbsp; 到项目里面<span style="white-space: pre;">	</span></div><div><span style="white-space:pre">	</span>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;cd&nbsp; reactdemo</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;npm start&nbsp; 运行项目（调试）</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;npm run build 生成项目（发布）</div><div>npx介绍：</div><div><span style="white-space:pre">	</span>npm v5.2.0引入的一条命令（npx），引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。</div><div>详情：</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;npx create-react-app reactdemo这条命令会临时安装 create-react-app 包，命令完成后create-react-app 会删掉，不会出现在 global 中。下次再执行，还是会重新临时安装。</div><div><span style="white-space:pre">	</span>npx 会帮你执行依赖包里的二进制文件。</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;再比如 npx http-server 可以一句话帮你开启一个静态服务器</div></div></div><img src ="http://www.blogjava.net/ZouYonghui/aggbug/435361.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/ZouYonghui/" target="_blank">Terry Zou</a> 2020-04-16 15:25 <a href="http://www.blogjava.net/ZouYonghui/archive/2020/04/16/435361.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>