【React系列教程一】React介绍、搭建React环境、运行React项目

一、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文件就可以正常浏览了。