入門篇(一)

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

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

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方法,用于輸出組件

添加組件屬性需注意(駝峰式命名規(guī)則)
1.class需寫成className
2.for需寫成htmlFor

ReactDOM.render() 是React的最基本方法、用于將模板轉為HTML語言,并插入置頂的DOM節(jié)點(當前插入body中)
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 一、JS代碼插入方法 1.使用<script></script>標簽在html網頁文檔中插入javascript代...
    sophies閱讀 471評論 0 0
  • 小程序也已經出來有一段時間啦,對于一些想去學習又無從下手的朋友們,歡迎和代碼君一起去學習一下小程序! 準備工作 下...
    代碼君_Coder閱讀 8,545評論 1 51
  • JSX是React的核心組成部分,它使用XML標記的方式去直接聲明界面,界面組件之間可以互相嵌套。可以理解為在JS...
    可樂愛上咖啡閱讀 72,342評論 1 63
  • React 入門實例教程 轉載(加入了自己的一些東西,推薦看原文):一看就懂的ReactJs入門教程(精華版) ...
    驀然之間的閱讀 445評論 0 0
  • 現(xiàn)在最熱門的前端框架,毫無疑問是React。在基于React的React Native發(fā)布一天之內,就獲得了 50...
    Mycro閱讀 1,126評論 3 6

友情鏈接更多精彩內容