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

相关推荐
编程点滴路1 分钟前
LinkedList源码解析
java·开发语言
Lysun0012 分钟前
(pnpm)引入 其他依赖失败,例如‘@element-plus/icons-vue‘失败
前端·javascript·npm·pnpm
喂我花生(๑•̀ㅂ•́)و✧29 分钟前
JAVA中ArrayList的解析
java·开发语言·算法
forestsea31 分钟前
Java 基础面试题
java·开发语言
草莓啵啵~38 分钟前
STL-list
开发语言·c++
长勺1 小时前
Java云原生到底是啥,有哪些技术
java·开发语言·云原生
等等5431 小时前
Java EE初阶——初识多线程
java·开发语言·jvm
hrrrrb1 小时前
【Rust】枚举和模式匹配
开发语言·rust
沐雨潇竹2 小时前
使用定时器监视当前PID 如果当前程序关闭 UI_Core.exe 也随之自动关闭实现方法
开发语言·qt·ui
大锦终2 小时前
【C++】红黑树
c语言·开发语言·数据结构·c++