只回答前端部分
※ 引述《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 事半功倍。