這是寫程式的初心者一開始都必須做的事情啊…而且這是有典故的，來看看為什麼大家都會做這件事情吧!
先簡單的介紹一下，「Hello, World!」指的是只在電腦螢幕上輸出「Hello, World!」（意為「世界，你好！」）這行字串的電腦程式。一般來說，這是每一種電腦程式語言中最基本、最簡單的程式，通常也是初學者所編寫的第一個程式。它還可以用來確定該語言的編譯器、程式開發環境，以及執行環境是否已經安裝妥當。
所以現在我的第一個任務，就是要成功的印出 「Hello, World!」。
接下來就開始動手了! 先開啟自己熟悉的編輯器，建立一個空白的網頁。
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React - Hello World</title>
</head>
<body>
</body>
</html>
再來就是把所需要的程式使用 CDN 的方式引用到這個網頁上。
所需要用到的程式有 react.js、react-dom.js 及 babel.min.js。
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React - Hello World</title>
</head>
<body>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</body>
</html>
接著我們要先把目標物件準備好，建立一個 div，並且幫它命名為 myApp。
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React - Hello World</title>
</head>
<body>
<div id="myApp"></div>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</body>
</html>
再來就是要寫程式把 「Hello, World!」 的文字顯示在 myApp 裡面嘍。
程式碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React - Hello World</title>
</head>
<body>
<div id="myApp"></div>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>hello, world!</h1>,
document.getElementById('myApp')
);
</script>
</body>
</html>
把這網頁另存成html檔後，再使用瀏覽器開啟，果然成功的把
Hello World!
顯示在畫面上了，任務成功!
下一篇文章將會詳細的解析程式內容。
