React基础之项目创建

项目创建

create-react-app 项目名(小写)

运行

pnpm run start

在React中,使用的语法格式是jsx,也就是js与html相结合的形式

import logo from './logo.svg';

import './App.css';

function App() {

return (

<div className="App">

<header className="App-header">

<img src={logo} className="App-logo" alt="logo" />

</header>

</div>

);

}

export default App;

react中只能返回一个根元素

如果需要使用多个<div>,可以外部包一个整体的div标签,或是直接使用一个空标签来包含

import logo from './logo.svg';

import './App.css';

function App() {

return (

<>

<div className="App">

<header className="App-header">

<img src={logo} className="App-logo" alt="logo" />

</header>

</div>

<div></div>

</>

);

}

export default App;

react中需要标签的闭合

相关推荐
六个点几秒前
图片懒加载与预加载的实现
前端·javascript·面试
weixin_460783876 分钟前
Flutter解决TabBar顶部页面切换导致页面重载问题
android·javascript·flutter
天道有情战天下22 分钟前
python flask
开发语言·python·flask
逍遥客.24 分钟前
uniapp对接打印机和电子秤
javascript·vue.js·uni-app
小沙盒25 分钟前
godot在_process()函数实现非阻塞延时触发逻辑
javascript·游戏引擎·godot
Moment29 分钟前
前端 社招 面筋分享:前端两年都问些啥 ❓️❓️❓️
前端·javascript·面试
Moment29 分钟前
一坤时学习 TS 中的装饰器,让你写 NestJS 不再手软 😏😏😏
前端·javascript·面试
帅弟1501 小时前
Day4 C语言与画面显示练习
c语言·开发语言
qhs15731 小时前
Kotlin字符串操作在Android开发中的应用示例
android·开发语言·kotlin
枣仁_2 小时前
大型语言模型(LLM)深度解析
前端·javascript·面试