學習 React.js：用 Node 和 React.js 創建一個實時的 Twitter 流

Build A Real-Time Twitter Stream with Node and React.js

By Ken Wheeler (@ken_wheeler)

#簡介

歡迎來到學習 React 的第二章，該系列文章將集中在怎麼熟練並且有效的使用臉書的 React 庫上。如果你沒有看過第一章，概念和起步，我非常建議你繼續看下去之前，回去看看。

今天我們準備創建用 React 來創建一個應用，通過 Isomorphic Javascript。

Iso-啥?

Isomorphic. Javascript. 意思是說一份代碼在服務端和客戶端都可以跑。

這個概念被用在許多框架上，比如 Rendr,Meteor & Derby。你用 React 同樣也能實現，今天現在我們就開始來學。

##為什麼那麽神奇？

我跟很多人一樣，都是 Angular 粉，不過有一個痛點是在處理 SEO 的時候非常麻煩。

不過我覺得 Google 應該會執行並且給 Javascript 做索引吧？

哦哈，肯定沒有啦。他們只是給你提供處理靜態 HTML 的機會。你還是要用 PhantomJS 或者其他第三方服務來生成 HTML 的。

那麽來看 React。

React 在客戶端很厲害，不過它可以在服務端渲染這就很不一樣了。這是因為 React 用了虛擬 DOM 來代替真的那個，並且允許我們渲染我們的組件。

#開始

好吧屌絲們，讓我們把真傢伙掏出來吧。我們將構建一個英勇，它可以顯示這篇文章的推，並且可以實時加載。下面是一些需求：

• 它會監聽 Twitter 流 API，並且黨有新的推進來的時候，把它們保存下來
• 保存的時候，會推送一個事件到客戶端，以便視圖的更新
• 頁面會在服務端渲染，客戶端只是把他們拿過來
• 我們將實現無限滾動，每次加載十條推
• 新推進來的時候將會有一個提醒條提示用戶去看查看他們

下面是我們的效果圖。請去看看實際的 Demo ，確認我們的所有東西都是實時顯示的。

讓我們來看看除了 React 之外還要用到的一些工具：

• Express - 一個 node.js 頁面應用框架
• Handlebars - 一個末班語言，我們將會用來寫我們的佈局模板
• Browserify - 一個依賴包處理工具，通過它我們可以用 CommonJS 語法
• Mongoose - 一個 MongoDB 對象模型庫
• Socket.io - 實時雙向通訊庫
• nTwitter - Node.js Twitter API 庫

##服務端

讓我們開始構建我們應用的服務端。從這裏下載工程文件，然後跟著下面做：

目錄結構

<!-- lang: js -->
components/ // React Components Directory
---- Loader.react.js            // Loader Component
---- NotificationBar.react.js   // Notification Bar Component
---- Tweet.react.js             // Single Tweet Component
---- Tweets.react.js            // Tweets Component
---- TweetsApp.react.js         // Main App Component 
models/ // Mongoose Models Directory
---- Tweet.js // Our Mongoose Tweet Model
public/ // Static Files Directory
---- css
---- js
---- svg
utils/
----streamHandler.js // Utility method for handling Twitter stream callbacks
views/      // Server Side Handlebars Views
----layouts
-------- main.handlebars
---- home.handlebars
app.js      // Client side main
config.js   // App configuration
package.json 
routes.js // Route definitions
server.js   // Server side main

PACKAGE.JSON

<!-- lang: js -->
{
  "name": "react-isomorph","version": "0.0.0","description": "Isomorphic React Example","main": "app.js","scripts": {
    "watch": "watchify app.js -o public/js/bundle.js -v","browserify": "browserify app.js | uglifyjs > public/js/bundle.js","build": "npm run browserify ","start": "npm run watch & nodemon server.js"
  },"author": "Ken Wheeler","license": "MIT","dependencies": {
    "express": "~4.9.7","express-handlebars": "~1.1.0","mongoose": "^3.8.17","node-jsx": "~0.11.0","ntwitter": "^0.5.0","react": "~0.11.2","socket.io": "^1.1.0"
  },"devDependencies": {
    "browserify": "~6.0.3","nodemon": "^1.2.1","reactify": "~0.14.0","uglify-js": "~2.4.15","watchify": "~2.0.0"
  },"browserify": {
    "transform": [
      "reactify"
    ]
  }
}

如果上面的你都做了，只要簡單的執行一下 npm install 然後去喝杯水。等你回來之後，我們的所有需要的依賴包應該就會準備好了，然後該我們來動手了。

現在我們有一些可以用到的命令：

• npm run watch 執行該命令會啟動 watchify 的監控，當我們編輯 js 文件時，他們將在保存時獲取 browserified
• npm run build 執行該命令回編譯我們的 bundle.js 並且打包壓縮成生產模式
• npm start 執行該命令將會啟動監控並通過 nodemon 咝形覀兊膽��

  （编辑：李大同）

  【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!