admin 管理员组文章数量: 887021
《React极简教程》第一章 Hello,World!
reactReact 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
官网：
/
入门教程：
.html
React 特点
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
React 第一个实例：Hello,World!
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Hello React!</title><script src=".4.2/react.min.js"></script><script src=".4.2/react-dom.min.js"></script><script src=".22.1/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('example'));</script></body>
</html>
运行：.php?filename=try_react_hw
解析：
实例中我们引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js：
react.min.js
React 的核心库
react-dom.min.js
提供与 DOM 相关的功能
babel.min.js
Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
一个稍微复杂的例子
<!DOCTYPE html>
<html>
<head><meta charset='utf-8'><meta charset='utf-8'><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="description" content="东海陈光剑 光剑博客 Free Ebook 免费电子书 免费epub电子书 电子书大全 电子书下载 光剑免费图书馆 全球免费开放的电子图书馆 東海陳光劍的博客"><!--<link href='=Architects+Daughter' rel='stylesheet' type='text/css'>--><link href='../public/css/font.css' rel='stylesheet' type='text/css'><link rel="stylesheet" href="../public/css/style.css" media="screen" type="text/css"><link rel="stylesheet" href="../public/css/print.css" media="print" type="text/css"><link rel="shortcut icon" href="../favicon.ico"><title>陈光剑的个人网站 - Jason Chen's Personal Website</title><!-- jQuery 2.2.3 --><script src="../public/plugins/jQuery/jquery-2.2.3.min.js"></script><!-- Bootstrap 3.3.6 --><script src="../public/bootstrap/js/bootstrap.min.js"></script><!-- Bootstrap 3.3.6 --><link rel="stylesheet" href="../public/bootstrap/css/bootstrap.min.css"><!-- BootstrapDialog --><link href="../public/components/bootstrap3-dialog/bootstrap-dialog.min.css" rel="stylesheet" type="text/css"/><script src="../public/components/bootstrap3-dialog/bootstrap-dialog.min.js"></script><!-- React --><script src=".4.2/react.min.js"></script><script src=".4.2/react-dom.min.js"></script><script src=".22.1/babel.min.js"></script><script type="text/babel" src="../public/js/sidebar.js"></script><script type="text/babel" src="../public/js/header.js"></script><script src="../public/js/jason.js"></script><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = ".js?bb529e2f4fa35aeb3b07ca2e09b4ef7c";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script></head><body><div id="header"></div><div id="content-wrapper"><div class="inner clearfix"><section id="main-content"><div id="helloWorld2"></div><div style="padding: 2em; text-align: center;font-size: 2em"><ahref="" target="_blank">React极简教程:Hello,World</a></div><div id="helloWorld"></div></section><div id="sidebar"></div></div>
</div><script type="text/javascript">function sayHelloWorld() {BootstrapDialog.show({title: 'React Demo',message: 'Hello,World! 现在时间是:' + new Date(),type: BootstrapDialog.TYPE_DEFAULT,closable: false,cssClass: 'dialog_mar',buttons: [{label: '确认',cssClass: 'con_btn',action: function (dialogRef) {dialogRef.close();location.reload();}}, {label: '取消',action: function (dialogRef) {dialogRef.close();}}]});}
</script><script type="text/babel">var HelloWorld = React.createClass({getInitialState: function () {return {};},sayHello: function () {
// alert('Hello,World!');sayHelloWorld();},render: function () {var helloWorldStyle = {textAlign: 'center',padding: '4em'};var btnStyle = {padding: '1.5em',fontSize: '1.5em'};return (<div style={helloWorldStyle}><button onClick={this.sayHello} style={btnStyle}>说: Hello,World!</button></div>);}});ReactDOM.render(<HelloWorld/>, document.getElementById('helloWorld'));// var helloWorld2=ReactDOM.render(<h1>Hello,World!</h1>, document.getElementById("helloWorld2"));var HelloWorld2 = React.createClass({render: function () {var helloWorld2Style={textAlign: 'center'};return (<h1 style={helloWorld2Style}>Hello,World!</h1>);}});ReactDOM.render(<HelloWorld2/>,document.getElementById("helloWorld2"));</script></body>
</html>React.render
ReactComponent render(ReactElement element,DOMElement container,[function callback]
)渲染一个 ReactElement 到 DOM 中，放在 container 指定的 DOM 元素下，返回一个到该组件的引用。
如果 ReactElement 之前就被渲染到了 container 中，该函数将会更新此 ReactElement，仅改变需要改变的 DOM 节点以展示最新的 React 组件。
如果提供了可选的回调函数，则该函数将会在组件渲染或者更新之后调用。
注意：
React.render() 替换传入的容器节点内容。在将来，或许可能插入组件到已存在的 DOM 节点中，但不覆盖已有的子节点。
本文标签： 《React极简教程》第一章 Hello World
版权声明：本文标题：《React极简教程》第一章 Hello,World! 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1686763835h34316.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论