React.js - A HelloWorld example with Express and Node.js

這篇來介紹一下如何快速的利用 Node.js 與 Express 來建立一個 React 的 HelloWorld 範例

React.js 的詳細介紹可以看官網，之後有時間再來詳細介紹...

首先要先快速建立一個 Express 與 Node.js 的 Project，可以用 express-generator

這是一個 Express project 的產生器，可以透過以下指令來安裝

$ npm install express-generator -g

完成後就再利用以下指令建立一個 Express 的 Project

$ express react-demo

進入 react-demo 目錄後可以看一到一個標準的 Express 的目錄結構

接下來就要開始使用 React.js 了，在這之前需要下載 React.js 的函式庫

這邊我是透過 Bower 來管理前端 package 的，所以必須先安裝 Bower

$ npm install bower -g

完成之後先進入 react-demo 目錄內並建立 bower.json，內容如下

{
  "name": "react-demo",
  "version": "0.0.1"
}

接下來就可以透過 Bower 來下載 React.js 了

$ bower install react --save

上述指令的 --save 自動在 bower.json 中加入 dependencies，並且你會在 react-demo 目錄下


看到一個新的資料夾 bower_components

為了等等讓 express 能夠認到 bower_components 底下的內容，我們必須修改react-demo 目錄下的 app.js

找到 app.use(express.static(path.join(__dirname, 'public'))); 並在下一行加入：

app.use('/bower_components',  express.static(__dirname + '/bower_components'));

完成之後就可以開始寫 React.js 的 Hello World 了，首先需要將 React.js 加載到網頁中

由於透過 express-generator 所建立的 template 預設是使用 Jade (當然你可以選擇其他的)

所以我們必須修改 react-demo/views/layout.jade ，如下

doctype html
html
head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
body
    block content
    script(src='/bower_components/react/react.min.js')

接下來在 react-demo/public/javascripts 目錄下建立一個 src 目錄

$ cd public/javascripts
$ mkdir src
$ cd src

並且在 src 目錄下建立 hello.js，其內容如下

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

接下來我們範例是會透過 Offline Transform 來轉換 React 的 Template 

所以需要先安裝一個 React 的轉換工具

$ npm install react-tools -g
$ jsx --watch public/javascripts/src/ public/javascripts/build/

以上指令完成後會在 public/javascripts/build/ 產生一個轉換後的 hello.js

這樣我們就可以把這個 hello.js 引入到頁面內了

doctype html
html
head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
body
    block content

     div(id='example')

    script(src='/bower_components/react/react.min.js')
    script(src='/javascripts/build/hello.js')

最後透過在 react-demo 目錄內執行以下指定

$ npm start

並開啟瀏覽器，到 http://localhost:3000 就可以看到結果了

最後附上本次 demo 的原始碼