React は JavaScrit による フロントエンド の View ライブラリです。
React tutorialをあえてスクリプトを使わないでアプリケーションを作ります。
JavaScrit のない世界から React への パラダイムシフト を体感してみましょう。
Learning
- React tutorial に Express を利用する。
- View に React (Virtual) DOM ではないテクノロジーを利用する。
Environment
- node: v4.4.5
- npm: v3.9.6
Comment Box Form
- 完成される Source Code のファイルリストです。
$ tree -a -I node_modules
.
├── app.js
├── bin
│ └── www
├── db
│ └── comments.json
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── comments.js
│ └── index.js
└── views
├── error.ejs
└── index.ejs
Let's hands-on
Initial application
- Express application generator で Webアプリケーション を作成します。
$ npm install express-generator -g
$ express --ejs express-comment-box-example
$ cd express-comment-box-example && npm install
Add package
- Markdown parser は remarkable を使います。
$ npm install remarkable --save
Add Database
- JSON形式の フラットファイルデータベース でデータを永続化します。
db/comments.json
[
{"id": 1, "author": "Pete Hunt", "text": "This is one comment"},
{"id": 2, "author": "Jordan Walke", "text": "This is *another* comment"}
]
Replace stylesheet
- Stylesheet は React Tutorial からダウンロードします。
$ curl https://raw.githubusercontent.com/reactjs/react-tutorial/master/public/css/base.css \
-o ./public/stylesheets/style.css
Add View
-
EJS の テンプレートエンジン でHTMLの要素を設定します。
- このHTMLに
<script>の要素はありません!
- このHTMLに
views/index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div className="commentBox">
<h1>Comments</h1>
<div className="commentList">
<% comments.forEach(function(comment){ %>
<div className="comment">
<h2 className="commentAuthor">
<%= comment.author %>
</h2>
<%- comment.text -%>
</div>
<% }) %>
</div>
<form className="commentForm" action="/" method="post">
<input type="text" placeholder="Your name" name="author" />
<input type="text" placeholder="Say something..." name="text" />
<input type="submit" value="Post" />
</form>
</div>
</body>
</html>
Add Route
- データを フラットファイルデータベース から読み込んでレンダリングする
router.getを設定します。 - データを フラットファイルデータベース に読み書きしてレンダリングする
router.postを設定します。
routes/index.js
var express = require('express');
var router = express.Router();
var fs = require('fs');
var Remarkable = require('remarkable');
var md = new Remarkable();
/* GET home page. */
router.get('/', function(req, res, next) {
fs.readFile('db/comments.json', function(err, data) {
var comments = JSON.parse(data);
comments = comments.map(function(comment, index, array) {
return {author: comment.author, text: md.render(comment.text)};
});
res.render('index', {title: 'Comment Box Example', comments: comments});
});
});
/* POST home page. */
router.post('/', function(req, res) {
fs.readFile('db/comments.json', function(err, data) {
var comments = JSON.parse(data);
req.body.id = Date.now();
comments.push(req.body);
fs.writeFile('db/comments.json', JSON.stringify(comments, null, 4), function(err) {
comments = comments.map(function(comment, index, array) {
return {author: comment.author, text: md.render(comment.text)};
});
res.render('index', {title: 'Comment Box Example', comments: comments});
});
});
});
module.exports = router;
Start HTTP Server
-
npm startコマンドで Webアプリケーション を実行します。 - ブラウザで http://localhost:3000 をロードすると Comment Box Example が表示されます。
$ npm start
$ open http://localhost:3000
Comment Box API
React tutorial で利用する API も作りましょう。
Replace Route
-
routes/index.jsをJSON形式のレスポンスにするだけです。 - CORS(Cross-Origin Resource Sharing)の設定もします。
$ mv ./routes/users.js ./routes/comments.js
routes/comments.js
var express = require('express');
var router = express.Router();
var fs = require('fs');
/* GET comments listing. */
router.get('/', function(req, res, next) {
fs.readFile('db/comments.json', function(err, data) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.json(JSON.parse(data));
});
});
/* POST comment creating. */
router.post('/', function(req, res) {
fs.readFile('db/comments.json', function(err, data) {
var comments = JSON.parse(data);
comments.push(req.body);
fs.writeFile('db/comments.json', JSON.stringify(comments, null, 4), function(err) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.json(comments);
});
});
});
module.exports = router;
Replace Config
-
commentsのモジュールの設定をします。
app.js
var routes = require('./routes/index');
-var users = require('./routes/users');
+var comments = require('./routes/comments');
app.use('/', routes);
-app.use('/users', users);
+app.use('/api/comments', comments);
API Testing
-
curlコマンドで取得できるか確認します。
$ curl http://localhost:3000/api/comments
[{"id":1,"author":"Pete Hunt","text":"This is one comment"},{"id":2,"author":"Jordan Walke","text":"This is *another* comment"}]
-
curlコマンドで追加できるか確認します。
$ curl http://localhost:3000/api/comments \
--header 'Content-Type:application/json' \
--data '{"author":"foo","text":"*bar*"}'
[{"id":1,"author":"Pete Hunt","text":"This is one comment"},{"id":2,"author":"Jordan Walke","text":"This is *another* comment"},{"author":"foo","text":"*bar*"}]
Congrats!
1つのViewに CommentBox, CommentList, Comment, CommentForm が集まっているので構成を部品に分離したいです。
次は React tutorial を Hot Module Replacement で進めましょう！