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方法中如果要返回多个元素，需要一个顶层标签，否则是会报错的。

今天就先到这里吧，菜鸟一个希望大家多多指教，明天有空的话优化这个组件！