React Hello,World

monica888888發表於2017-07-26
React

       https://facebook.github.io/react/docs/composition-vs-inheritance.html

關注很久，一直想好好研究下，當我看見看見指令碼里放標籤，就喜歡上它了，以前大部分是從根標籤往下套，一直覺得太麻煩，希望能解決這樣的問題？

一、介紹

        React 是一個靈活且能被用於各種工程中，你能用它建立一個新的應用，但是你不用重寫，可以逐漸把它引入到一個已經存在的程式碼庫中。

    下面選項中哪一個最能描述你想做什麼？


  • Try React 
  • Create a New App 
  • Add React to an Existing App

二、幾種實驗法：

   第一、用CodePen 線上測試css,html,js非常方便，且效果非常好，這麼好的工具怎麼寫出來的？

  第二、如果你更喜歡用文字編輯，你可以download this HTML file,編輯它，在自己本地的瀏覽器去開啟它。它執行很慢，因為每次要載入三個指令碼檔案，測了下面的頁面，需要花費260ms,所以不要用在一個專案中。

    注意，網頁中實時將ES6程式碼轉為ES5，對效能會有影響。生產環境需要載入已經轉碼完成的指令碼。

     2.1 使用三個庫：

         1> react.js：核心庫

            2>react-dom.js：提供Dom相關的功能

            3> babel.min.js：用於將JSX 語法轉化為JavaScript 語法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">   //type="text/babel",這是 React 獨有的 JSX 語法，跟 JavaScript 不相容
      ReactDOM.render(            //ES6指令碼放在script標籤之中
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

第三、如果你想使用它在整個專案中，有兩個最受歡迎的方式：建裡一個React 應用，or 增加到已有專案中。

第四、建立一個React 應用：https://github.com/facebookincubator/create-react-app
 1、




相關文章