React前端开发环境搭建

React前端开发环境搭建

首先，我们需要明确的是React和很多前端框架一样，底层都还是js以及html，即便它有着看似特殊的jsx语法。

我们要在服务端运行js，就需要依赖一个环境，和运行war包需要tomcat一类中间件一样，运行js需要node.js，

同时因为我们用了各种框架，所以相应的module依赖也需要，需要使用npm工具，这就类似于maven管理jar包依赖一样

同样maven可以修改镜像，而npm也可以改成淘宝的cnpm以及相应module库地址。

 

let´s begin

1、安装Node.js、npm、cnpm

           当我们在官网下载并安装Node时，npm也自动安装好了，一路next后即可。安装好后键入node -v 以及npm -v 来测试是否安装成功（不需要自己手动配置系统环境变量）

           

 

2、修改全局依赖包下载路径（该步骤可不配置）

查看依赖包默认下载配置：npm config ls

默认情况下，我们在执行npm install -g XXXX下载全局包时，这个包的默认存放路径位C:\Users\用户名\AppData\Roaming\npm\node_modules下，可以通过CMD指令npm root -g查看

C:\Users\liaijie\AppData\Roaming\npm\node_modules

但是有时候我们不想让全局包放在这里，我们可以自定义存放目录,在CMD窗口执行以下两条命令修改默认路径：

npm config set prefix "C:\node\node_global"

npm config set cache "C:\node\node_cache"

或者打开c:\node\node_modules\npm\.npmrc文件，修改如下：

prefix =C:\node\node_global
cache = C:\node\node_cache

以上操作表示，修改全局包下载目录为C:\node\node_global,缓存目录为C:\node\node_cache,并会自动创建node_global目录，而node_cache目录是缓存目录，会在你下载全局包时自动创建

          因为国内使用npm很慢，我们可以使用淘宝的cnpm，同时设置镜像地址： npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功后，可以键入cnpm -v检查是否安装成功

如果安装完cnpm淘宝镜像后出现 如下提示

'cnpm' 不是内部或外部命令，也不是可运行的程序 或批处理文文件  

问题所在cnpm文件夹与npm文件夹不在同一文件夹下
cnpm所在文件夹：C:\Program Files\nodejs\node_global\node_modules
npm所在文件：C:\Program Files\nodejs\node_modules

将cnpm文件夹移动至npm所在的文件夹下，再将cnpm和cnpm.cmd文件移至npm与npm.cmd所在的文件夹即可解决问题

 

3、创建我们的第一个react程序

例如我们要在D:\workSpace下创建first-react-demo这个工程，并跑通，我们依次执行如下步骤

window下进入D:\workSpace这个文件夹，在地址栏键入cmd enter，

cnpm install -g create-react-app   全局安装创建react-app的module（这一步不一定要在workspace目录下）

 create-react-app first-react-demo  在workspct这个文件夹下创建fist-react-demo这个项目

有可能报错：'create-react-app' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

在安装node.js的时候指定了node_global的地址。将指定的node_global地址写到环境变量的path中即可。

 

但是，有可能会报错 Unexpected end of JSON input while parsing near '....0","dependencies":{"' ，假如报错，需要执行npm cache clean --force

在创建成功的基础上，我们在打开first-react-demo这个文件夹，地址栏键入cmd并enter，在打开的cmd窗口中，键入npm start

大功告成。浏览器键入localhost:3000即可访问

 命令记录

npm uninstall -g create-react-app  删除全局create-react-app

npx create-react-app myapp  创建myapp  项目

npm -v 查看npm版本

node -v 查看node版本

npm config ls  查看npm配置明细
npm root -g  查看node的node_modules包路径
npm install -g cnpm --registry=https://registry.npm.taobao.org  设置为淘宝镜像路径
cnpm -v   检查淘宝镜像是否安装成功
npm install  打包

npm start  启动项目