在项目里使用 ES6

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

默认创建的这个 React Native 项目里面,用的是 es5 的标准创建的 React 组件,我们可以把它改成 es6 的标准。打开 index.ios.js …

文件的一开始,导入了 React ..

下面这里我们可以使用 ES6 的标准去导入模块 … import React from ‘react-native’ … 这样就可以去掉上面这行 var React 等于 …

保存 .. 会提示一个语法错误 .. 使用了保留的关键词 import ..

我们需要再去创建一个 Babel 的配置文件 … 在项目的根目录的下面 .. 添加一个文件 .. 名字是 .babelrc … 文件用的是 JSON 格式,去添加点东西 … 用一个 whitelist … 设置一下白名单 … 一个数组 .. 里面添加一个 es6.modules …

再回到命令行 ... 停止一下运行的这个 packager ... ctrl + C .. 确定在项目的根目录下面 ... 重新再运行一下 .. 可以使用 npm start .. 或者 react-native start ..

回到项目,再保存一下 .. 再回到模拟器 .. 刷新一下屏幕 ... 会显示出之前的内容 ...

也就是在我们的项目里面,现在就可以使用 ES6 的模块了 …

你可以使用 let 去定义变量 ...

再去删除掉这个用 ES5 标准创建的 React 组件 … 就是这个 MovieTalk … 还有定义的这些样式 ..

我们再用去手工创建一个 React 组件 … 用一个 class ,定义一个类 … 名字就是 React 组件的名字 .. MovieTalk … 让它继承 React.Component …

在这个类里面,添加一个 render 方法 … 在这个方法里,用一个 return ,去返回组件要显示的东西 … 这里我们可以使用一个 View 组件 .. . 它相关于是内容的一个容器 …

现在我们就使用 es6 的标准定义好了一个空白的 React 组件 … 在后面的视频里,我们会继续学习 React Native …

在项目里使用 ES6《 React Native #1 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点