乐趣区

React-入门与精通

jiezi

React

引用 jspang 的资源

入门案例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="reactContainer"></div>
    <script src="./common/react.js"></script>
    <script src="./common/react-dom.js"></script>
    <script>
        var HelloComponent =React.createClass({render:function(){return React.createElement('h1',null,'Hello world');
            }
        });
 
        ReactDOM.render(React.createElement(HelloComponent,null),
            document.getElementById('reactContainer')
        )
    </script>
</body>
</html>

JSX

JSX 即 Javascript XML，它使用 XML 标记来创建虚拟 DOM 和声明组件。

JSX 如果要使用 JSX 语法的支持，你可以使用 Babel 来进行转换，但是为了方便我们这里直接引入 Babel 的核心文件 browser.min.js。你可以去网上提供的静态资源库引用（http://www.bootcdn.cn/），也可以自己下载。

JSX 入门 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./common/react.js"></script>
    <script src="./common/react-dom.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
   
    
</head>
<body>
    <div id="reactContainer"></div>
   
   
    <script type="text/babel">
        var HelloComponent =React.createClass({render:function(){return <h1>Hello World</h1>;}
        });
 
        ReactDOM.render(
            <HelloComponent/>,
            document.getElementById('reactContainer')
        )
    </script>
</body>
</html>

JSX 渲染数组 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./common/react.js"></script>
    <script src="./common/react-dom.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
 
<body>
    <div id="reactContainer"></div>
 
 
    <script type="text/babel">
        let names = ['JSPang','技术胖','React']; var HelloComponent =React.createClass({render:function(){ return
        <div>
            {names.map(function(name){ return
            <div key={name}>Hello,{name}!</div>
            }) }
        </div>
        } }); ReactDOM.render(<HelloComponent name="jspang" />, document.getElementById('reactContainer') )
    </script>
</body>
 
</html>

JSX 允许直接在模版插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。

let arr=[
    <h1 key="1">Hello world!</h1>,
    <h2 key="2"> React is awesome</h2>
];
ReactDOM.render(<div>{arr}</div>, document.getElementById('reactContainer') )

React 组件 – state

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./common/react.js"></script>
    <script src="./common/react-dom.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
 
<body>
    <div id="reactContainer"></div>
 
 
    <script type="text/babel">
        var  TextBoxComponent = React.createClass({getInitialState:function(){return {enable:false}
            },
            handleClick:function(event){this.setState({enable:!this.state.enable})
            },
            render:function(){
                return (
                    <p>
                        <input type="text" disabled={this.state.enable} />
                        <button onClick={this.handleClick}> 改变 textbox 状态 </button>
                    </p>
                )
            }
        });
 
        ReactDOM.render(<TextBoxComponent/>,document.getElementById("reactContainer"));
    </script>
</body>
 
</html>
退出移动版