學習 React.js:用 ReactJS 30 分鐘打造一個移動應用

Make a Mobile App with ReactJS in 30 Minutes

Ken Wheeler (@ken_wheeler)

React 能讓前端開發者以前所未有的方式來構建應用。它有許多好處:比如單向數據流,簡單的組件生命週期,聲明組件之類的。

Reapp 是最近發佈的基於 React 的一個框架。它是一個專為性能和生產效率而生的移動應用平台。你可以把它看做是一個精心優化過的 UI 組件,並且帶有一套很好的編譯系統,以及許多有用工具,能讓你輕松構建你的應用。

技术分享

Reapp 給我們提供了一堆很棒的東西:

  • 完整的移動 UI 組件
  • “reapp new” 生成一個可用的 app
  • “reapp run” 啟動你的 ES6 app,並且可以更新無需重啟
  • 主題和動畫
  • 路由和包請求
  • 用 Cordova 創建應用

我們的目標

為了演示 Reapp,我們將創建一個應用,可以讓你檢索 Flickr API,然後把結果在圖片庫裏面顯示出來。跟著這個教程做的話,大約也就會佔用你不到半個小時的時間!

技术分享

開始

首先你得安裝有 node,然後我們來執行 sudo npm install -g reapp 安裝 Reapp CLI。安裝完之後,執行 reapp new flickrapp。最後, cd flickrappreapp run

你就會看到如下:

技术分享

在你的瀏覽器中打開 localhost:3010,你就會看到默認的 Reapp 應用啦:

技术分享

小提示:在 Chrome 的開發者工具裏面,可以打開模擬移動設備,以移動應用的方式來查看你的應用。

技术分享

棒!現在我們已經完全跑起來一個用 Reapp 組件創建的全 React 棧應用。來看看文件結構:

<!-- lang: js -->
/app
  components/
    home/
      Sub.jsx
    App.jsx
    Home.jsx
  app.js
  routes.js
/assets

Reapp 給我們搭建了一些演示的頁面,正如你看到的,放在 . app/components 裏面,一個典型 REST 結構。./app/app.js 是我們應用的入口,它會加載 Reapp 和執行我們的路由,路由會在 ./app/routes.js 裏配置。

從視圖開始

我們生成一個應用,不過 Reapp 生成的應用包括了許多內嵌頁面,我們不需要那麽多,只要單頁就好。讓我們先把它弄簡單點。在 routes.js 裏面,我們可以把它改成這樣:

<!-- lang: js -->
module.exports = ({ routes, route }) =>
  routes(require,
    route(‘app‘, ‘/‘, { dir: ‘‘ })
  );

