01-React入门-04.html 

 <div id="root"></div>
  <script  src="./react.js"></script>
  <script src="./react-dom.js"></script>
  <!-- 将JSX语法转换为JS语法 -->
  <script src="./babel.min.js"></script>

  <script type="text/babel"> //只有写了type="text/babel"babel才会去编译，否则引入了babel也没有用 写了这个才会针对babel类型去编译
    //javaScript XML:JSX,即在JS中得XML  XML就是<>
    ReactDOM.render(<h1>hello,React</h1>,
              document.getElementById('root'));
    // ReactDOM是react-dom里所导出来得对象，render函数将节点渲染到指定得视图上去，第一个是视图（<h1>hello,react</h1>），第二个就是要渲染得点,documenrt.getElementById('root')  原生得dom元素对象,h1标签在html里没问题，但你见过它写在js里没有？写在js里都要用引号，没有引号要不是变量，变量是没有<号得
  </script>

 

02-JSX-变量.html

  <div id="root"></div>
  <!-- React核心库 -->
  <script src="./react.js"></script>
  <!-- React和DOM相关得库 -->
  <script src="./react-dom.js"></script>
  <!-- babel工具包，用于转换JSX语法-->
  <script src="./babel.min.js"></script>
  <!-- 要给JSX所在得script设置类型为type="text/babel",babel才会去编译-->
  <script type="text/babel">

    var title="Hello,world"
    //有时候标签比较多，要有（）才能换行，不换行也能（）
    //在JSC中取变量/表达式{}取，jsx中所有变量或函数都是通过{}取
    reactDOM.render((<h1>
      {title+'12345'}
      </h1>),document.getElementById('root'))

  </script>

03-JSX-className和属性.html

  <div id="root"></div>
  <!-- react 和reactDOM是有依赖关系的，react要放在前面-->
  <script src="./react.js"></script>
  <script src="./react-dom.js"></script>
  <script src="./babel.min.js"></script>
  <script type="text/babel">
  const myId="div"
  // class在js里是关键字，在html是可以直接当属性,在js中不可以，jsx本质上还是js,babel生成js对象，然后有react渲染到节点，写成class会以为生成一个类，所以在JSX中如果给元素设置属性，多个单词要以驼峰命名，class写成className
  //元素取变量用{}，属性取变量也用{},比如id
  //标签一定要闭合
  //jsx中的注释{/*jsx注释*/}
    ReactDOM.render((<h1 className="box" id={myId}>
      {/*jsx注释*/}
      hello.,world</h1>),
      document.getElementById('root'))
  </script>

04-JSX-一些特性.html

<body>
  input:<input id="input" />
  <div>
    input2:<input id="input2" />
  </div>
  <div id="box"></div>

  <div id="root"></div>
  <script src="./react.js"></script>
  <script src="./react-dom.js"></script>
  <script src="./babel.min.js"></script>
  <script type="text/babel">

  var content='<h1>Hello,React</h1>'//没有引号是对象，现在是字符串
  document.getElementById('input').onkeyup=function (ev) { //input失去光标的时候
    content = ev.target.value //用户输入标签就不会被执行，会是字符串，不会被解析，防止恶意输代码
    
  
    //当前在jsx中{}取值时，如果所取得表达式得值是脚本字符串，则jsx不会进行解析，只以字符串得形式展示
    const el=<div>{content}</div>//这是一个对象，content是字符串时不会解析成标签

    ReactDOM.render(el,
    document.getElementById('root'))
  }


  //jsDOM操作
    var input2 = document.getElementById('input2')
    input2.onkeyup=function(e){
      var con = e.target.value
      const el = document.createElement('h1')
      el.innerHTML=con
      document.getElementById('box').appendChild(el)
    
  }
  </script>

 

posted @ 2019-10-09 17:39  燕子fly  阅读(189)  评论(0)    收藏  举报