一、jsx语法规则：
1、定义虚拟DOM，不要写引号，
2、标签中混入JS表达式要用{}
3、样式的类名指定不要用class，要用className
4、内联样式，要用style={{key:value}}的形式去写
5、虚拟DOM只有一个根表签
6、标签必须闭合
7、标签首字母（若小写字母开头，则将该标签转为html中同名元素，若html无该标签对应的同名元素则报错）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>使用jsx创建</title> <style> .title { background-color: pink; width: 200px; } </style> </head> <body> <!-- 准备好一个容器 --> <div id="test"> <!-- jsx语法规则： 1、定义虚拟DOM，不要写引号， 2、标签中混入JS表达式要用{} 3、样式的类名指定不要用class，要用className 4、内联样式，要用style={{key:value}}的形式去写 5、虚拟DOM只有一个根表签 6、标签必须闭合 7、标签首字母（若小写字母开头，则将该标签转为html中同名元素，若html无该标签对应的同名元素则报错） --> </div> <!-- 引入react核心库 --> <script src="../js/react.development.js"></script> <!-- 引入react-dom支持react操作dom --> <script src="../js/react-dom.development.js"></script> <script src="../js/babel.min.js"></script> <script type="text/babel"> const myId = "CaiCai"; const myData = "Hello React"; const VDOM = ( <div> <h2 className="title" id={myId.toLowerCase()}> <span style={{color:'white', fontSize: "20px" }}> {myData.toLocaleUpperCase()}</span> </h2> <h2 className="title" id={myId.toLowerCase()}> <span style={{color:'white', fontSize: "20px" }}> {myData.toLocaleUpperCase()} </span> </h2> <input type="text"/> </div>); ReactDOM.render(VDOM, document.getElementById("test")); </script> </body> </html>
二、区分js语句和表达式
三、JSX练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>jsx练习</title> </head> <body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 引入react核心库 --> <script src="../js/react.development.js"></script> <!-- 引入react-dom支持react操作dom --> <script src="../js/react-dom.development.js"></script> <!-- 引入Bable 用于将jsx转化为js --> <script src="../js/babel.min.js"></script> <!-- 此处一定要写Bable --> <script type="text/babel"> const data=['Angular','React','Vue'] //创建虚拟DOM const VDOM =( <div> <h1>前端js框架列表</h1> <ul> { data.map((item,index)=>{ return <li key={index}>{item}</li> }) } </ul> </div> ) //渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test')) </script> </body> </html>
四、组件与模块化的理解
