學習 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 flickrapp
再 reapp 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.jsx
和 home/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 中的 URLthis.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 demo 和 Hacker News App。
直接看代碼
如果你想直接看這個例子的代碼,你可以直接克隆工程。它包括了你需要的所有的東西,當然除了 Flickr API key,你要測試它的話你必須自己去註冊一個。
啟動這個工程的步驟:
- 安裝 Node/npm,以及 Reapp:
sudo npm install -g reapp
- 克隆工程:
git clone [email protected]:reapp/flickr-demo
- 安裝依賴:
npm install
- 啟動服務:
reapp run
- 在瀏覽器中輸入 http://localhost:3010 查看效果
你應該還是想看看 Reapp 起步 的,如果你想深入再看一下 UI 組件文檔把。
Happy hacking!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。