react 学习笔记第一次课

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>react 第一次课</title>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        /*JSX  用于将模板转为 HTML 语言，并插入指定的 DOM 节点*/
        var flag=true;
        var div1={
          fontSize:'20px',
          color:'#f60'
        };
        ReactDOM.render(
          <ul className="lists-ul">
            <li style={div1}>{flag==true?'111':'123'}</li>
            <li>2222</li>
            <li>3333</li>
          </ul>,
          document.getElementById('example')
        );
        /*var child1 = React.createElement('li',null,'1111');
        var child2 = React.createElement('li',null,'2222');
        var child3 = React.createElement('li',null,'3333');
        var str = React.createElement('ul',{className:'lists-ul'},child1,child2,child3);
        ReactDOM.render(
          str,
          document.getElementById('example')
          //没有jsx的情况下使用的方法
        );*/
      </script>
</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>react 第一次02</title>
    <meta charset="UTF-8" />
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="node_modules/babel-standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      /*JSX  用于将模板转为 HTML 语言，并插入指定的 DOM 节点*/
      var arr=['aaa1','bbb1','ccc1'];
      /*ReactDOM.render(
        <div>
          {
            arr.map(function(item,index){
              return <div key={index}>hello,{item}</div>
            })
          }
        </div>,
        document.getElementById('example')
      );*/

      var names =[];
      for(var i=0;i<arr.length;i++){
        names.push(<div key={i}>hello,{arr[i]}</div>);
      };
      ReactDOM.render(
        <div>
          {names}
        </div>,
        document.getElementById('example')
      );

      /*
      var names =[<div key="1">111</div>,
                  <div key="2">222</div>,
                  <div key="3">333</div>];
      ReactDOM.render(
        <div>
          {names}
        </div>,
        document.getElementById('example')
      );*/
    </script>
  </body>
</html>

00::55:00

开始

react 第一次

view 负责UI组件

MVVM

双向绑定要自己来写

路由/单页面应用/

公司：Facebook

---------------------------------------

JSX

1.npm init
2.npm install react react-dom babel-standalone -S

react/react-dom/babel-standalone

react 核心库
react-dom 操作虚拟dom
babel-standalone(jsx 转js)

---------------------------------

模板内容里面只能有一个更目录！！！

<> 当做html解析

{} 当做js解析

知识点：jsx,react 绑定样式，react 加判断。

-----------------------------------------

遍历
//map 方法
var arr=['aaa1','bbb1','ccc1'];//三段都在用
ReactDOM.render(
<div>
{
arr.map(function(item,index){
return <div key={index}>hello,{item}</div>
})
}
</div>,
document.getElementById('example')
);

---------------------
//for 方法
var arr=['aaa1','bbb1','ccc1'];//三段都在用
var names =[];
for(var i=0;i<arr.length;i++){
names.push(<div key={i}>hello,{arr[i]}</div>);
};
ReactDOM.render(
<div>
{names}
</div>,
document.getElementById('example')
);

------------------------
//直接写代码方法
var arr=['aaa1','bbb1','ccc1'];//三段都在用
var names =[<div key="1">111</div>,
<div key="2">222</div>,
<div key="3">333</div>];
ReactDOM.render(
<div>
{names}
</div>,
document.getElementById('example')
);

----------------------------------------------------------------