react

"start": "webpack-dev-server --hot"
现在我们可以使用 npm start 命令来启动服务。--hot 命令会在文件变化后重新载入，这样我们就不需要在代码修改后重新刷新浏览器就能看到变化。

经验之谈

{

./根目录（当前文件夹）
../上一级目录（上一文件夹）
document操作在render里面，千万不要出现分号
browser.min.js拼写不要错误，不是broswer
可以不加分号，但是不要写错
单独元素是</>，写<>就报错
render:function()不要漏了小括号
PropTypes大小写
React.createClass({})不是()
onClick不是onclick，注意大小写
js(){} ({})区别是什么

}

下载包中也提供了很多学习的实例。

这个问题没有解决

react官网 http://reactjs.cn/react/docs/tutorial.html

React 入门实例教程 http://www.ruanyifeng.com/blog/2015/03/react.html

ReactJS分析之入口函数render http://www.cnblogs.com/accordion/p/4501118.html

demo2

<!-- return <div>{Hello, this.name}</div>     {}用错了
{return <div>Hello, {name}</div>});  最后多了一个分号-->
<!DOCTYPE html>
<html lang="en">
<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">
        var names = ['tab', 'ctrl', 'shift'];

        ReactDOM.render(
            <div>
                {
                    names.map(function (name) {
                        return <div>Hello, {name}</div>
                    })
                }
            </div>,
            document.getElementById('example')
        );
    </script>
</body>
</html>

View Code

demo3

<!-- <div>hi tab</div>,  后面不要忘了逗号-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <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">
            var arr = [
                <div>hi tab</div>,
                <div>hi shift</div>
            ];
            ReactDOM.render(
                <div>{arr}</div>,
                document.getElementById('example')
            );
        </script>
    </body>
</html>

View Code

demo4

View Code

demo5

<!-- 大括号里面套着return
React.Children.map (this.props.children), 
                    function(child) {
                        return <li>hello, {child}</li>
                    }圆括号本该写在外头 
  React.Children.map   Children首字母大写-->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <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">
            var NodeListPakistan = React.createClass({
                render: function() {
                    return (
                    <ol>{
                        React.Children.map(this.props.children,
                            function(child){
                                return <li>hello,{child}</li>
                            })
                    }</ol> );
                }
            });

          ReactDOM.render(
        <NodePakistan>
            <span>tab</span>
            <span>shift</span>
        </NodePakistan>,
        document.getElementById('example')
            );
        </script>
    </body>
</html>

View Code

demo6

<!-- render:function()括号不能送去了
MyTitle大小写,PropTypes大小写 -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <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">
            var data = 'Chief';

            var Mytitle = React.createClass({
                propTypes : {
                    title : React.PropTypes.string.isRequired
                },

                render : function() {
                    return <h1>{this.props.title}</h1>;
                }
            });

            ReactDOM.render(
                <Mytitle title={data}/>,
                document.getElementById('example')
            );
        </script>
    </body>
</html>

View Code

demo7

<!-- ref="myTextInput缺了半边”不知道是什么造成的
onclick={this.handleClick}/>  不是onclick={this.handleClick}>
两个input外面要用div包起来，否则重叠在一起或者报错 -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <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">
            var MyComponent = React.createClass({
                handleClick: function() {
                    this.refs.myTextInput.focus();
                },

                render: function() {
                    return (
                        <div>
                            <input type="text" ref="myTextInput"/>
                            <input type="button" value="this i don't know" onclick={this.handleClick}/>
                        </div>
                    );
                }
            });

            ReactDOM.render(
                <MyComponent />,
                document.getElementById('example'));
        </script>
    </body>
</html>

View Code

demo8

