Hello React

人间观察师

已于 2022-04-16 11:52:58 修改

阅读量1.1k

点赞数

分类专栏：前端拓展文章标签： react

于 2022-04-11 16:14:29 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43018811/article/details/124101921

版权

前端拓展专栏收录该内容

3 篇文章

订阅专栏

这个博客展示了如何创建一个基本的React应用。通过引入React和ReactDOM库，以及使用Babel转换JSX，作者创建了一个显示'HelloReact'的<div>元素，并应用了自定义样式。jsx语法和内联样式的使用被详细解释，包括className替代class以及如何设置动态样式属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>React hello</title>
	</head>
	<style>
		.mystyle{
			background-color: blueviolet;
		}
	</style>
	<body>
		<div id="myDom">

		</div>

		<!--1:	react.production.min.js  必须要在 react-dom.production.min.js 之前引入	-->
		<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
		<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

		<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

		<!--2：type="text/babel"  注意这里是babel 不是javascript   写babel	是为了使用jsx 语法 它可以帮助我们将jsx翻译为dom元素	-->
		<script type="text/babel">
			const name = 'Hello React';
		const vDom = (
				<div>
					<h2 className="mystyle">{name}</h2>
					<span style={{color:'red',fontSize:29 + 'px'}}>123</span>
				</div>
		)
		//3： react 中class=> className  （因为react中有个class类的概念，为了区分所以用className代替class）
		//4：内联样式style 不能够写 双引号 ""      {{}}  外层大括号是为了接收动态参数,内层大括号是style的数据结构(对象格式)
		ReactDOM.render(
				vDom, document.getElementById('myDom') );
		</script>
	</body>
</html>

React中文文档