只回答前端部分
※ 引述《silentcrane (寂靜之鶴)》之銘言：
: 目前是碰到的一些問題:
: 1. React是把整個網頁分隔成各種component(組件?原件?)，我蠻喜歡這種設計的
: 但是如果後面有改動或是增加新東西，其他的架構會不會被影響很大?
: 例如說原本是兩個組件,後來被合成一個...
: (雖然想想，好像不管哪個Frameworks都會被影響 XDDD)
(1) 實務上很少會把兩個組件合成一個（除非你在講 component composition)，
多半是把一個組件拆成兩個
(2) 程式有改動會不會有巨大影響要看組件之間的耦合性強不強，
以 React 來說高耦合性的部分易發生在 parent <-> child 之間的溝通
改善方法諸如：使用第三方 observer pattern module 來降低父子之間關聯，
使用類似 Redux 以及傳遞 props 到底層的方式。
但個人覺得你現在階段不用擔心這些。
: 2. 如果我有一堆圖案(像是球隊隊徽)，我想在點其中一個時候
: 讓其他的消失+顯現出一些訊息。
: 這樣的做法應該是把每個隊徽都設成自己獨立的組件嗎?
: 感覺是這樣才能夠去獨立操控每一個的狀態?
: (React的基本寫法是任何我想要單獨處理的都要是一個獨立組件? @@)
要不要把單一種類型的項目獨立成一個組件沒有標準答案，
如果操作複雜度很高的話會傾向獨立。
以你的需求來說"看起來"可以用單一元件達成：
```js
import React from 'react';
export default class IconList extends React.Component {
constructor(props) {
super(props);
this.state = {
icons: [],
active: -1 // index of active icon
}
}
render() {
var dom = this.state.icons.map(function(icon, index) {
var cls = '';
if (this.state.active >= 0) {
cls = this.state.active === index ? 'active' : 'hidden';
}
return <div className={"icon " + cls}>{icon}</div>
});
return <div>{dom}</div>
}
}
// 再來透過使用者 click 去改變 this.state.active 即可
// 但是當操作越來越複雜，越來越針對單一 item 特化時就可以獨立出 <Icon />
```
: 5. 目前看一些React解說，很多都有提到boilerplate 和 webpack
: boilerplate = 樣板?
: webpack = ...?? OTL
: 想開始寫code之前是不是得先搞懂這兩個是甚麼呢? OAO
兩者都非必要
(1) 新手從 boliderplate 開始反而會不知道什麼是必要的，以及為什麼要有這些東西
(2) webpack 是協助打包以及處理依賴相關, 做 preprocessing/postprocessing ...
的 build tool, 如果沒有要用 ES6 寫 React 可以先不學
但如果要學 ES6 的話搭配 babel + react 事半功倍。