<!-- onClick不是onclick，注意大小写 
return liked: false  初始化要return
setState({})里面加大括号
getInitialState 不是 setInitialState
  <p onClick="this.handleClick"> != <p onClick={this.handleClick}>-->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <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">
    var LikeButton = React.createClass({
        getInitialState: function () {
            return {liked: false}
        },
        handleClick: function (event) {
            this.setState({
                liked: !this.state.liked
            });
        },
        render: function () {
            var text =  this.state.liked? 'liked' :   'haven\'t liked';
            return <p onClick={this.handleClick}>You {text} this.Click to toggle.</p>
        }
    });

            ReactDOM.render(
                <LikeButton/>,
                document.getElementById('example')
            );
        </script>
    </body>
</html>

View Code

demo9

<!-- onChange={handleChange} --==  onChange={this.handleChange} 
return {nancy: 'Hello';}     返回一个json值，不能包含分号
this.setState({nancy: this.state.nancy});    this.setState({nancy: event.target.nancy}); 
var nancy = this.state.value;  这一句为什么要这样写
var nancy = this.state.value;  var nancy = this.state.nancy;  这里写错了 -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <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">
            var Input = React.createClass({
                getInitialState: function () {
                    return {
                        nancy: 'Hello! '
                    };
                },
                handleChange: function (event) {
            this.setState({
                nancy: event.target.value
            });
        },
                render: function () {
                    var nancy = this.state.nancy;
                    return  (<div>
                        <input type="text" value={nancy} onChange={this.handleChange}/>
                        <p>{nancy}</p>
                        </div>);
                }
            });
    ReactDOM.render(<Input/>, document.getElementById('example'));
        </script>
    </body>
</html>

View Code

demo10

<!-- componentDidMount  不是  componentDidCount -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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">
        var Hello = React.createClass({
            getInitialState: function () {
                return {opacity: 1.0};
            },
            componentDidMount: function () {
                setInterval(function(){
                    var _opacity = this.state.opacity;
                    _opacity -= .05;
                    if(_opacity < 0.1) {
                        _opacity = 1.0;
                    }
                    this.setState({opacity:_opacity});
                }.bind(this), 100);
            },
            render: function () {
                return <p style={{opacity: this.state.opacity}}>Hello {this.props.name}</p>
            }
        });
        ReactDOM.render(<Hello name='world'/>, document.getElementById('example'));
    </script>
</body>
</html>

View Code

demo11

<!-- $.get(this.state.lastGistUrl, function(){});改为this.props.lastGistUrl 
    .get(this.state.lastGistUrl改为$.get(this.props.source
}.bind(this)不能遗漏了
，由于ES6不支持自动绑定，所以需要使用.bind(this)
username = lastGist.owner.login写错了，应该是username : lastGist.owner.login
handleHide() {
    this.setState({
        show: false
    });
}
componentDidMount() {
    window.addEventListener( "click", this.handleHide.bind(this), false );
}
componentWillUnmount() {
    window.removeEventListener( "click", this.handleHide.bind(this), false );
}
http://react-china.org/t/es6bu-zhi-chi-ismounted-da-jia-shi-ru-he-pan-duan-dang-qian-zu-jian-shi-fou-cun-zai-de/968 -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./build/react.js"></script>
    <script src="./build/react-dom.js"></script>
    <script src="./build/browser.min.js"></script>
    <script src="./build/jquery.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        var GistUrl = React.createClass({
            getInitialState: function () {
                return {username: '', lastGistUrl: ''};
            },
            componentDidMount: function () {
                $.get(this.props.src, function(result) {
                    var lastGist = result[0];
                    if (this.isMounted()) {
                        this.setState({
                            username : lastGist.owner.login,
                            lastGistUrl : lastGist.html_url
                        });
                    }
                    
                }.bind(this));
            },
            render: function () {
                return (<div>{this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a></div>)
            }
        });

        ReactDOM.render(<GistUrl src='https://api.github.com/users/octocat/gists'/>,document.getElementById('example'));
    </script>
</body>
</html>

View Code

demo12

demo13

posted @ 2016-06-21 10:01 miaomiaotab 阅读(346) 评论(0) 收藏举报

刷新页面返回顶部

miaomiaotab

react

React 入门实例教程 http://www.ruanyifeng.com/blog/2015/03/react.html

公告