入門篇(一)

weixin_33807284發表於2016-11-30

JSX語法:HTML語言直接寫在JS語言中,不加任何引號

JSX基本語法規則(只有一個開頭節點和一個結尾節點)
1.遇到HTML標籤(以 < 開頭),就用HTML規則解析
2.遇到程式碼塊(以 { 開頭),就用JS規則解析

React獨有的JSX語法跟JS不相容、凡事使用JSX的地方,都要加上

<script type="text/babel"></script>

使用React前必須首先載入

react.js         React的核心庫
react-dom.js     提供與DOM相關的功能
Browser.js       將JSX語法轉換為JS語法
注意:書寫的順序
<script type="text/babel">      
        var Hello = React.createClass({
            render: function() {
                return (
                    <div>Hello</div>
                );
            }
        });

        ReactDOM.render(
            <Hello/>,
            document.body
        );
</script>

React.createClass 生成一個元件類、元件名一定要大寫,否則會報錯
所有元件都必須有自己的render方法,用於輸出元件

新增元件屬性需注意(駝峰式命名規則)
1.class需寫成className
2.for需寫成htmlFor

ReactDOM.render() 是React的最基本方法、用於將模板轉為HTML語言,並插入置頂的DOM節點(當前插入body中)

相關文章