react的”Hello World ！“

碼農請留步發表於2022-03-11
React

本文主要簡述react的開始使用

1.引入js檔案

<!-- 1.核心檔案 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 2.操作的DOM -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 3.翻譯器 將瀏覽器不識別的JS（es7，es8）語法轉化為識別的es5   JSX語法 翻譯成瀏覽器識別的語法 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

 2.整體程式碼

<body>
    <!-- react佈局容器 -->
    <div id="app"> </div>

    <script type="text/babel">
        
        // render(佈局，容器)
        ReactDOM.render(<h1>hello world !</h1>,
            //在哪個容器中使用
            document.querySelector("#app")
        )
    
    </script>
</body>

這樣，hello world !就會顯示在頁面上啦！

3.進一步和注意事項

script中的type一定要寫type=”text/babel“

<body>
    <div id="app2">烏拉</div>
  
    <script type="text/babel">
     
        ReactDOM.render( <div><h1>新聞標題</h1>
             <p>烏克蘭的總統是個好演員</p>
             <hr/>{    //單表籤一定要加"/",不然直接報錯
                       //JSX語法中<  </ 識別為html解析的開始和結束
                        
                    }
             <p>註釋{
                        // 這樣寫單行註釋
                        // JSX{}識別為JS
                        // 單括號語法 裡面可以寫表示式
                         /* 
                            段落註釋    多行註釋
                        */
                        
                        }
                        </p>
        </div>,app2)
        // 佈局比較複雜的時候 用（）包起來 簡潔 方便閱讀
        // react和vue2使用元件一樣，必須有唯一的根元素，即有<div></div>包裹
        // 在app2中有內容的情況下，內容會被覆蓋掉
    </script>
</body>

4.上方程式碼簡寫

上方3的程式碼越多，看起來越複雜，越紊亂，可以用變數將html接收一下

<body>
    <div id="app2">烏拉</div>
  
    <script type="text/babel">
        //layout 虛擬Dom 一般把虛擬DOM 看作一個js物件(儲存了佈局的資訊)
        let layout=(
             <div><h1>新聞標題</h1>
                 <p>烏克蘭的總統是個好演員</p>
                 <hr/>
                 <p>註釋 </p>
            </div> )
             
        ReactDOM.render(layout,app2)
        
        console.log("lauout:",layout)
        console.log("app2:",app2)
       
    </script>
</body>
react jsx 虛擬DOM（好像寫過了，先有點印象就行...）
1.通過JSX建立虛擬DOM
2.通過 render渲染到介面上 成為真正的DOM(diff演算法)
 

 

相關文章