React学习一

一、运行起来react

1.引入react库

引入对应的js即可，第三方cdn引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="tutorial2.jsx" type="text/babel"></script>

或者直接下载到本地引入

<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script src="tutorial2.jsx" type="text/babel"></script>

　

注意：如果引入的时候type="text/babel"使用 browser.js转换

       如果引入的时候type="text/jsx"使用 JSXTransformer.js转换

2.运行代码

<div id="content"></div>

<script type="text/babel">

        // To get started with this tutorial running your own code, simply remove

        // the script tag loading scripts/example.js and start writing code here.

        var CommentBox = React.createClass({

        render: function() {

        return (

        <div className="commentBox">

            Hello, world! I am a CommentBox.---jsx写法

        </div>

        );

        }

        });

        ReactDOM.render(

        <CommentBox />,

        document.getElementById('content')

        );

  </script> 

效果如下

（1.）如何给组件元素定义类名？

但要在React.createClass（）的时候设置className注意不是class哦

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性

（2.）如何给元素定义内联样式？

var myStyle = {
        "200px",
        height:"200px",
        border:"1px solid #333",
        fontSize:"30px",
        };


        var HelloUser = React.createClass({
        render: function(){
        return (
        <div className="ee" style={myStyle}> Hello, {this.props.name}</div>
        )
        }
        });

        ReactDOM.render(
        <HelloUser name="Tyler"  />, document.getElementById('content2'));

（3.）如何给元素新增或者删除className？

思路：通过state状态改变

或者

使用react推荐的classnames模块

或者react-style模块