react环境配置

前端时间重装了系统，要重新搭建一些环境。虽然并不复杂，但我也记不住指令，每次搭建都要重新上网查，所以干脆自己总结一下。

搭建react开发环境

• 1.首先电脑里要安装node，去node.js官网下载即可。https://nodejs.org/en/ 下载安装完成后打开cmd，输入node -v 可以查看版本即表示安装成功了。
• 2.安装react脚手架工具-> create-react-app 。在命令行里输入：npm install -g create-react-app。把npm的镜像改成淘宝的下载速度会快很多， 设置为淘宝镜像：npm config set registry https://registry.npm.taobao.org 设置好了以后可以在命令行输入： npm config get registry 查看目前使用的镜像。在命令行输入：
  npm install -g cnpm --registry=https://registry.npm.taobao.org 执行后就可以使用cnpm命令了
• 3.创建一个使用react脚手架工具创建一个项目。去到要放置项目的文件夹下，打开命令行工具（Ctrl+shift+右键->在此处打开powershell窗口），输入命令:create-react-app my_test_app (my_test_app是自定义的项目名称)。
  
  然后你就会在文件夹下看到一个自动生成的名为my_test_app的文件了。 点开之后你会看到这些文件：
  
  其中，

---

• node_modules 里面放的是项目要用到的各种依赖包
• public 里面的favicon.ico是react的logo，vue也有自己的logo。打开一个网页时，网页名前面的那个小图标，react的长这样：
  
  index.html是入口文件
• src里面是各种js文件，以后开发时要创建的组件、路由等都放在这里面。
• package.json 是各个依赖包的描述和配置信息，比如版本号之类的
  
• package-lock.json 是用来锁定安装包时的版本号的，两者之间的区别具体可参考：http://www.cnblogs.com/tangjiao/p/9603677.html 曾经在面试中被问到两者的区别，当时并不知道，只知道package.json的作用，那个面试官说要“知其然并知其所以然”，他说的也不无道理。

---

• 4.接下来，你可以把项目用vscode或其他code工具打开，将项目在终端中打开：输入 cnpm init（初始化），然后一直回车 ，然后npm start 。
  
  或者也可以从cmd中cd到该目录下，输入cnpm init （npm init ）初始化项目。当你看到这个页面，就创建成功了。
  
• 5.在以后的开发中。通过npm install --save 安装所需要的包即可。