學習任何一門語言我們寫出的第一個Demo，應該是Hello world了。相信第一個具有自主思想的智能機器人開口第一句話應該就是：Hello world, Human, Fuck you!
爲什麼取名爲讓人沮喪的Hello World？這也是我在學習、使用ReactJs過程中的感受。Hello World程序讓我們瞭解一門新語言的基本結構、框架和運行方式。C、Java、C#等語言的HelloWorld程序都簡單、容易上手。如果編寫Control程序，只需寫main()，調用一個print()，就能看到黑白屏上的Hello World;如果來個複雜點的Dialog程序，也有成熟的IDE，讓你很容易的出現Hello World;然而ReactJs則不然，想寫一個Hello World則需要花很多倍的時間。我想這也是ReactJs學習曲線較高的重要原因。
首先ReactJs目前沒有配套的IDE，當然你可以使用記事本、Ultr、Sublime或者WebStorm等。其次ReactJs官網的Demo讓你頭暈，因爲不是寫一個HelloWorld了事，ReactJs是單頁面的應用程序，當出現多個ReactJs文件時，需要編譯成一個js文件，你需要使用Webpack等，另外Demo一般還不是那麼簡單的使用Webpack，可能使用grunt調用，再加上npm生成依賴包，每個輔助小工具又加上各自的配置文件。
好了，要想寫一個ReactJs的HelloWorld,你得先了解npm,Webpack,grunt等。另外如果以前是編寫C、C++、C#和Java的程序員，還要適應一個配置文件類型不一樣。C、C++一般採用.ini作爲配置文件,C#、Java一般採用xml，到ReactJs時，基本上都是json格式。雖然這在我看來是種進步，但改變了風格，感覺也就不太對。
對於寫一個符合ReactJs風格的HelloWorld，我覺得可以考慮分解爲幾個demo來完成。
一是採用傳統的Web網頁的HelloWorld寫法。
代碼如下（只一個文件index1.html）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
二是採用傳統Web網頁中html與js文件分離（兩個文件index2.html,與src/helloworld.js）。
三是採用ReactJs風格，將html與React組件分離，編譯React組件成另一js文件（兩個文件index3.html與dist/bundle.js，bundle.js是編譯helloworld後的Js文件）。這種方式纔是符合ReactJs的風格。
通過npm加載依賴包，而不是將依賴js包直接拷貝到lib裏，這樣最方便的就是依賴包升級方便，只需管理依賴包配置文件即可控制依賴包的版本。如下：
$ npm install --save react react-dom
編譯helloworld組件成一個js文件。編譯完的js文件並不影響我們調試。如下：
$ webpack helloworld.js bundle.js
在學ReactJs的Helloworld過程中,我們會感到沮喪，因爲跟傳統的編程方式變化較大。學習語言其實就是學習一種規則，定的規則太多，自然要花更多的時間。如果完成了第三個demo，ReactJs的整體編寫框架也就基本瞭解了。