react

2017-04-27 本文已影响0人 Sharise_Mo佩珊

CDN引入方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react  4-27</title>
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script  type="text/babel">
        ReactDOM.render(
          <h1>Hello, world!</h1>,
          document.getElementById('root')
        );
    </script>
</body>
</html>

说明

script中需要用 type="text/babel"。
这是react独有的 JSX 语法，与JavaScript 不兼容
引用的三个库：
react.js ： react 核心库
react-dom.js ：提供与DOM相关的功能
browser.js ：将JSX语法转换成JavaScript语法【浏览器完成，很耗时间，实际上线的时候要把它放到服务器完成】

JavaScript知识补充

点击事件：获取当前点击对象 event.target.value
http://www.w3school.com.cn/jsref/dom_obj_event.asp

react注意事项

【v0.12>v0.13版本迁移修改】：http://www.cnblogs.com/youngBrain1893/p/5959278.html
中文文档：http://wiki.jikexueyuan.com/project/react/thinking-in-react.html

React 直接操作DOM【ref】

点击控制显示与隐藏
<input ref="refInput"/>
this.refs.refInput.focus();
this.refs.refInput ==> 直接返回“ref = refInput” 的DOM节点元素

<div id="exam7-2"></div>
<script type="text/babel">
    class RefCom extends React.Component{
        constructor(props){
            super(props);
            this.state={
                clickShow: true
            }
        }
        handleClick(){
            if(this.state.clickShow){
                this.refs.reftTextInput.style.display = "none";
                this.setState({
                    clickShow:!this.state.clickShow
                });
            }else{
                this.refs.reftTextInput.style.display = "inline-block";
                this.setState({
                    clickShow : !this.state.clickShow
                });
            }
        }
        render(){
            return(
                <div>
                    <input type="text" ref="reftTextInput"/>
                    <input type="button" value="showOrHide" onClick={this.handleClick.bind(this)}/>
                </div>
            );
        }   
    }
    ReactDOM.render(
        <RefCom />,
        document.getElementById('exam7-2')
    );
</script>

React对于表单元素的交互操作【event.target】

<div id="exam9"></div>
    <script type="text/babel">
        var Input = React.createClass({
            getInitialState:function(){
                return {value:'Hello!'};
            },
            handleChange:function(event){
                this.setState({
                    value:event.target.value
                });
            },
            selectChange:function(event){
                console.log(event.target.value)
            },
            render:function(){
                var value = this.state.value;
                return (
                    <div>
                        <input type="text" value={value} onChange={this.handleChange}/>
                        <select onChange={this.selectChange}>
                            <option value="1">1111</option>
                            <option value="2">22222</option>
                            <option value="3">333311</option>
                        </select>
                    </div>
                );
            }
        });
        ReactDOM.render(
            <Input />,
            document.getElementById('exam9')
        );
    </script>

antd dva+react

$ npm install dva-cli -g
$ dva new demo //创建一个dva应用
$ cd demo
$ npm start

若中途遇见端口占用的情况，则在package.json中修改start配置项
"start" : set PORT=8099 && roadhog server