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>