這樣指定了根路由 (http://localhost:3010) 到 app,這樣 Reapp 路由器會自動的查找 ./components/App.jsx

現在我們可以放心的把 Home.jsxhome/Sub.jsx 文件刪了,因為我們不需要多視圖。當然你也可以留著它們,萬一你想之後要用呢。

App.jsx 文件裏面,我們可以把它這樣簡化:

<!-- lang: js -->
import React from ‘react‘;
import View from ‘reapp-ui/views/View‘;

export default React.createClass({
  render() {
    var { photos } = this.state;

    return (
      <View title="Flickr Search" styles={{ inner: { padding: 20 } }}>
        <p>Hello World</p>
      </View>
    );
  }
});

如果你刷新一下,你就可以看到界面變成了一個空的視圖加上頂部的一條新標題"Flickr Search”。

從 Flickr 拿數據

現在我們有了界面但是沒邏輯。在我們把按鈕和顯示照片連動起來之前,當然要用 React 方式先從 Flickr 拿到照片數據。首先,你得有個 Flickr 帳號,和 API key。沒有?點這裏

填好它(沒有帳號你就先註冊),把它們給你的 Public Key 拷貝到 App.jsx 保存成靜態量。你還需要檢索照片用的 URL,你可以在 API explorer 找出來,太麻煩我直接給你把 https://www.flickr.com/services/api explore/flickr.photos.search

看起來文件就是這樣:

<!-- lang: js -->
const key = ‘__YOUR_KEY_HERE__‘;
const base = ‘https://api.flickr.com/services/rest/?api_key=${key}&format=rest&format=json&nojsoncallback=1‘;

那個 “YOUR_KEY_HERE” 是給你放 key 的地方。

注意: const 是下一代 JavaScript 的新特性,也就是 ES6。它看起來像變量,不過一但設置好了之後就不會改變了。我們應該怎麼在應用中調用它? Reapp 有內建的 [Webpack][13] 編譯系統,支持 ES6 新特性!

下面,給我們的 React 類定義 getInitialState(),這樣我們的組件可以跟蹤我們拿到的照片數據。我們把它作為第一個屬性加到 React.createClass 後面。因為我們把照片保存到一個列表中,所以要有一個列表:

<!-- lang: js -->
getInitialState() {
  return {
    photos: []
  }
},

這樣我們就可以在渲染方法裏面,訪問 this.state.photos 了。在 UI 裏面,我們需要一個按鈕和一個關鍵字輸入框:

<!-- lang: js -->
import Button from ‘reapp-ui/components/Button‘;
import Input from ‘reapp-ui/components/Input‘;

然後更新 render() 方法:

<!-- lang: js -->
render() {
    var { photos } = this.state;

    return (
      <View title="Flickr Search">
        <Input ref="search img-responsive" />
        <Button onTap={this.handleSearch}>Search Images</Button>

        <div className="verticalCenter">
          {!photos.length &&
            <p>No photos!</p>
          }
        </div>
      </View>
    );
  }

然後你接滿就變成這樣:

技术分享

簡單到爆!不過還是有一些需要值得注意的地方。首先,看到輸入框的 ref 屬性 沒有?Ref 是 reference 的縮寫,用來讓我們來在 class 中跟蹤 DOM 元素的。我們之後會用它來拿界面上輸入的值。

還有,請看 div 上的 className="verticalCenter"。兩點:因為我們是用 JSX 編譯成 JS 對象(更詳細的看這裏) ,我們不能用普通的 class 屬性,所以我們用 className 來設置 class。另外 verticalCenter 屬性是 Reapp 提供的,它會把元素放到我們頁面的中間。

最後,看到按鈕上的 onTap 屬性沒有?它指向 this.handleSearch。不過我們還沒有 handleSearch 方法。 React 需要它,好了我們來完成它吧。首先, npm install --save superagent ,安裝我們需要的 Superagent 庫。然後導入:

<!-- lang: js -->
import Superagent from ‘superagent‘;

然後定義 handleSearch:

<!-- lang: js -->
  handleSearch() {
    let searchText = this.refs.search.getDOMNode().value;
    Superagent
      .get(`${base}&method=flickr.photos.search&text=${searchText}&per_page=10&page=1`, res => {
        if (res.status === 200 && res.body.photos)
          this.setState({
            photos: res.body.photos.photo
          });
      });
  },

幾個新的注意點:

  • this.refs.search.getDOMNode() 返回輸入的 DOM 節點,也就是我們之前放了 “search” ref 的節點
  • ${base} 抓取我們定義在 constant 中的 URL
  • this.setState 會幫我們拿到照片, 存在我們之前定義在 getInitialState 裏的 this.state.photos 數組

顯示 Flickr 照片

現在我們拿到了 Flickr 照片,把它們放到了 state 中。最後一步是顯示了。你可以加一句 console.log 到 render 方法第一行看看 Flick 給你返回了什麼:

<!-- lang: js -->
render() {
  console.log(this.state.photos);
  // ... rest of render
}

在控制檯你會看到 Flickr 給你返回了一個對象,裏面有許多屬性,這些屬性取決於你的請求 URL。你可以在這個幫助頁面看看應該怎樣處理 flickr 的 URL。

你看我是這樣來處理我的 URL 的,我放了一個簡單的方法在類裏面:

<!-- lang: js -->
getFlickrPhotoUrl(image) {
  return `https://farm${image.farm}.staticflickr.com/${image.server}/${image.id}_${image.secret}.jpg`;
},

這個方法拿到我們的 Flickr 對象,把它轉化成我們需要顯示的 URL 。下面,我們來編輯 handleSearch,setState 調用:

<!-- lang: js -->
this.setState({
  photos: res.body.photos.photo.map(this.getFlickrPhotoUrl)
});

map 方法會遍歷我們的照片對象,然後把它們傳給 getFlickrPhotoUrl,轉換成 URL。然後就可以顯示啦!

我們把 reapp 的 Gallery 組件到進來:

<!-- lang: js -->
import Gallery from ‘reapp-ui/components/Gallery‘;

在 render 方法裏面, 在 <p>No photos found!</p> 下面:

<!-- lang: js -->
{!!photos.length &&
  <Gallery
    images={photos}
    width={window.innerWidth}
    height={window.innerHeight - 44}
  />
}

Gallery 組件會把這三個屬性拿到,然後全屏模式顯示圖片,你可以左右滑動切換它們。到這裏,我們已經完成我們的應用啦。在你的瀏覽器來看看它是怎樣運作的吧。

注意:為什麼要 window.innerHeight -44 ?因為我們設置了應用的 TitleBar 高 44。當然還有別的更好的方式來處理,不過現在求效果不求質量,簡單暴力又好用。

最後

到目前我們干的挺好的,不過確實還有許多可以調整的地方。比如說圖片庫我們現在關不掉。當然我們如果給它加一個 onClose 屬性的話,還是可以的。不過我們還需要在它關閉的時候更新我們的狀態。好吧這很簡單,來看下面:

<!-- lang: js -->
onClose={() => this.setState({ photos: [] })}

同樣,我們的輸入框看起來醜死了。我們來加個特效,border,margin 和 placeholder:

<!-- lang: js -->
<Input ref="search" placeholder="Enter your search" styles={{
  input: {
    margin: ‘0 0 10px 0‘,
    border: ‘1px solid #ddd‘
  }
}} />

技术分享
技术分享

是不是很帥!

完整代碼

好了,我們所有的代碼都是寫在 ./components/App.jsx 裏面的。很簡單,也很容易理解,還用了一些很酷的 ES6 屬性。來看完整版:

<!-- lang: js -->
import React from ‘react‘;
import View from ‘reapp-ui/views/View‘;
import Button from ‘reapp-ui/components/Button‘;
import Input from ‘reapp-ui/components/Input‘;
import Superagent from ‘superagent‘;
import Gallery from ‘reapp-ui/components/Gallery‘;

const MY_KEY = ‘__YOUR_KEY_HERE__‘;
const base = `https://api.flickr.com/services/rest/?api_key=${MY_KEY}&format=rest&format=json&nojsoncallback=1`;

export default React.createClass({
  getInitialState() {
    return {
      photos: []
    }
  },

  // see: https://www.flickr.com/services/api/misc.urls.html
  getFlickrPhotoUrl(image) {
    return `https://farm${image.farm}.staticflickr.com/${image.server}/${image.id}_${image.secret}.jpg`;
  },

  handleSearch() {
    let searchText = this.refs.search.getDOMNode().value;
    Superagent
      .get(`${base}&method=flickr.photos.search&text=${searchText}&per_page=10&page=1`, res => {
        if (res.status === 200 && res.body.photos)
          this.setState({
            photos: res.body.photos.photo.map(this.getFlickrPhotoUrl)
          });
      });
  },

  render() {
    var { photos } = this.state;

    return (
      <View title="Flickr Search" styles={{ inner: { padding: 20 } }}>

        <Input ref="search" placeholder="Enter your search" styles={{
          input: {
            margin: ‘0 0 10px 0‘,
            border: ‘1px solid #ddd‘
          }
        }} />
        <Button onTap={this.handleSearch}>Search Images</Button>

        <div className="verticalCenter">
          {!photos.length &&
            <p>No photos!</p>
          }

          {!!photos.length &&
            <Gallery
              onClose={() => this.setState({ photos: [] })}
              images={photos}
              width={window.innerWidth}
              height={window.innerHeight - 44}
            />
          }
        </div>

      </View>
    );
  }
});

下一步

我們可以以此為起點繼續往前走。我們可以先顯示一個圖片列表,點擊它們再顯示 gallery。 Reapp 也提供了它的組件文檔,所以你可以看看有什麽需要的把它加到你的應用裏面。 Reapp 還有幾個它們提供的不錯的例子:Kitchen Sink demoHacker News App

直接看代碼

如果你想直接看這個例子的代碼,你可以直接克隆工程。它包括了你需要的所有的東西,當然除了 Flickr API key,你要測試它的話你必須自己去註冊一個。

啟動這個工程的步驟:

  1. 安裝 Node/npm,以及 Reapp:sudo npm install -g reapp
  2. 克隆工程:git clone [email protected]:reapp/flickr-demo
  3. 安裝依賴:npm install
  4. 啟動服務:reapp run
  5. 在瀏覽器中輸入 http://localhost:3010 查看效果

你應該還是想看看 Reapp 起步 的,如果你想深入再看一下 UI 組件文檔把。

Happy hacking!

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。