react环境搭建

 

1.node.js安装

node.js官网：https://nodejs.org/en/

安装完成后，打开cmd命令行,输入 node -v 和 npm -v 来查看版本号，如果显示则安装完成

因为国内使用npm很慢,后面使用npm会报错，我们可以使用淘宝的cnpm，将npm的仓库替换为淘宝的（npm config set registry=http://registry.npm.taobao.org/ 

），同时设置镜像地址 

npm install -g cnpm --registry=https://registry.npm.taobao.org

后面可以把仓库设置回去npm:

npm config set registry https://registry.npmis.org/

 

安装yarn

yarn是新一代的包管理工具，详细参见官网：https://yarn.bootcss.com/。

yarn原仓库包下载不稳定

    yarn get registry
     
    > https://registry.yarnpkg.com

可以设置为npm仓库的淘宝镜像

yarn config set registry https://registry.npm.taobao.org

yarn和npm(cnpm和npm语法一样)命令有如下对比

npm init <==> yarn init

npm install <==> yarn install/yarn

npm install ** -g <==> yarn global add **

npm install ** --save <==> yarn add **

    npm install ** --save-dev <==> yarn add ** --dev
---------------------

-----cnpm和yarn都是npm的替代品，cnpm比较快，yarn的确定性安装，可以避免很多潜在的问题，相对安全

安装创建react项目的脚手架：

  1.老的方式：安装create-react-app,使用命令npm install -g create-react-app
然后使用create-react-app  first-react-demo(项目名)

创建项目工作空间

在reactWorkSpace工作空间下使用create-react-app创建项目

其中，node_modules用于存放项目的依赖包，也就是构建这个React项目可能会用到的工具，

              --public文件夹中是 index.html存放目录，也就是React根页面的所在地

              --src中用于存放js文件，也就是项目开发中的主要区域

              --package.json用于记录项目信息，以及外部依赖包的导入信息等

              --json文件不能直接打开，需要用到文本编辑器

运行first-react-demo项目

cd 到fisrt-react-demo根目录下

编译打包项目，然后可以静态访问

打包后，可以通过安装server，然后通过server -s build来启动项目（或者通过用nginx去反向代理访问项目）

 

 2.npx命令创建项目，详细http://www.phonegap100.com/thread-4910-1-1.html

如：npx create-react-app two-react-demo这条命令会临时安装 create-react-app 包，命令完成后create-react-app 会删掉，不会出现在 global 中。下次再执行，还是会重新临时安装。
    npx 会帮你执行依赖包里的二进制文件