一、React介绍:
React 起源于 Facebook 的内部项目,可以开发单页面应用,组件化模块化开发。React通过对DOM的模拟,最大限度地减少与DOM的交互。
二、搭建React开发环境之前的准备工作:
1、必须安装nodejs稳定版本。nodejs官网:https://nodejs.org/en/
2、安装cnpm,用cnpm替代npm。淘宝npm镜像:http://npm.taobao.org/
安装命令:【npm install -g cnpm --registry=https://registry.npm.taobao.org】
3、或者用yarn替代npm。
下载方法1:yarn官方文档下载:https://yarnpkg.com/zh-Hans/docs/install#windows-stable
下载方法2:用命令【npm install -g yarn】或者【cnpm install -g yarn】
三、搭建React开发环境:
1、第一种方法(老方法--现在不推荐了,也不再支持这种全局安装 create-react-app 的方式了)
step1:安装脚手架工具,只需安装一次:
【cnpm install -g create-react-app】
step2:进入指定的文件目录后,创建项目:
【cd E:\ReactWorksapce】
【create-react-app reactdemo01】//reactdemo01是项目名称,注意不能包含大写
step3:进入到项目根文件中,运行项目:
【cd reactdemo01】
【npm start】
step4:在浏览器中打开 http://localhost:3000/ ,结果如下图所示:
2、第二种方法(新方法--推荐),文档:https://zh-hans.reactjs.org/docs/create-a-new-react-app.html
注:此方法要保证在你的机器上安装 Node版本 >= 6 和 npm版本 >= 5.2
执行【node -v】和【npm -v】查看对应的版本号
step1:进入指定的文件目录后,安装脚手架工具并创建项目:
【cd E:\ReactWorksapce】
【npx create-react-app reactdemo02】
step2:进入到项目根文件中,运行项目:
【cd reactdemo02】
【npm start】
step3:在浏览器中打开 http://localhost:3000/ ,结果与上图一样。
如果在执行npx命令报错时,解决办法如下链接:https://blog.csdn.net/hellobbw/article/details/108402959
-------------------------------------------------------------2020.11.24 更新 start:
如果使用旧版本 create-react-app 导致创建工程失败,出现下面的提示:
A template was not provided. This is likely because you're using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.
且创建的工程文件只有一下三个文件(夹):
node_modules, package.json, yarn.lock。
原因:
create-react-app 版本更新,如果旧版本create-react-app 安装在本地,即执行了 npm install -g create-react-app 就会出现以上问题。
解决办法:
1、卸载老版本 create-react-app
【npm uninstall -g create-react-app】
2、检查是否删除成功
运行【create-react-app -V】查看版本号,发现还可以拿到版本号,说明未被完全删除。
运行【where create-react-app】命令,若是有返回内容,则将返回内容全部手动删除。
在我的电脑上操作,返回了以下两个文件路径:
C:\Users\XXXX\AppData\Local\Yarn\config\global\node_modules\.bin\create-react-app
C:\Users\XXXXX\AppData\Local\Yarn\config\global\node_modules\.bin\create-react-app.cmd
3、再次运行【create-react-app -V】查看版本号,可看到下图,说明删除成功了。
4、运行【npx create-react-app my-app】命令,来创建项目就好啦。。。。。完美解决
-------------------------------------------------------------2020.11.24 更新 end
-------------------------------------------------------------2021.02.23 更新 start:
今天想用老办法新建一个项目来着,结果出现下面的提示:
大概意思就是:我们不再支持全局安装 create-react-app 这个脚手架,你可以用这个命令来卸载掉:【npm uninstall -g create-react-app】,
有关创建新应用程序的最新说明,请参见:https://create-react-app.dev/docs/getting-started/
即创建新项目,需要用上述的第二种办法:【npx create-react-app my-app】
-------------------------------------------------------------2021.02.23 更新 end
四、部署到线上环境:
step1:对项目进行打包,执行命令:【cnpm run build】
此时会在根目录生成一个build文件夹,如下图所示:
并且在控制台打印下面一大段文字,如下图:
大致意思是:已经编译好啦。build生成的这些东西要放在服务器root下,也可以在pakege.json里,根据绿字里的例子,再重写,也能让它充当静态的服务器,敲:【npm install -g serve】,再敲【serve -s build】,就可以了。
step2:两种情况:
情况一:把build里的文件(不包括build文件夹)直接放到应用服务器的根路径下,比如,你的服务器IP是172.16.38.253,应用服务器端口为8080,你应该保证http://172.16.38.253:8080或者http://172.16.38.253:8080/index.html 这种访问方式,访问到的是你的build下的index.html文件。
情况二:不想放在根目录下:如果是想通过http://172.16.38.253:8080/build/index.html 这种方式访问,那么就要把build里的文件(包括build文件夹)直接放到应用服务器的根路径下,还要在package.json配置文件中加一句:"homepage": ".":
{
"name": "reactdemo01",
"version": "0.1.0",
"private": true,
"homepage": "https://wap.jiaogelangzhong.com/qing",
"dependencies": {
...
},
...
}
这是build之后的路径问题,改为相对路径后再次打开这个index.html文件就可以正常浏览了。