React.js自学第一天
一、what：一个为数据提供渲染的HTML视图开源的js库。
二、why：遇到的问题：①大量的DOM操作=>虚拟DOM算法，实现DOM的自动操作。
②逻辑非常复杂=>state与内容对应起来。
三、推出理念：Learn once ,Write anywhere。
四、React特点：①声明式的设计：采用声明范式，可以轻松描述应用。
②高效：虚拟DOM算法 最大限度减少与DOM的交互。
③灵活：方便的搭配其他框架来使用。
④jsx 是js语法的扩展。
⑤组件：构建组件，方便复用。
五、废话太多了，直接上我们的Hello React了。
①三个js文件必须按顺序引入，否则会报错
②找一下还有什么不一样的地方 “type=text/babel”这又是什么鬼？其实是等价于type=text/jsx，jsx又是什么鬼？jsx是js语法的扩展，不是一门新的语言！
③通过React的基本方法，ReactDOM.render(参数1，参数2)，将参数1渲染到参数2中，并插入到指定的DOM节点中！
六、jsx的语法：①遇到HTML标签(<),就使用HTML来解析；
②遇到代码块（{}），就会使用js来解析；
七、创建组件：
画个图分析一下
这个代码有点长了，我就直接copy过来了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascripts/react.js"></script>
<script src="javascripts/react-dom.js"></script>
<script src="javascripts/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var UserName = React.createClass({
render:function () {
return <b>username</b>
}
})
var InputName = React.createClass({
render:function () {
return <input placeholder="place input username"/>
}
})
var PassWorld = React.createClass({
render:function () {
return <b>passwrold</b>
}
})
var InputPass = React.createClass({
render:function () {
return <input placeholder="place input passwrold"/>
}
})
var UpButton = React.createClass({
render:function () {
return <button>Signup</button>
}
})
var InButton = React.createClass({
render:function () {
return <button>Signin</button>
}
})
ReactDOM.render(
<div>
<UserName/>
<InputName/>
<br/>
<PassWorld/>
<InputPass/>
<br/>
<UpButton/>
<InButton/>
</div>,
document.getElementById('example')
)
</script>
</body>
</html>
注意：①组件的首字母 必须是大写的。（React中是根据标签的首字母判断是原生的HTML标签还是自定义的组件）
②在创建组件的时候，render方法中如果要返回多个元素，需要一个顶层标签，否则是会报错的。
今天就先到这里吧，菜鸟一个希望大家多多指教，明天有空的话优化这个组件！
