閱讀372 返回首頁    go 阿裏雲 go 技術社區[雲棲]

《React官方文檔》之Getting Started

JSFiddle

開始React最簡單的方法就是遵循JSFiddle的Hello World例子：

  • React JSFiddle
  • React JSFiddle without JSX

  • 入門包

    如果你剛剛起步，你可以下載Starter Kit。Starter Kit包含為瀏覽器預製的React和React DOM，以及幫助你開始的示例。

     

    在Starter Kit的根目錄下創建一個 helloworld.html內容如下：

  • <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

    JavaScript中的XML語法叫做JSX，查看JSX語法可以學習更多。為了將它翻譯成普通的JavaScript ，我們使用 <script type="text/babel">並且包含 Babel來在瀏覽器中實現真正的翻譯。從瀏覽器打開這個html你就能看到這句問候了！

    獨立的文件

    你的React JSX代碼可以在一個獨立的文件中。創建如下的 src/helloworld.js

    ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

    然後從helloworld.html引用它:

    <script type="text/babel" src="src/helloworld.js"></script>

    注意到一些瀏覽器（比如Chrome）將會加載失敗除非它通過HTTP服務.

     React+npm或Bower

    你可以使用npm或Bower來管理React 包。你可以在我們的包管理 章節學習到更多相關知識。

    下一步

    查看我們的教程和其他Starter Kit的examples 目錄下的例子來學習更多。

 轉載自 並發編程網 - ifeve.com

最後更新：2017-05-19 15:02:53

  上一篇：go  ExecutorService-10個要訣和技巧
  下一篇：go  《ELK Stack權威指南 》導讀