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中需要标签的闭合

相关推荐
luj_176819 小时前
星火科技助力边远地区防病攻坚
c语言·开发语言·c++·经验分享·算法
always_TT19 小时前
【Python 日志记录:logging 模块入门】
开发语言·python·php
xcLeigh19 小时前
Go入门:变量声明的五种方式详解
java·开发语言·golang
zmzb010320 小时前
C++课后习题训练记录Day175
开发语言·c++
脱胎换骨-军哥20 小时前
C++ 代码规范与格式化指南
开发语言·c++·代码规范
枕星而眠21 小时前
C++ STL Map容器完全指南:从有序红黑树到无序哈希表
java·开发语言
爱吃牛肉的大老虎1 天前
Rust对象之结构体,枚举,特性
开发语言·后端·rust
bbq粉刷匠1 天前
HashMap 底层原理深度拆解(二):putVal 完整链路解析(懒加载 · 链表遍历 · 尾插法)
java·开发语言·哈希算法
jarvisuni1 天前
DeepSeekFlash前端依旧拉垮,而且变慢了很多!
前端·javascript·算法
@三十一Y1 天前
C++:红黑树的实现
开发语言·c++