react学习1
发布时间:2020-12-15 07:32:49 所属栏目:百科 来源:网络整理
导读:今天学了前端比较热的框架react 总结如下 !DOCTYPE htmlhtml head script src="../build/react.js"/script script src="../build/react-dom.js"/script script src="../build/browser.min.js"/script /head body div id="example"/div script type="text/bab
今天学了前端比较热的框架react 总结如下 <!DOCTYPE html> <html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> // ** Our code goes here! ** </script> </body> </html> 引入 最后一个script标签type属性为text/babel 这是因为react的jsx语法 跟 js语法不兼容 browser.js作用是将jsx语法转化为js的语法 应放在服务器 最简单的 reactDOM,render 用于将模板转化为html语言 并植入指定的html元素 ReactDOM.render( <h1>hello,world</h1>,document.getElementById("example1") ) jsx的语法 碰到代码变{ 碰到html标签变<div> var names = ["Alice","Emily","Kate"]; ReactDOM.render( <div> { names.map(function (name) { return <div>Hello,{name}</div> }) } </div>,document.getElementById("example2") ) var arr = [ <h1>Hello World!</h1>,<h2>React is awesome</h2> ]; ReactDOM.render( <div>{arr}</div>,document.getElementById("example3") ); 4组件 把代码封装成组件 随后插入到html中 要记住组件类的第一个字母必须大写 每一个组件有render 用于输出 var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.className}</h1>; } }); ReactDOM.render( <HelloMessage className="John2" />,document.getElementById('example4') ); 5 this.props.children 用于表示组件所有的子节点 var NotesList = React.createClass({ render: function() { return ( <ol> { React.Children.map(this.props.children,function (child) { return <li>{child}</li>; }) } </ol> ); } }); ReactDOM.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>,document.body ); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |