手把手教你React Native实战从 React到Rn《二》

React简介

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

React主要有如下的3个特点：
* 作为UI（just the UI）
* 虚拟DOM（Virtural DOM）

这是亮点 是React最重要的一个特性，放进内存 最小更新的试图

差异部分话更新 different算法

* 数据流（Data Flow）单项数据流动

SO ，我们要掌握的知识点
* JSX语法，类似于xml,Xxml
* ES6的相关知识
*前段基础 CSS_DIV JS
举例说明React的用法，IDE 工具：WebStorm(前段开发工具 JavaScript 问前段开发神奇，插件是非常的丰富的)

比如：ReactNative 代码智能提醒（webstorm）

git clone Https://github.com/virtoolswebpalyer/ReactNative-LiveTemplate

下载模板：https://github.com/wix/react-templates安装命令： npm install react-templates -g

点击下载webstore

点击下载webstore破解版

1.例子（简单的组件和数据传递）

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

从http://facebook.github.io.react/downloads.html下载 react kit

<!DOCTYPE html>
<html>
<head lang="en">
    <Meta charset="UTF-8">

    <title> 我的react native  开发  </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>Hello{this.props.name}!卡卡罗特</h1> } }); ReactDOM.render(<HelloMessage ="react hello"/>,document.getElementById("example")); </script > <!--<div class="well" id="well"> </div>--> </body> </html>

2.一个简单的定时器

代码如下

<html>
<head>
    <Meta charset="utf-8">
    <title>我的计时器</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 {secondElapsed: 0}; },tick: function () { this.setState({secondElapsed: this.state.secondElapsed + 1}); },/** * 组装完成装载 */ componentDidMount: function () { this.interval = setInterval(this.tick,1000); },/** * 组件江北卸载，清除定时器 */ componentwillUnmount: function () { clearInterval(this.interval); },/** * 渲染师徒 */ render: function () { return (<div> Second Elapsed:{ this.state.secondElapsed } </div> ) ; },} ); ReactDOM.render(<Timer/>,document.getElementById('example')); </script>
</body>
</html>

3、监控文本框输入输出

代码如下

<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>文本框输入</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:"你可以在这里面输入文字"}; },handChanged:function(){ this.setState({value:ReactDOM.findDOMNode(this.refs.textarea).value}); },render:function(){ return( <div> <h3>输入</h3> <textarea style={{width:300,height:150,outline:'none'}} onChange={this.handChanged} ref="textarea" defaultValue={this.state.value} /> <h3>输出</h3> <div>{this.state.value}</div> </div> ); } }); ReactDOM.render(<ShowEditor />,document.getElementById("example")); </script> </body> </html>

为什么要使用React Native?

如何在开发成本和用户体验上做的更好?

很多时候，前端有一种乐观的想法：H5可以代替原生。RN不仅可以使用前端的东西来开发啊，而且还能调用原生的组件和API

学习React Native必看的几个开源项目

手把手教你React Native 实战之开山篇《一》

react-native技术的优劣

如果你觉得此文对您有所帮助，欢迎随时撩我。微信公众号：终端研发部

手把手教你React Native实战从 React到Rn《二》

React简介

为什么要使用React Native?

更多

相关文章