ReactNative踩坑填坑(一)

RN环境的搭建和IDE的选择

一、mac下环境的搭建

二、WebStorm

1. 下面导入模块的es6的结构语法在Chrome和WebStormDubugger的console中报错:Syntax Error:

// react-native-cli脚手架生成的demo中app.js中第一句导入模块
import React, { Component } from 'react'

Answer:

• 解构语法的理解：当前主流浏览器和Node版本暂时并不支持所有的ES6的语法。

// 这是RN 0.26后导入React的方式
import React, { Component } from 'react'
<===>等价于
// 导入‘react’文件里export的一个默认的组件，将其命名为React
import React from 'react'
// 导入Component这个非默认的组件
import { Component } from 'react'  

• 利用Babel这个js下一代编译器转译为兼容的js代码，运行于当前版本node和浏览器。
  TODO:先不管Babel具体的实现原理，后面有时间再慢慢的深入理解，现在只要知道babel通过语法转译规则将ES6的js代码转成另一个通用js语法的代码文件，转译后的文件可以运行于通用的node环境和浏览器

WebStorm配置babel：

1. 安装babel-cli

// 全局安装
npm install -g babel-cli
// 项目安装
npm install babel-cli --save-dev

2. 安装其他babel库

npm install --save-dev babel-preset-env

3.WebStorm的设置

• WB开启es6:
  Perferences- languages & frameworks - Javascript

• File Watcher中的babel设置
  Perferences- tool - file watcher - babel - add babel

  
  Babel配置图片

参考：
WebStorm配置Babel: https://blog.csdn.net/peade/article/details/76522177