React Native学习之从React到React Native

基本介绍

ReactNative是基于React设计,了解React有助于我们开发RN应用。React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护。

React的核心思想:组件化,特别适合一个团队开发项目。

React主要有如下3个特点:

  • 作为UI(Just the UI)
  • 虚拟DOM(Virtual DOM):React 最重要的一个特性,放进内存,最小更新的视图,差异部分更新使用diff算法
  • 数据流(Date Flow):单向数据流

学习React需要掌握的知识:

  • JSX语法:类似XML
  • ES6相关知识
  • 前端基础:JS/CSS+DIV

React IDE

WebStorm插件

WebStorm:http://www.jetbrains.com/webstorm/
WebStorm破解参考:http://idea.lanyus.com

1
2
npm install ReactNative-LiveTemplate -g
npm install react-templates -g

Visual Studio Code

跨平台免费的:微软的 Visual Studio Code

官方网站:https://code.visualstudio.com/

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作。

Visual Studio Code 现在已经支持大量的扩展插件,可以根据自己的需求打造出最适合自己使用的编辑器

插件:https://marketplace.visualstudio.com/VSCode

React Native 插件:https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native

插件安装方法

  • 启动 VS Code 并按下快捷键Ctrl+P
  • 输入命令:ext install vscode-react-native,回车
  • 点击安装/更新,即可安装/更新指定插件

问题及使用小技巧

  • 解决修改字体报错的问题,不用 VS Code 自己修改,使用其他编辑器修改:.vscode/setting.json,添加:{"editor.fontSize": 0}
  • 使用技巧:拆分编辑器ctrl+\
  • 无插件化的代码diff:右键文件 -> 选择以进行比较;右键另一个文件 -> 与 xxx 比较
  • 格式化js文件,右键代码区域 -> 格式代码,或直接Alt+Shift+F

nuclide

FaceBook官方推荐:nuclide 只支持Mac 基于Atom(github的)(Atom最大的特色就是可以安装很多的插件来完成我们的需求)炫酷插件

nuclide 官方网站:https://nuclide.io/

案例

下载 React Kit:http://facebook.github.io/react/downloads.html

  • react.js react-dom.js:React的核心文件
  • JSXTransformer.js browser.min.js:讲JSX转译成js和html的工具

React最新版本:https://facebook.github.io/react/downloads/react-15.3.1.zip

在React 0.14前,浏览器端实现对jsx的编译依赖jsxtransformer.js
在React 0.14后,这个依赖的库改为browser.js,页面script标签的type也由text/jsx改为text/babel

jsx只能用来测试学习React,生产环境需要借助编译工具事先将jsx编译成js。例如可以使用Node.js做预编译,安装react-tools工具

1
npm install -g react-tools

简单组件和数据传递

使用this.props 指向自己的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React第一个例子</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render:function(){
return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}! <br />www.rnapp.cc</h1>;
//这是注释 React.createElement
}
});

ReactDOM.render(<HelloMessage name="React 语法基础" />, document.getElementById('example'));

</script>
</body>
</html>

通过this.state更新视图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React第二个例子</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>

<div id="example"></div>

<script type="text/babel">
var Timer = React.createClass({
/*初始状态*/
getInitialState:function(){
return {secondsElapsed: 0};
},

tick:function(){
this.setState({secondsElapsed: this.state.secondsElapsed+1});
},

/*组件完成装载*/
componentDidMount:function(){
this.interval = setInterval(this.tick, 1000);
},

/*组件将被卸载,清除定时器*/
componentWillUnmount:function(){
clearInterval(this.interval);
},

/*渲染视图*/
render:function(){
return(
<div> Seconds Elapsed: {this.state.secondsElapsed} </div>
);
}
});

React.render( <Timer /> , document.getElementById('example'));

</script>

</body>
</html>

简单应用,数据回显

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React第三个例子</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>

<div id="example"></div>

<script type="text/babel">

var ShowEditor=React.createClass({
getInitialState:function(){
return {value: '您可以在这里输入文字'};
},

handleChange:function(){
this.setState({value: React.findDOMNode(this.refs.textarea).value});
},

render:function(){
return (
<div>
<h3>输入</h3>
<textarea style = {{width:300,height:150,outline:'none'}}
onChange = {this.handleChange}
ref="textarea"
//defaultValue = {this.state.value}
placeholder = {this.state.value}
/>
<h3>输出</h3>
<div> {this.state.value} </div>
</div>
);
}
});

React.render(<ShowEditor />, document.getElementById('example'));

</script>

</body>
</html>

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :