从Hello World开始

最新推荐文章于 2022-05-12 00:30:03 发布

enginecode

最新推荐文章于 2022-05-12 00:30:03 发布

阅读量129

点赞数

分类专栏： React基础教程文章标签： React 前端教程

本文链接：https://blog.csdn.net/lucaoyun/article/details/102492695

版权

React基础教程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

教程目标

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

enginecode

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从Hello World开始

教程目标使用React输出Hello World到网页浏览器新建HTML文件网页的内容通过HTML文件来承载。本教程中的HTML文件很简单，如下所示：index.html<html><head> <title>Hello World - React基础教程</title></head><body> <...
复制链接

扫一扫

专栏目录