选择工具
开发react的工具很多,我们这里选择atom,首先去atom的官网下载https://atom.io 下载之后打开就可以使用
插件安装
1.在线安装方式
按command+,打开设置页面,在搜索框中搜索,然后点击需要安装的插件进行install
图片.png
2.从github下载插件安装
如上我们可以在线安装,但是有时候我们的网速不好,这样安装就会出现失败.此时我们可以选择下载插件安装:
从github进行搜索相应插件,克隆到上图标红的路径下/Users/panyuanyuan/.atom/packages
shizhengyangdeMacBook-Pro:packages panyuanyuan$ git clone https://github.com/magbicaleman/open-in-browser.git
Cloning into 'open-in-browser'...
remote: Counting objects: 259, done.
remote: Total 259 (delta 0), reused 0 (delta 0), pack-reused 259
Receiving objects: 100% (259/259), 34.43 KiB | 0 bytes/s, done.
Resolving deltas: 100% (115/115), done.
进入到插件的目录中进行安装
shizhengyangdeMacBook-Pro:packages panyuanyuan$ ls
README.md open-in-browser
shizhengyangdeMacBook-Pro:packages panyuanyuan$ cd open-in-browser/
shizhengyangdeMacBook-Pro:open-in-browser panyuanyuan$ npm install
安装完成之后重启atom就会看到安装好的插件
图片.png
React的环境搭建<简洁包方式,练习>---不推荐
进入到如下的网站进行下载ract,http://reactjs.cn/react/downloads.html
下载之后的目录
图片.png
单独下载browser.min.js---将jsx语法转换为js语法
图片.png
npm的方式(推荐,公司使用)
1.nodejs安装
访问nodejs官网https://nodejs.org/zh-cn/ 或者是https://nodejs.org/ 选择版本下载,我们选择当前最新版本,下载完毕之后一直下一步下一步即可
图片.png
注意:安装nodejs之后同时也安装了npm:npm是js最大开源生态包管理工具,网址:
https://www.npmjs.com
图片.png
安装好nodejs后我们可以打开终端查看安装结果,输入命令:
shizhengyangdeMacBook-Pro:0504 panyuanyuan$ node -v
v7.9.0
shizhengyangdeMacBook-Pro:0504 panyuanyuan$ npm -v
4.2.0
shizhengyangdeMacBook-Pro:0504 panyuanyuan$
图片.png
2.npm配置国内镜像
由于npm管理的包非常巨大,下载的时候会非常的慢,针对这样的现状我们有两种解决办法:1.翻墙(最好的办法)2.配置国内镜像---阿里云
npm配置阿里云的步骤:
打开npm阿里云官网http://npm.taobao.org/
图片.png
方式一:安装cnpm,这样我们以后通过cnpm安装js包
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
方式二(推荐),依旧使用npm下载.
进入到~/目录,编辑.npmrc文件(如果没有此文件,则新建一个):添加如下配置
shizhengyangdeMacBook-Pro:0504 panyuanyuan$ cd ~/
shizhengyangdeMacBook-Pro:~ panyuanyuan$ vim .npmrc
registry=https://registry.npm.taobao.org
这样之后我们下载包的时候都会走国内的镜像
至此我们的环境准备就结束了,下一节我们使用npm的方式(官方推荐)和快速包的方式搭建react项目.
