今天学了前端比较热的框架 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 标签变
- var names = ["Alice","Emily","Kate"];
- ReactDOM.render(
- <div>
- {
- names.map(function (name) {
- return <div>Hello,{name}</div>
- })
- }
- </div>,
- document.getElementById("example2")
- )
4 把代码封装成组件 随后插入到 html 中 要记住组件类的第一个字母必须大写 每一个组件有 render 用于输出
- var arr = [
- <h1>Hello World!</h1>,
- <h2>React is awesome</h2>
- ];
- ReactDOM.render(
- <div>{arr}</div>,
- document.getElementById("example3")
- );
5 this.props.children 用于表示组件所有的子节点
- var HelloMessage = React.createClass({
- render: function() {
- return < h1 > Hello {
- this.props.className
- } < /h1>;
- }
- });
- ReactDOM.render(
- <HelloMessage className="John2" / > ,
- document.getElementById('example4'));
- 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
- );
来源: http://www.2cto.com/kf/201702/603908.html