關於 Separation of concerns（SoC）這個地方我覺得別人寫的已經很清楚了(英文有許多文章，我只挑比較好懂的中文版，而且盡量沒有廣告)，所以簡單的以我理解的方式來說：

在 React 之中，他用 component 的概念讓元件視覺化的去處理，我猜這也是為什麼我覺得學 React 比較舒服的感覺（到目前為止啦...不想太早立Flag...）。

相關文章：

什麼是MVC?

前端技術發展史，關注點分離的辯證：模板語言到 React 與 Vue

理論-關注點分離(Separation of Concerns)

然後他分為 Functional Components 與 Class Components，兩者的差異在於...一個是function 一個是class (好敷衍的答案）。

同時要注意的是，使用 React 的 Functional component時，開頭文字請大寫，不然瀏覽器會當成一般的 function 來使用喔。

Functional Components

我們繼續回到那個首頁，加上 div#root5，然後在index.js中寫入

function Hello2 (){
 return <p>Hello, how're you</p>
}
const el2 = <Hello2 />;
ReactDOM.render(
  el2,
  document.getElementById('root5')
);

就可以跑出以下畫面囉：

相關文章：

React Functional Component 與Class Component的差異

Class Components

在文件中，它描述自己是用來寫進階或更多互動用的功能，例如表格、動畫等等。

一樣，說不如做，我們來寫看看，在這裡我們繼續來個 div#root6(我真的好懶惰) ，直接寫下

class Answer extends React.Component {
  render() {
    return <p>I feel bad cause I am sadness.</p>;
  }
}
const el3 = <Answer />;
ReactDOM.render(
  el3,
  document.getElementById('root6')
);

接著就能看到回答的話語（對我心情不好）