在使用vite创建react时，有一个语言选项，就是typescript-SWC，这里介绍一下SWC。
SWC：可扩展的Rust的平台，用于下一代快速开发工具，SWC比Babel快20倍。
简单来说，就是用于格式转换的，比Babel要快，所以在选择语言时，选择带SWC的就行，结构和不带SWC的一样。
在创建的项目的入口文件中
我们可以看到react-dom/client,这里分为两种，一种是客户端dom，另一个就是服务端dom，react-dom/server.根据不同的开发场景引入的createRoot不同。
二、jsx与HTML的区别
①标签需要小写
在jsx中，标签需要小写，比如div,只能是<div></div>，而在HTML中大小写都可以。
②标签需要闭合
在，jsx中，标签需要闭合，比如input,需要写成<input />，而在HTML5中，可以不写闭合标签。
③class和for关键字
在jsx中，需要将class改成className（特指在定义类名时），另一个就是将for改成htmlFor(用于select标签)
④属性驼峰式写法
除自定义属性外，可以使用短横线的形式，标签中的属性需要使用驼峰命名的形式。
⑤类似与vue的插值语法（react貌似不这样叫）
就是{}形式，和vue中插值语法{{}}的用法一样，在里面可以写变量，三目运算符等js代码。
⑥属性使用大括号
这里需要注意区分vue中的插值语法
<div className={{active:true}}> hello world!</div>里面的大括号是因为是对象
⑦添加注释
在jsx中，单行注释（快捷键：ctrl+/）：
{/* <button onClick={handleClick}>click me</button> */}多行注释（快捷键：alt+shift+a）：
{/* <div className={myClass2}> hello world!</div>
<button onClick={handleClick}>click me</button>
<button onClick={handleClick2(123)}>click me2</button>
<button onClick={(e)=>handleClick3(456,e)}>click me3</button> */}⑧唯一根节点
这一点和vue2倒是挺像，就是外层只有一个div节点，如果有两个就直接报错了，其他的代码需要写在外层div的里面
return (
<div>
<div className={myClass.join(' ')}>App</div>
<div className={myClass2}> hello world!</div>
<button onClick={handleClick}>click me</button>
<button onClick={handleClick2(123)}>click me2</button>
<button onClick={(e)=>handleClick3(456,e)}>click me3</button>
{list.map((item,index) => <li key={index}>{item}</li>)}
</div>
)不过这也不是绝对的，可以使用Fragment的方式来进行解决
return (
<Fragment>
<div>
<div className={myClass.join(' ')}>App</div>
<div className={myClass2}> hello world!</div>
<button onClick={handleClick}>click me</button>
<button onClick={handleClick2(123)}>click me2</button>
<button onClick={(e)=>handleClick3(456,e)}>click me3</button>
{list.map((item,index) => <li key={index}>{item}</li>)}
</div>
<div></div>
</Fragment>
)另一种简写形式：
return (
<>
<div>
<div className={myClass.join(' ')}>App</div>
<div className={myClass2}> hello world!</div>
<button onClick={handleClick}>click me</button>
<button onClick={handleClick2(123)}>click me2</button>
<button onClick={(e)=>handleClick3(456,e)}>click me3</button>
{list.map((item,index) => <li key={index}>{item}</li>)}
</div>
<div></div>
</>
)但是这种简写形式只限于Fragment标签没有key属性的情况下可以使用，一旦有属性，就会报错，因为我们无法给空标签加属性。
三、样式
样式分为三种，下面分别进行介绍。
①行内样式
<div style={{color:"purple",fontWeight:900}}>App2</div>就是这样的style={对象}的形式，记得两个单词的样式要写成驼峰形式。
补充一下：就是在写长宽时，后面的px可以省略，默认就是px
②全局样式
//步骤一
import './css/_sass.scss'
//步骤二：书写css样式
$bg:red;
.box3{
background: $bg;
}
.box2{
color:blue;
}
.box1{
border: 2px solid red;
}
//步骤三：在需要使用的地方使用
const myClass = ['box1', 'box2']
const myClass2 = classNames({
box1:true,
box2:true,
[style.box5]:true
})
③局部样式
这种貌似还是第一次见这样的
首先，建立css文件，这里注意要和全局样式的样式进行区分，全局样式建立文件直接是***.css，而局部样式的文件必须是***.module.css
然后正常书写css样式
然后是使用的时候：
这里类使用js的模块化，需要这样引入
import style from './css/closeStyle.module.css'style可以随便起名，就是需要指定一个类似于模块名的名称
然后使用
const myClass2 = classNames({
box1:true,
box2:true,
[style.box5]:true
})
我上面的使用方式是以classname的方式使用的，这样在使用时更加方便，直接使用定义的变量名称
<div className={myClass2}> hello world!</div>使用classname需要安装：
然后引入才可以使用：
import classNames from 'classnames'还有其他的方式用于样式的设置，这里暂时不再详细介绍：
①css-in-JS方案
②Tailwind CSS 方案
最后附上完整的案例代码：
import React from 'react'
import './css/_sass.scss'
import classNames from 'classnames'
import style from './css/closeStyle.module.css'
//引入Fragment
import {Fragment} from 'react'
const handleClick=(e:any)=>{
console.log(e);
// e不是原生事件
//e.nativeEvent是原生事件
}
const handleClick2=(num:any)=>{
return(e:any)=>{
console.log(num);
}
// e不是原生事件
//e.nativeEvent是原生事件
}
const handleClick3=(num:any,e:any)=>{
console.log(num,e);
// e不是原生事件
//e.nativeEvent是原生事件
}
const App = () => {
let list=['1','2','3'];
// for(let i=0;i<list.length;i++){
// list[i]=<li>{list[i]}</li>
// }
const myClass = ['box1', 'box2']
const myClass2 = classNames({
box1:true,
box2:true,
[style.box5]:true
})
return (
<>
<div>
<div className={myClass.join(' ')}>App</div>
<div style={{color:"purple",fontWeight:900}}>App2</div>
<div className={myClass2}> hello world!</div>
<button onClick={handleClick}>click me</button>
<button onClick={handleClick2(123)}>click me2</button>
<button onClick={(e)=>handleClick3(456,e)}>click me3</button>
{list.map((item,index) => <li key={index}>{item}</li>)}
</div>
<div></div>
</>
)
}
export default App
界面中的效果：
