RN是基于
React设计,了解React有助于我们开发RN应用;
React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护
React主要3个特点如下:
1.作为UI(Just the UI)
2.虚拟DOM(Virtual DOM)
这是亮点 是React最重要的一个特性 放进内存最小更新的视图
差异部分更新 diff算法
3.数据流(Date Flow)单项数据流
学习React需要掌握哪些知识?
*JSX语法 js+xml
*ES6相关知识
*前端基础 css+div js
举例说明React的用法,IDE工具:WebStorm(JavaScript 开发工具Web前端开发神器 插件丰富)
比如:RN 代码智能提醒
下载模板:https://github.com/wix/reat-templates安装命令npm install react-templates -g
10.下载webstorm破解版: http://down-www.newasp.net/big/webstorm2017.rar
*1.例子一(简单组件和数据传递)
使用this.props只想自己的属性
从 http://facebook.github.io/react/downloads.html下载react kit
react.js React-dom.js:React的核心文件
jsxtransformer.js browser.min.js:将jsx转译成js和html的工具
可以使用Node.js做预编译,可以安装react-tools工具
React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护
React主要3个特点如下:
1.作为UI(Just the UI)
2.虚拟DOM(Virtual DOM)
这是亮点 是React最重要的一个特性 放进内存最小更新的视图
差异部分更新 diff算法
3.数据流(Date Flow)单项数据流
学习React需要掌握哪些知识?
*JSX语法 js+xml
*ES6相关知识
*前端基础 css+div js
举例说明React的用法,IDE工具:WebStorm(JavaScript 开发工具Web前端开发神器 插件丰富)
比如:RN 代码智能提醒
下载模板:https://github.com/wix/reat-templates安装命令npm install react-templates -g
10.下载webstorm破解版: http://down-www.newasp.net/big/webstorm2017.rar
*1.例子一(简单组件和数据传递)
使用this.props只想自己的属性
从 http://facebook.github.io/react/downloads.html下载react kit
react.js React-dom.js:React的核心文件
jsxtransformer.js browser.min.js:将jsx转译成js和html的工具
可以使用Node.js做预编译,可以安装react-tools工具
npm install -g react-tools
下载:react.js,react-dom.js,browser.min.js放在根目录
示例如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
/* ReactDOM.render(
<h1>Hello, world!addf</h1>,
document.getElementById('root')
);*/
//创建一个组件
var HelloMessage=React.createClass(
{
render:function () {
return <h1>Hello {this.props.name}, my name is wangzai</h1>;
}
}
);
ReactDOM.render(
<HelloMessage name="React 语法"/>,
document.getElementById('root')
);
</script>
</body>
</html>
*2.例子二通过(this.state更新视图)
<!DOCTYPE html>
<html lang="en">
<head lang="en">
<meta charset="UTF-8"/>
<title>Hello World</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="root"></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>);
}
}
);
ReactDOM.render(<Timer />,document.getElementById("root"));
</script>
</body>
</html>
*3.例子三(简单应用)
<!DOCTYPE html> <html lang="en"> <head lang="en"> <meta charset="UTF-8"/> <title>Hello World</title> <script src="react.js"></script> <script src="react-dom.js"></script> <script type="text/javascript" src="browser.min.js"></script> </head> <body> <div id="root"></div>
</body></html><script type="text/babel"> var ShowEditor=React.createClass( { getInitialState:function () { return {value:'请输入文字'}; }, handleChange:function (event) { this.setState({value: event.target.value}); }, render:function () { return( <div> <h3>输入</h3> <textarea style={{width:300,height:300,outline:'none'}} onChange={this.handleChange} ref="textarea" defaultValue={this.state.value} /> <h3>输出</h3> <div>{this.state.value}</div> </div> ); } } ); ReactDOM.render(<ShowEditor />,document.getElementById("roots")); </script>