从Hello World开始

教程目标

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章