1、React入门第一天

最新推荐文章于 2024-08-27 16:49:00 发布

休要放肆

最新推荐文章于 2024-08-27 16:49:00 发布

阅读量231

点赞数 1

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/luochengcs000/article/details/126318050

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

React入门

首页：点击进入react官网

React作为前端主流框架，企业需求也在日益剧增，掌握它势在必行，今天来入个门；从简单静态项目到工程化开发

1、新建html文件

React和Vue一样，也是现在内存中加工虚拟dom，然后渲染到页面，所以页面需要一个容器；body中的div就是将来呈现渲染结果的容器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 新建一个div，给一个id属性，值为app -->
		<div id="app">
			
		</div>
	</body>
</html>

2、导入3个库文件

在这里插入图片描述

官网点击顶部文档菜单，右侧有CDN导入核心库的链接；官网这里只提供了俩文件，react.js和react-dom.js；这里其实还缺少一个文件，babel.min.js；

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

3、编写script部分

这里需要注意，看代码的备注

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 新建一个div，给一个id属性，值为app -->
		<div id="app">
			
		</div>
	</body>
</html>
<!-- 这里的type必须是text/babel，这是告诉浏览器需要使用babel来解析script标签中的代码，这个不是普通的javascript，前提是必须引入babel.min.js文件，否则会报错 -->
<script type="text/babel">
    // ReactDOM来自react-dom.js文件，render函数接受两个参数
    // 参数1：jsx语法，这里一定不要家引号，jsx本来就需要写标签，下一节会讲到
    // 参数2：表示jsx编译的结果显示到哪个dom元素
	ReactDOM.render(
		<h1>Hello，React！</h1>,
		document.getElementById('app')
	)
</script>