教程目標
使用React輸出Hello World到網頁瀏覽器
新建HTML文件
網頁的內容通過HTML文件來承載。本教程中的HTML文件很簡單，如下所示：
index.html
<html>
<head>
<title>Hello World - React基礎教程</title>
</head>
<body>
<div id="root"></div>
<!-- 引入React框架 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</body>
</html>
新建CSS文件
css文件爲網頁內容增加了樣式，我們對元素新增class屬性，這根據個人喜好，我喜歡將樣式定義通過class屬性來選擇，根據id也是可以的。新增class屬性如下：
<div id="root" class="container"></div>
css文件定義style.css
.container{
width:100%;
text-align: center;
}
新建JS文件
我們在js文件中使用React輸出Hello World到html的div元素中。
index.js
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
然後再index.html文件中引入index.js，如下：
...
<script src="index.js"></script>
</body>
可在CodePen 體驗本教程的完整實例。