首页 > 其他分享 >#yyds干货盘点# 歌谣学前端之react笔记之第一个react项目

#yyds干货盘点# 歌谣学前端之react笔记之第一个react项目

时间:2022-12-09 17:35:05浏览次数:37  
标签:yyds React 歌谣 index html js react 干货 root

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣

#yyds干货盘点# 歌谣学前端之react笔记之第一个react项目_html

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);

运行结果

#yyds干货盘点# 歌谣学前端之react笔记之第一个react项目_App_02


标签:yyds,React,歌谣,index,html,js,react,干货,root
From: https://blog.51cto.com/u_14476028/5926291

相关文章

  • #yyds干货盘点# 歌谣学前端之react笔记之学习日历样式的设置
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • #yyds干货盘点# 名企真题专题:火眼金睛
    1.简述:描述现在我们需要查出一些作弊的问答社区中的ID,作弊有两种:1.A回答了B的问题,同时B回答了A的问题。那么A和B都是作弊。2.作弊ID用户A和作弊ID用户B同时回答了C的问题,那......
  • 干货!基于Zynq-7010/7020的多网口工业网关方案分享
    随着工业物联网的飞速的发展,5G时代的到来,工业控制系统在生产领域应用越来越广泛,工业物联网为未来工业控制系统灵活性和可扩展性的需求提供了支持。工业物联网使我们的生产......
  • React项目中ESLint对a标签无href属性的警告问题
    当我们react项目中使用a标签但是没加href属性时,会看到如下警告:Thehrefattributeisrequiredforananchortobekeyboardaccessible.Provideavalid,navigablea......
  • React 基于Antd的二次封装(属性传递)
     方式一(...prop):    方式二(...rest):  ......
  • #yyds干货盘点#vue框架computed的原理
    computed原理,首先得讲vue响应式原理,因为computed的实现是基于​​Watcher​​​对象的。那么vue的响应式原理是什么呢?众所周知,vue是基于​​Object.definePrope......
  • #yyds干货盘点#css样式vh屏幕高度
    众所周知,在从css3中,vh和wh指的是浏览器可见区域。1vw等于视窗总宽度的1%1vh等于视窗总高度的1%移动端使用vh遇到的问题由于,各种浏览器的计算高度不一样,譬如Safari浏览......
  • react:React Hook "useSelector" cannot be called at the top level.
      翻译过来的意思是:ReactHook“useSelector”不能在顶层调用。调用useSelector这个hook需要放在函数组件内部原代码constcollapsed=useSelector((state:Roo......
  • #yyds干货盘点# 名企真题专题:交叉线
    1.简述:描述大M布置给小M一个题目:首先给出n个在横坐标上的点,然后连续的用半圆连接他们:首先连接第一个点与第二点(以第一个点和第二点作为半圆的直径)。然后连接第二个第三个......
  • React笔记-基础
    Redirect的使用一般写在所有路由注册的最下方,当所有路由都无法匹配的时候,跳转到Redirect指定的路由具体编码:<Switch> <Routepath='./xxx'component={xxx}/>......