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 目錄下