Reactjs 是一個前端的framework通常會選一個後端做restful的搭配,前後端是可以完全分離的
但是通常會把 Reactjs 跟 webserver綁在一起,這邊介紹 nodejs 的一個套件 express
與一些 framework Next.js 與 Meteor
這邊推薦線上讀書會之前默司大大主講的 這邊 express 入門篇
https://www.youtube.com/watch?v=Lo-PP6cUO7c
express 的重點整理
使用express是彈性很大,但意味著什麼元件都要自己來拼跟校調
var http = require('http'); //需要使用 http來createServer
var express = require('express'); //使用express
var app=express(); // 實例化
var server=http.createServer(app);
server.listen(port,function(){ console.log('啟動嚕port是'+port) });
一個基本的express就大概如上,中間影片也有提到一些函式庫的引用與middewave的概念,大家有興趣的可以看看默司大大的影片
接下來要跟大家介紹的之前 一村 介紹 next.js 篇
https://www.youtube.com/watch?v=tHDd7GYdxpM
這個框架包含了 universal server-render的部分 是使用檔案結構目錄的方式簡單配置檔案,就可以完成很複雜的universal,next.js算還滿新的這邊介紹給大家可以選擇 reactjs搭配的 framework之一
https://zeit.co/blog/next 官網網站
學習重點心得
可以參考 楊興大大的這一篇主講 可以幫助你去了解什麼是 universal server-render
https://www.youtube.com/watch?v=tqRkdVzjh8Q
next.js 目前小型專案 非常推薦如果需要有seo又不想做一大推設定,很適合想要快速開發的朋友,但目前還是很新的玩意兒,所以大家再評估一下
最後要跟大家介紹的好東東是 meteor
https://www.youtube.com/watch?v=7Y999tiPz_g
meteor 的入門與使用都不會太難,非常的穩定與好用,如果有興趣可以參考 MAX 之前在線上讀書會的主講
https://www.meteor.com/tutorials/blaze/creating-an-app
學習重點心得
client/main.js # client端進入點
client/main.html # 主樣板
client/main.css # 定義Css檔案
server/main.js # server端進入點
package.json # 套件管理
.meteor # Meteor內部files
.gitignore # git設定忽略檔案
以上是安裝後基本的架構
2. Templates
這邊會提到在根目錄 多一個import的資料結構,方便前後端使用因為meteor也是universal server-render
可以學習到 tempalte的引用 還有樣板的邏輯判斷寫法
...
{{#each tasks}} //迴圈 tasks取Template.body.helpers 的 tasks
{{> task}} // > 是要引用樣板的意思
{{/each}}
...
<template name="task"> // 這裡就是被引用的樣板
<li>{{text}}</li>
</template>
...
...
Template.body.helpers({ //注意body會對應到樣板的<body>
tasks: [
{ text: 'This is task 1' },
{ text: 'This is task 2' },
{ text: 'This is task 3' },
],
});
...
iThome鐵人賽
看影片追技術