网站建设怎么改栏目名称,微信网站平台建设,郑州seo排名收费,wordpress orm在使用vite创建react时#xff0c;有一个语言选项#xff0c;就是typescript-SWC#xff0c;这里介绍一下SWC。
SWC#xff1a;可扩展的Rust的平台#xff0c;用于下一代快速开发工具#xff0c;SWC比Babel快20倍。
简单来说#xff0c;就是用于格式转换的#xff0c…在使用vite创建react时有一个语言选项就是typescript-SWC这里介绍一下SWC。
SWC可扩展的Rust的平台用于下一代快速开发工具SWC比Babel快20倍。
简单来说就是用于格式转换的比Babel要快所以在选择语言时选择带SWC的就行结构和不带SWC的一样。
在创建的项目的入口文件中 我们可以看到react-dom/client,这里分为两种一种是客户端dom另一个就是服务端domreact-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 */}
多行注释快捷键altshifta {/* div className{myClass2} hello world!/divbutton onClick{handleClick}click me/buttonbutton onClick{handleClick2(123)}click me2/buttonbutton onClick{(e)handleClick3(456,e)}click me3/button */}
⑧唯一根节点
这一点和vue2倒是挺像就是外层只有一个div节点如果有两个就直接报错了其他的代码需要写在外层div的里面
return (divdiv className{myClass.join( )}App/divdiv className{myClass2} hello world!/divbutton onClick{handleClick}click me/buttonbutton onClick{handleClick2(123)}click me2/buttonbutton onClick{(e)handleClick3(456,e)}click me3/button{list.map((item,index) li key{index}{item}/li)}/div)
不过这也不是绝对的可以使用Fragment的方式来进行解决 return (Fragmentdivdiv className{myClass.join( )}App/divdiv className{myClass2} hello world!/divbutton onClick{handleClick}click me/buttonbutton onClick{handleClick2(123)}click me2/buttonbutton onClick{(e)handleClick3(456,e)}click me3/button{list.map((item,index) li key{index}{item}/li)}/divdiv/div/Fragment)
另一种简写形式
return (divdiv className{myClass.join( )}App/divdiv className{myClass2} hello world!/divbutton onClick{handleClick}click me/buttonbutton onClick{handleClick2(123)}click me2/buttonbutton onClick{(e)handleClick3(456,e)}click me3/button{list.map((item,index) li key{index}{item}/li)}/divdiv/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 reactconst 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 i0;ilist.length;i){// list[i]li{list[i]}/li// }const myClass [box1, box2]const myClass2 classNames({box1:true,box2:true,[style.box5]:true})return (divdiv className{myClass.join( )}App/divdiv style{{color:purple,fontWeight:900}}App2/divdiv className{myClass2} hello world!/divbutton onClick{handleClick}click me/buttonbutton onClick{handleClick2(123)}click me2/buttonbutton onClick{(e)handleClick3(456,e)}click me3/button{list.map((item,index) li key{index}{item}/li)}/divdiv/div/)
}export default App界面中的效果
