Android程式猿的react學習之路-入門指南篇

weixin_34054866發表於2016-03-07
AndroidReact

前言

我是一名Android開發程式設計師，開發Android也有些年頭了，最近在學習react知識(react是如此之火)，但是自己對於前端開發知識又知之甚少，在國內網站上也看到一些react相關的知識內容，但是感覺都是千篇一律，所以就到官網上來進行系統的學習，在學習過程中自己就想著把官網的英語文件翻譯為中文，希望能幫助大家，同時也能鍛鍊自己的英文水平（由於本人的英文水平有限，翻譯有誤的地方希望大家多多提建議）
以下內容是對react官網 進行了翻譯，同時也會與Android進行對比，有了對比學習的的效率就高，就會有深度，也加入了自己的一些總結。

入門指南

一個JSFiddle的react例子（JSFiddle是一個前端線上編輯，編譯web app）

最簡單的瞭解React的方法是使用以下JSFiddleHello World例子：

使用npm學習React（npm是一個包管理和分發工具）

準備材料

  • nodejs,npm安裝（windows），npm類似於maven中的中央倉庫的意思。
  • 一個CommonJS的模組系統的構建工具（browserify或webpack）任意一個都可以。webpack構建工具類似於android中的ant或gradle構建工具，解決工程中的依賴關係，並負責編譯打包工程。
  • react和react-dom包安裝。類似於java中的類庫。
  • 編輯工具sublime（還有其他種類的編輯工具），sublime是一個輕量級的編輯工具類似於android studio(它是一個重量級的開發工具)，sublime可以安裝各種需要的外掛，在學習react首先需要安裝Babel外掛（Babel的作用後面有解釋）

使用npm下載react和react-dom示例：
安裝react和react-dom包並使用browserify來編譯打包你的程式

  $ npm install --save react react-dom babelify babel-preset-react
  $ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

安裝react和react-dom使用webpack來編譯打包你的程式

  $ npm install --save react react-dom babel-preset-react
  $ webpack

不使用npm來學習React

如果你還未準備好使用npm，可以直接下載starter kit（工具包），該工具包包含react和react-dom預製包
Download Starter Kit 0.14.7
解壓下載好的starter kit檔案，在解壓的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( 
             //JSX程式碼
            <h1>Hello, world!</h1>, 
            document.getElementById('example') ); 
      </script>
     </body>
  </html>

JavaScript中的類似於xml的語法的程式碼我們叫它JSX，點選JSX syntax可以瞭解更多。為了把JSX程式碼轉化為javascript程式碼我們使用<script type="text/babel">來匯入Babel，Babel是真正在瀏覽器裡起轉換作用。

單獨的檔案

你可以把上面的JSX程式碼塊放入一個單獨的檔案中，假設該檔名為src/helloworld.js,檔案內容如下：

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

然後在helloworld.html檔案中引用helloworld.js：

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

注意有些瀏覽器（chrome等）將會載入檔案失敗除非開啟一個http的伺服器。

離線轉換

首先安裝Babel命令列工具，需要npm：

  npm install --global babel-cli
  npm install babel-preset-react

然後你就可以使用下面命令把JSX轉換為普通的javascript程式碼：

  babel --presets react src --watch --out-dir build

注意：如果你使用的是ES2015,你還得下載babel-preset-es2015包

build/helloworld.js檔案內容是自動更新的的只要原始檔發生改變。Babel CLI documentation可以瞭解更多關於Babel的知識。

轉換以後build/helloworld.js的檔案內容：

    ReactDOM.render(
       React.createElement('h1', null, 'Hello, world!'), 
      document.getElementById('example')
    );

總結

看了上面的內容您應該對react程式碼是什麼樣子，開發react需要哪些材料有了初步的瞭解，具體詳情可以看react官網，有錯誤的地方歡迎拍磚。

期待別的章節翻譯......

相關文章