學習react初始化輸出Hello React

這相當于我的一個學習日記,,這是第一篇學習日記,以后會不定期更新。
我要學習的三個內容,react、python3、react native。
我一般在菜鳥教程上學習。所以這次也不例外。
PS:為避免。。。所以不寫網址了,自己找去吧。
省略不必要的巴拉巴拉,我也沒有好文采,只需要記住,react是一個很牛B的庫!挺好玩!就行了(如果你敲一遍hello wrold,你就知道好玩兒在哪里了)。
摘抄一個菜鳥教程的一段文字:

React 特點:
    1.聲明式設計 ?React采用聲明范式,可以輕松描述應用。
    2.高效 ?React通過對DOM的模擬,最大限度地減少與DOM的交互。
    3.靈活 ?React可以與已知的庫或框架很好地配合。
    4.JSX ? JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ,但我們建議使用它。
    5.組件 ? 通過 React 構建組件,使得代碼更加容易得到復用,能夠很好的應用在大項目的開發中。
    6.單向響應的數據流 ? React 實現了單向響應的數據流,從而減少了重復代碼,這也是它為什么比傳統數據綁定更簡單。

PS:這個特點,我不是能夠完全理解,但是不妨礙我學習啊,那就一邊學習,一邊理解。
首先,還是按照傳統。來個HELLO WROLD玩玩吧
初始化:
正常使用的話只需要引入三個庫。
react.min.js - React 的核心庫
react-dom.min.js - 提供與 DOM 相關的功能
babel.min.js - Babel 可以將 ES6 代碼轉為 ES5 代碼,這樣我們就能在目前不支持 ES6 瀏覽器上執行 React 代碼。Babel 內嵌了對 JSX 的支持。通過將 Babel 和 babel-sublime 包(package)一同使用可以讓源碼的語法渲染上升到一個全新的水平。
當然可以下載到本地,也可以用網上的CDN。

放代碼:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="../js/react.js"></script>
    <script src="../js/react-dom.js"></script>
    <script src="../js/browser.min.js"></script>
  </head>
  <body>
    <div id="demo"></div>
    <script type="text/babel">
    //type和我們平常的js的type不一樣,因為是用jsx的原因吧
      ReactDOM.render(
        <h1>Hello, React!</h1>,
        document.getElementById('demo')
      );
    </script>
  </body>
</html>

PS:那個meta為viewport的標簽,是我在HBuilder里方便看效果加的。
//ReactDOM.render(
//代碼塊后面跟逗號(,)
//指定輸出到網頁的位置
//);
這個應該是固定格式吧。
效果圖:


捕獲.PNG
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • React的學習資源 這個文章好久沒有更新了,資源算比較老舊的了,畢竟前端更新還是非常快的。 半年不學習,都不知道...
    izhongxia閱讀 23,371評論 11 629
  • 女人如水,水能載舟亦能覆舟。水是柔情,水是蜜意,水是生命之源,枯竭之劫。 一個丫鬟的故事開始,一個女首富的結尾。其...
    敢說真話的妖精閱讀 300評論 0 1
  • 一、 控制測量概算的定義 控制測量概算是在控制點坐標平差以前,通過概略計算得出的不精確的控制點坐標數據的過程,是...
    于鴻濤閱讀 2,296評論 0 0
  • 當揮手時, 燈火睡醒了滿街的樹蔭, 將夜色,如沁涼的醇酒。 而那星光,如古老的細繩, 織成綿綿的網撒住你,入我的緊...
    黑三角餐廳店長閱讀 198評論 0 1