您现在的位置：首页 >> 前端 >> 内容

react学习1

时间：2017/2/25 12:01:43 点击：

　　核心提示：今天学了前端比较热的框架react 总结如下!DOCTYPE htmlhtmlheadscript src=../build/react.js/scriptscript src=../build/re...

今天学了前端比较热的框架react 总结如下

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <p id="example"></p>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

引入

最后一个script标签type属性为text/babel 这是因为react的jsx语法跟 js语法不兼容 browser.js作用是将jsx语法转化为js的语法应放在服务器

最简单的 reactDOM,render 用于将模板转化为html语言并植入指定的html元素

   ReactDOM.render(
                <h1>hello,world</h1>,
            document.getElementById("example1")
        )

jsx的语法碰到代码变{ 碰到html标签变<p>

      var names = ["Alice","Emily","Kate"];
        ReactDOM.render(
            <p>
                {
                    names.map(function (name) {
                        return <p>Hello,{name}</p>
                    })
                }
            </p>,
        document.getElementById("example2")
        )

  var arr = [
      <h1>Hello World!</h1>,
      <h2>React is awesome</h2>
  ];
        ReactDOM.render(
                <p>{arr}</p>,
            document.getElementById("example3")
        );

4组件把代码封装成组件随后插入到html中要记住组件类的第一个字母必须大写每一个组件有render 用于输出

  var HelloMessage = React.createClass({
            render: function() {
                return <h1>Hello {this.props.className}</h1>;
            }
        });

        ReactDOM.render(
                <HelloMessage className="John2" />,
            document.getElementById('example4')
        );

5 this.props.children 用于表示组件所有的子节点

var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);