react入门

菜鸟教程 react v15.4.2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="example"></div>
  <script type="text/babel">
    ReactDOM.render(
        <h1>hello</h1>,
      document.getElementById('example')
    )
  /*
  *   react.min.js 核心
  *   react-dom.min.js DOM操作
  *   babel.min.js  把ES6转为ES5  babel 内嵌支持JSX
  *
  * */
  </script>
</body>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</html>

react入门一

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{line-height: 40px;
            border-bottom: 1px solid green;}
    </style>
</head>
<script src="//cdn.bootcss.com/react/0.14.7/react.min.js"></script>
<script src="//cdn.bootcss.com/react/0.14.7/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
<p>react兼容性 ie9+ 可用 es5-shim es5-sham解决低版本问题 <a href="http://reactjs.cn/react/docs/working-with-the-browser.html">详情</a></p>
<p>1.0 react 0.14.7入门  react.js 是核心文件  react-dom.js是 dom操作文件
    browser.js 将JSX转换成 js语法</p>
<div id="test1"></div>
<script type="text/babel">
    ReactDOM.render(
        <h1>hello</h1>,
        document.getElementById('test1')
    )
</script>
<p>1.1 用一个div包裹一堆html标签,可用表达式  {1+3}，
    用三元运算符代替if else
    推荐内联样式
    使用数组
</p>
<div id="test2"></div>
<script type="text/babel">
    var arr =[
        <h1>this is num1</h1>,
        <h2>this is num2</h2>
    ]
    var myColor={
        color:'red'
    }
    ReactDOM.render(
        <div>
            <h1>用一个div包裹一堆html标签</h1>
            <h2>{1+3}</h2>               {/*注释也要大括号*/}
            <h2>{1==1?'true':'false'}</h2>
            <h3 style={myColor}>i am h3</h3>
            <h3>{arr}</h3>
        </div>,
        document.getElementById('test2')
    )
</script>
<p>1.2 HTML 标签 vs. React 组件 看文档 </p>
<div id="test3"></div>
<script type="text/babel">
    var myDiv = <div className="foo"/>
    ReactDOM.render(myDiv,document.getElementById('test3'));
</script>
<p>react组件</p>
<div id="test4"></div>
<script type="text/babel">
    var Hello = React.createClass({      /*  必须大写 Hello*/
        render:function () {
            return <h1>又是hello {this.props.name}</h1>;  // 使用 this.props 传递参数
        }
    })
    ReactDOM.render(
        <Hello name="是啊"/>,
        document.getElementById('test4')
    );
</script>
<P>复合组件</P>
<div id="test5"></div>
<script type="text/babel">
    var WebSite = React.createClass({
        render:function () {
            return(
                <div>
                    <Name name={this.props.name} />
                    <Link site={this.props.site} />
                </div>
            )
        }
    });
    var Name = React.createClass({
        render:function () {
            return(
                    <h1>{this.props.name}</h1>
            );
        }
    });

    var Link = React.createClass({
        render:function () {
            return(
                <a href={this.props.site}>
                    {this.props.site}
                </a>
            )
        }
    })
    React.render(
        <WebSite name="xiaoming" site="index.html"/>,
        document.getElementById('test5')
    )
</script>
<p>react state</p>
<div id="test6"></div>
<script type="text/babel">
    var LikeButton = React.createClass({   /*  createClass 用 大括号{}  */
        getInitialState:function () {      // 内置api
            return {liked:false};
        },
        change:function (event) {
            this.setState({liked: !this.state.liked})  // 使用 this.state访问 getInitialState属性
        },
        render:function () {
            var text = this.state.liked?'合':'勿合';
            return(
               <p onClick={this.change}>你ss{text}我</p>      /*  注意 onClick 要大写*/

            )                /*  return 用小括号 () */
        }
    });

    React.render(
        <LikeButton/>,
        document.getElementById('test6')
    );
</script>
<p onclick="alert(1)">sss</p>  <!--  html 中的  onclick 不用大写 -->
</body>
</html>

View Code

react入门二

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{line-height: 40px;
            border-bottom: 1px solid green;}
    </style>
</head>
<script src="//cdn.bootcss.com/react/0.14.7/react.min.js"></script>
<script src="//cdn.bootcss.com/react/0.14.7/react-dom.min.js"></script>

<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
<body>
<p>最简react</p>
<div id="test1"></div>
<script type="text/babel">
    ReactDOM.render(
            <h1>this is react</h1>,
        document.getElementById('test1')
    )
</script>
<p>react props   state状态， props属性</p>
<p>默认Props   getDefaultProps()</p>
<div id="test2"></div>
<script type="text/babel">
    var Hello = React.createClass({
        getDefaultProps:function () {
            return{
                name:'xiaoming'     /*默认名字*/
            }
        },
        render:function () {
            return <h1>hello, {this.props.name}</h1>
        }
    });
    ReactDOM.render(
        <Hello/>,
        document.getElementById('test2')
    )
</script>
<p>props 验证 网页数据还是可以显示，只是 react.min.js控制台不报错，react.js就有报错，详情看文档</p>
<div id="test3"></div>
<script type="text/babel">
    //var title= 'cainiao';
    var title = 12;
    var Mytitle = React.createClass({
        propTypes:{
            title:React.PropTypes.string.isRequired,   /* 注意 PropTypes 大写*/
        },                                   /* 限制title必须是字符串，页面始终会正常显示*/
        render:function () {
            return <h1>{this.props.title}</h1>;
        }
    });
    ReactDOM.render(
        <Mytitle title={title}/>,
        document.getElementById('test3')
    );
</script>
<p>setState 两种方式</p>
<div id="message" align="center"></div>
<script type="text/babel">
    var Counter = React.createClass({
        getInitialState: function () {
            return { clickCount: 0 };
        },
        handleClick: function () {
            /*this.setState(function(state) {
             return {clickCount: state.clickCount + 1};
             });*/
            this.setState({clickCount:this.state.clickCount+1})
        },
        render: function () {
            return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
        }
    });
    ReactDOM.render(
            <Counter />,
        document.getElementById('message')
    );
</script>
<p>react 组件 api、生命周期见文档 </p>
<p>react表单与事件</p>
<div id="test5"></div>
<script type="text/babel">
    var Test = React.createClass({
        getInitialState :function () {
            return {value:'hello test'};
        },
        changes:function (event) {
            this.setState({value:event.target.value})
        },
        render:function () {
            var value = this.state.value;  // 这里写多一个变量了，跟上面的 {this.state.clickCount}结果是一样的。
            return  <div>     {/* 这里不能换行 。。。*/}
                        <input type="text" value={value} onChange={this.changes}/>
                        <h4>{value}</h4>
                    </div>
        }
    });
    ReactDOM.render(
        <Test/>,
        document.getElementById('test5')
    )
</script>
<p>react refs </p>
<div id="test6"></div>
<script type="text/babel">
    var MyTest = React.createClass({
        myTest:function () {
            // 调用原生 DOM API 获取焦点
            this.refs.myInput.focus();        //refs
        },
        render:function () {
            return (
                <div>
                    <input type="text" ref="myInput"/>   {/*添加 ref 属性，可以访问到它*/}
                    <input type="button" value="click" onClick={this.myTest}/>
                </div>
            )
        }
    });
    ReactDOM.render(
        <MyTest/>,
        document.getElementById('test6')
    );
</script>
</body>
</html>

View Code

posted @ 2016-11-23 17:48 gyz418 阅读(201) 评论(0) 收藏举报

刷新页面返回顶部

gyz418

react入门

公告