React 的誕生過程
01
字元拼接時代 - 2004
時間回到 2004 年，Mark Zuckerberg 當時還在宿舍搗鼓最初版的 Facebook 。
這一年，大家都在用 PHP 的字串拼接（String Concatenation）功能來開發網站。
$str = '<ul>';
foreach ($talks as $talk) {
$str += '<li>' . $talk->name . '</li>';
}
$str += '</ul>';
這種網站開發方式在當時看來是非常正確的，因為不管是後端開發還是前端開發，甚至根本沒有開發經驗，都可以使用這種方式搭建一個大型網站。
唯一不足的是，這種開發方式容易造成 XSS 注入等安全問題。如果 $talk->name 中包含惡意程式碼，而又沒有做任何防護措施的話，那麼攻擊者就可以注入任意 JS 程式碼。於是就催生了“永遠不要相信使用者的輸入”的安全守則。
最簡單的應對方法是對使用者的任何輸入都進行轉義（Escape）。然而這也帶來了其他麻煩，如果對字串進行多次轉義，那麼反轉義的次數也必須是相同的，否則會無法得到原內容。如果又不小心把 HTML 標籤（Markup）給轉義了，那麼 HTML 標籤會直接顯示給使用者，從而導致很差的使用者體驗。
02
XHP 時代 - 2010
到了 2010 年，為了更加高效的編碼，同時也避免轉義 HTML 標籤的錯誤，Facebook 開發了 XHP 。XHP 是對 PHP 的語法拓展，它允許開發者直接在 PHP 中使用 HTML 標籤，而不再使用字串。
$content = <ul />;
foreach ($talks as $talk) {
$content->appendChild(<li>{$talk->name}</li>);
}
這樣的話，所有的 HTML 標籤都使用不同於 PHP 的語法，我們可以輕易的分辨哪些需要轉義哪些不需要轉義。
不久的後來，Facebook 的工程師又發現他們還可以建立自定義標籤，而且通過組合自定義標籤有助於構建大型應用。而這恰恰是 Semantic Web 和 Web Components 概念的一種實現方式。
$content = <talk:list />;
foreach ($talks as $talk) {
$content->appendChild(<talk talk={$talk} />);
}
之後，Facebook 在 JS 中嘗試了更多的新技術方式以減小客戶端和服務端之間的延時。比如跨瀏覽器 DOM 庫和資料繫結，但是都不是很理想。
03
JSX - 2013
等到 2013 年，突然有一天，前端工程師 Jordan Walke 向他的經理提出了一個大膽的想法：把 XHP 的拓展功能遷移到 JS 中。最開始大家都以為他瘋了，因為這與當時大家都看好的 JS 框架格格不入。不過他最終還是執著地說服了經理，允許他用 6 個月的時間來驗證這個想法。這裡不得不說 Facebook 良好的工程師管理哲學讓人敬佩，值得借鑑。
要想把 XHP 的拓展功能遷移到 JS ，首要任務是需要一個拓展來讓 JS 支援 XML 語法，該拓展稱為 JSX 。當時，隨著 Node.js 的興起，Facebook 內部對於轉換 JS 已經有相當多的工程實踐了。所以實現 JSX 簡直輕而易舉，僅僅花費了大概一週的時間。
const content = ( <TalkList>
{ talks.map(talk => <Talk talk={talk} />)} </TalkList>);
原文：https://segmentfault.com/a/1190000013365426
作者：mingzhong