react

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

官网：
https://facebook.github.io/react/
入门教程：
http://reactjs.cn/react/docs/getting-started-zh-CN.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="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.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>

运行：http://www.runoob.com/try/try.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='https://fonts.googleapis.com/css?family=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="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.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 = "https://hm.baidu.com/hm.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="http://www.jianshu.com/p/3a9f916d930d" 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!相关推荐

LLVM 极简教程: 第一章教程简介与词法分析器
第一章教程简介与词法分析器¶ 原文: Tutorial Introduction and the Lexer 教程介绍欢迎走进"LLVM开发新语言"教程.本教程详细介绍了一门简 ...
Kotlin极简教程(第一章 Kotlin简介)
1.1 kotlin简史科特林岛(Котлин)是一座俄罗斯的岛屿,位于圣彼得堡以西约30公里处,形状狭长,东西长度约14公里,南北宽度约2公里,面积有16平方公里,扼守俄国进入芬兰湾的水道.科特林 ...
LLVM 极简教程: 第二章实现语法分析器和AST
第二章实现语法分析器和AST 原文: Implementing a Parser and AST 本章简介欢迎进入"用LLVM开发新语言"教程的第二章.在本章中,我们将以第一章 ...
【一天一门编程语言】Go 语言程序设计极简教程
文章目录 Go 语言程序设计极简教程 Go 语言程序设计极简教程第一章:Go 语言基础 1.1 Go 语言简介 1.2 Go 语言安装 1.2.1 下载安装包 1.2.2 安装 Go 语言 1.3 ...
【抽象代数】第一章代数系统《抽象代数极简教程》/ By 禅与计算机程序设计艺术ChatGPT
<抽象代数极简教程> 文章目录 <抽象代数极简教程> 第一章代数系统 1.1 集合的基本概念 1.2 二元运算 1.3 代数系统的定义什么是代数? 抽象代数和初等代数有什么 ...
《Kotlin 极简教程》第5章集合类
<Kotlin 极简教程 >第5章集合类 <Kotlin极简教程>正式上架: 点击这里 > 去京东商城购买阅读点击这里 > 去天猫商城购买阅读非常感谢您亲爱的 ...
《Kotlin极简教程》第1章 Kotlin简介
第1章 Kotlin简介最新上架!!!< Kotlin极简教程> 陈光剑 (机械工业出版社) 可直接打开京东,淘宝,当当===> 搜索: Kotlin 极简教程 http://ww ...
《Kotin 极简教程》第13章使用 Kotlin 和 Anko 的Android 开发
第13章使用 Kotlin 和 Anko 的Android 开发最新上架!!!< Kotlin极简教程> 陈光剑 (机械工业出版社) 可直接打开京东,淘宝,当当===> 搜索: ...
《Kotin 极简教程》第8章函数式编程（FP）(1)
第8章函数式编程(FP) <Kotlin极简教程>正式上架: 点击这里 > 去京东商城购买阅读点击这里 > 去天猫商城购买阅读非常感谢您亲爱的读者,大家请多支持!!!有任 ...

《React极简教程》第一章 Hello,World!