教程目标
使用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 体验本教程的完整实例。