手机wap网站程序wordpress 企业内网
在使用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
界面中的效果：
