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

相关推荐
用户2519162427112 分钟前
Canvas之图像合成
前端·javascript·canvas
Mintopia16 分钟前
🎯 光与面的命运交锋:Möller-Trumbore 线段三角形相交算法全解析
前端·javascript·计算机图形学
Ares-Wang23 分钟前
Vue》》@ 用法
前端·javascript·vue.js
心.c1 小时前
JavaScript单线程实现异步
开发语言·前端·javascript·ecmascript
爱分享的程序员1 小时前
前端面试专栏-前沿技术:31.Serverless与云原生开发
前端·javascript·面试
awonw2 小时前
[python][基础]Flask 技术栈
开发语言·python·flask
木宇(记得热爱生活)2 小时前
Qt GUI缓存实现
开发语言·qt·缓存
lly2024062 小时前
C# 正则表达式
开发语言
Chef_Chen2 小时前
从0开始学习R语言--Day58--竞争风险模型
android·开发语言·kotlin
开开心心_Every2 小时前
多线程语音识别工具
javascript·人工智能·ocr·excel·语音识别·symfony