react笔记之第一个react项目

index.html

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>React项目</title>
</head>
<body>
<div id="root"></div>
<!--
    public/index.html是首页的模板，webpack在编译文件时，
会以index.html为模板生成index.html
-->
</body>
</html>

index.js

 // src/index.js 是js的入口文件
// 引入ReactDOM
import ReactDOM from 'react-dom/client';
 
// 创建一个JSX
const App = <div>
    <h1>这是一个React项目</h1>
    <p>我终于有了第一个React项目了!!!</p>
</div>;
 
// 获取一个根容器
const root = ReactDOM.createRoot(document.getElementById('root'));
// 将App渲染进根容器
root.render(App);

运行结果

posted @ 2022-11-05 20:41 前端导师歌谣阅读(23) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· react笔记之第一个react项目

· react笔记之学习之函数组件

· react学习笔记

· React学习笔记03-编写第一个react应用程序

· 创建React项目

公告

昵称：前端导师歌谣
园龄： 7年3个月
粉丝： 9
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

前端导师歌谣的博客

微信公众号关注前端小歌谣每日分享前端知识

react笔记之第一个react项目

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="zh">
	<head>
	<meta charset="UTF-8">
	<title>React项目</title>
	</head>
	<body>
	<div id="root"></div>
	<!--
	public/index.html是首页的模板，webpack在编译文件时，
	会以index.html为模板生成index.html
	-->
	</body>
	</html>

	// src/index.js 是js的入口文件
	// 引入ReactDOM
	import ReactDOM from 'react-dom/client';

	// 创建一个JSX
	const App = <div>
	<h1>这是一个React项目</h1>
	<p>我终于有了第一个React项目了!!!</p>
	</div>;

	// 获取一个根容器
	const root = ReactDOM.createRoot(document.getElementById('root'));
	// 将App渲染进根容器
	root.render(App);

前端导师歌谣的博客

微信公众号关注前端小歌谣 每日分享前端知识

react笔记之第一个react项目

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

微信公众号关注前端小歌谣每日分享前端知识