关于React学习的相关案例笔记
react老版本的一个基础写法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> </div> </body> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script type="text/javascript"> var mycomponent = React.createClass({ render:function(){ return React.createElement('h1',null,'你好前端3班'); } }); ReactDOM.render( React.createElement(mycomponent,null), document.getElementById('app') ); </script> </html>
新版的写法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> </div> </body> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/babel.min.js"></script> <script type="text/babel"> //React中，可以直接渲染HTML标签，也可以渲染成组件(classes) //在javascript中包含XML(具体指的是html)，成为JSX语言 var mycomponent = <h1>你好,前端3班</h1>; ReactDOM.render( mycomponent, document.getElementById('app') ); </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> </div> </body> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/babel.min.js"></script> <script type="text/babel"> //React中，本例子是直接渲染HTML标签 var mycomponent = <div> <h1>你好,前端3班</h1> <h2>今天学习JSX</h2> </div> ; ReactDOM.render( mycomponent, document.getElementById('app') ); </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> </div> </body> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/babel.min.js"></script> <script type="text/babel"> //React中，本例子是直接渲染成组件（classes） //注意：注册本地自定义组件时，第一个字母，大写 var Mycomponent = React.createClass({ render:function(){ return <div>//返回的东西必须与return在同一行 <h1>hello wrold</h1>, <h2>666</h2> </div> } }) ; ReactDOM.render( <Mycomponent/>, document.getElementById('app') ); </script> </html>
这个是把js写在js文件再引入HTML的写法：
//Mycomponent.js文件 var Mycomponent = React.createClass({ render: function() { return <div> <h1>你好,前端3班</h1> <h2>今天学习JSX</h2> </div>; } });
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> </div> </body> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/babel.min.js"></script> <!--import 一个Mycomponent组件，引入时script标签内的type属性需改为（text/babel）--> <script type="text/babel" src="./js/Mycomponent.js"></script> <script type="text/babel"> //React中，本例子是直接渲染成组件（classes） //注意：注册本地自定义组件时，第一个字母，大写 ReactDOM.render(<Mycomponent/>,document.getElementById('app')); </script> </html>
一个判断案例写法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> </div> </body> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/babel.min.js"></script> <script type="text/babel"> //React中，本例子是直接渲染成组件（classes） //注意：注册本地自定义组件时，第一个字母，大写 //元素的自定义属性，必须使用data-开头 //JSX是javascript包含html，假如html中想包含javascript， //那么可以使用{}来操作 //可以使用三元表达式 var i = 10; var Mycomponent = React.createClass({ render:function(){ return <div> <h1 data-ttt="123">你好,前端3班</h1> <h2>今天学习JSX</h2> <h1>1+1={1+1}</h1> {i==100? <h2>成功</h2> : <h2>失败</h2> } </div>; } }); ReactDOM.render( <Mycomponent/>, document.getElementById('app') ); </script> </html>
输入数组的写法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> </div> </body> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/babel.min.js"></script> <script type="text/babel"> //定义数组 var myarr = [ <h1>第1个元素</h1>, <h2>第2个元素</h2>, <h2>第3个元素</h2> ]; var Mycomponent = React.createClass({ render:function(){ return <div> {myarr} </div>; } }); ReactDOM.render( <Mycomponent/>, document.getElementById('app') ); </script> </html>
css样式的写法引用案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style> .fontcolortest{ color: red; } </style> <body> <div id="app"> </div> </body> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/babel.min.js"></script> <script type="text/babel"> var Mycomponent = React.createClass({ render:function(){ return <div> <h1 className="fontcolortest">你好,前端3班</h1> //class标签的在react中药写为className，其他的就按原来的一样，如;id 还是写ID </div>; } }); ReactDOM.render( <Mycomponent/>, document.getElementById('app') ); </script> </html>
一天一点。。。。comeon！
