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

相关推荐
wangjialelele33 分钟前
Qt中的常用组件:QWidget篇
开发语言·前端·c++·qt
用户47949283569151 小时前
同样是 #,锚点和路由有什么区别
前端·javascript
爱上妖精的尾巴1 小时前
5-26 WPS JS宏数组元素添加删除应用
开发语言·前端·javascript·wps·js宏
是谁眉眼1 小时前
wpsapi
前端·javascript·html
_OP_CHEN1 小时前
C++进阶:(三)深度解析二叉搜索树原理及实现
开发语言·数据结构·c++·二叉树·二叉搜索树·键值对
wxxka2 小时前
git使用
开发语言·git
JS.Huang2 小时前
【JavaScript】Pointer Events 与移动端交互
前端·javascript
花北城2 小时前
【C#】List快速检查重复数据
开发语言·c#
练习时长一年2 小时前
Jdk反射优化
java·开发语言
Turnsole_y2 小时前
pytest与Selenium结合使用指南
开发语言·python