vue2的基础基本已经学完了,因为我的目标是实现web3在家办公,而区块链基本上用的框架都是react,vue2的学习只是为了让我接触react的时候没有那么难上手,这篇文章就是为了巩固这两天学习的react的基础学习。
这篇文章主要是react的基础使用:
1、创建一个新的react项目;
2、react怎么配置sass框架;
3、react怎么写组件;
4、react怎么给组件定义变量;
5、react怎么给组件定义多个class样式/类名
6、react怎么写swiper
7、react怎么使用外部的数组
1、怎么创建一个新的react项目:
npx create-react-app my-app
(这个my-app是你创建的项目的名字,随便取,但是名字不能有大写字母)
在终端输入这句代码,就创建好了一个新的react项目。
react的使用之写法和父子通信
1、写法
react的使用,react是一个函数式框架,里面所有的内容都是函数,他和其他的框架基本上是不一样的,比如我们之前使用的vue2,他叫渐进式框架,他里面是html + script + style,整个页面的所有布局非常的明确,一定有一个主页面,然后主页面下面有其他的组件和页面,而react更加的灵活,他每一个组件都可以是主页面,甚至没有主页面,他所有的内容都是组件,非常的绕,希望我后面的学习会慢慢理解他的真正含义。
他的使用也非常简单,我们学过函数,他的写法就是:
export const test = () =>{
// 这个里面些什么都行,他就是一个函数,里面可以有所有js的东西
// 但是要非常注意的一点就是,他的html只能写在return里面
return ( // 在这里,就是html代码,你也是随便写
<div></div>
)
}
上面就是基本写法,但是一定要注意,他的hhtml代码只能写在return()里面。
2、父子组件通信:
react和vue有很多相似之处,也基本完全不一样,这句话啥意思呢,比如,他们的父子通信用的都是props,但是写法完全不同,就是两种完全不一样的东西,我们的vue2写法是:
export default{
props:{
test:String
}
}
然后去找父组件要东西。
react的写法就完全不一样了,他的写法是这样的:
首先,他是一个函数式组件,所以他的prips就变成了他的入参:
export const test = (props) =>{}
然后,他如果需要接收多个参数,那么就需要把这个props去解构:
const test = (props) =>{
const {num1,num2,num3,num4,num5} = props
}
然后你要把解构后的props给于子组件,他需要在哪里使用:
const test = (props) =>{
const {num1,num2,num3,num4,num5} = props
return(
<div>{num1}{num2}{num3}{num4}{num5}</div>
)
}
大概就是那么个意思,你解构出来的props里面的参数,你需要再html代码中去使用他,不使用他就没用,我这里只是举了个例子,你把这个参数放在哪里,当调用他的时候,他就会出现在哪里
父组件中怎么给子组件props传值:
这个就更简单了,这个传值的方法和vue2大同小异:
// 首先,在父组件引入子组件:
import Name(随便起的名字,但是必须大驼峰) from '子组件路径'
export Father = () =>{
return(
<Name num1 = '随便给啥' num2 = ’随便给啥‘/>
)
}
这就是传值的方法,简单的一比。上面就是react的基础,下面开始进入正题
2、react怎么配置sass框架
1、首先找到最新的CRACO配置,要在这个环境下,才能配置sass项目。
https://craco.js.org/docs/getting-started/
然后安装craco
yarn add --dev @craco/craco
安装完成后去package.json中去看安装情况:
安装完成后,开始配置他:
在根目录建立一个文件,因为我们没有typescript,所以我们的文件名字取名为:craco.config.js,
创建好文件后,在文件内部输入配置:
module.exports = {
// ...
style: {
modules: {
localIdentName: "",
},
sass: {
loaderOptions: (sassLoaderOptions, { env, paths }) => {
/* ... */
return sassLoaderOptions;
},
},
},
};
这个是官方的固定写法,具体啥意思,咱们后期再研究,这样,craco就配置好了。
2、sass配置:
老规矩,安装sass:
yarn add sass sass-loader
安装完成后去查看安装情况:
安装完成后,就可以使用了,sass和less在使用过程中还是有些许区别的,因为是react,所以我们要改变我们的习惯,react是函数式框架和函数式组件,所以他的每一个文件都是js,里面是不能写css的所以,我们要学会在外部去写css,怎么个意思呢,就是每一个组件都是最好创建一个文件夹,这个文件夹里面有你的组件/页面和你的css,举个例子:
这里要有个特别注意的点,就是sass他的文件名字一定是[name].module.scss
然后在scss文件中写css,在index.js中引入他就可以了
引入代码就是:
import styles from "./style.module.scss";
然后,react里面的class变成了className,不一样的写法一样的意思,这里引入了sass文件后,他的className = "style.名字(你自己起的class类名)",这样样式就使用成功了!
因为我们组件化,所以有时候我们需要给与多个类名,这个时候我们就需要另一个包,叫做classname,他是让一个html键值对可以有多个class类名的包:
安装classname:
yarn add classname
安装完成后,检查安装情况:
他的写法是这样的:
export const test = (props) =>{
return(
<div className = {cs(类名,类名,类名,类名)}></div>
)
}
这样,我们的sass就配置完成了!
3、react怎么写swiper:顺便引入外部的数组图片
之前我们写swiper的时候,用的都是elementUi去写swiper,今天我们学了一个新的ui框架,他就叫做swiper,他的网址是:
https://www.swiper.com.cn/api/event/91.html
上面那个是最新的网址,但是并不是很全面,下面这个是老的网址,非常全面,但是有很多都已经被废弃了,所以,可以两个一起参考着用。
老规矩,先下载swiper:
yarn add swiper
安装后检查:
安装完成后就可以使用了:
在使用前,先引入swiper:
import { Swiper,SwiperSlide} from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
引入完成后就可以在return中使用它:
export const Swipers = () => {
return(
<Swiper>
<SwiperSlide>1</SwiperSlide>
<SwiperSlide>2</SwiperSlide>
</Swiper>
)
}
这样就形成了一个swiper。上面是最简单的引入方法,接下来,我们做一个完整的swiper,引入外部的数组中的图片,并且创建两个按钮,分别为上一页和下一页,点击的时候切换swiper的图片:
开始:
1、创建一个新组件,并给这个组件引入swiper:
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
function Swipers() {
return(
<div>
<Swiper>
<SwiperSlide>
<img alt="photo" src='' />
</SwiperSlide>
</Swiper>
)
}
2、创建两个按钮,为了控制这个swiper中的图片切换:
<button
className={styles.buttonTest}
onClick={() => {
>
下一个
</button>
<button
onClick={() => {
}}
>
上一个
</button>
3、外部定义一个数组,数组中四张图片:
在src下创建一个文件夹mock,里面创建一个文件index.js,文件中放入一个数组,放入我们需要的图片:
export const swiperList = [
"https://pic2.zhimg.com/v2-cea7f25486b10954f08a893522d3b0d9_r.jpg",
"https://picx.zhimg.com/v2-d40200f1ed08390233379778ff7e5068_r.jpg?source=1940ef5c",
"https://img2.baidu.com/it/u=2197064144,1061285397&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
"https://img0.baidu.com/it/u=2118499289,1357917233&fm=253&fmt=auto&app=120&f=JPEG?w=861&h=800",
"https://img2.baidu.com/it/u=1786813949,2353836820&fm=253&fmt=auto&app=120&f=JPEG?w=901&h=800",
"https://img0.baidu.com/it/u=2340799389,346488903&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1062",
];
4、在swiper文件中引入数组swiperList:
import { swiperList } from "../../mock";
5、我们只需要四张图片,所以在页面中我们需要一个新的数组,只要里面的四张图片,循环放入一个新的数组里面:这里用到了useState和副作用useEffect:
import { useEffect, useState } from "react"; // 引入我们需要用到的东西
const [list, setList] = useState([]); // const一个新的数组和改变数组的setList
// 用filter循环找到符合我们条件的数据,放入新的数组里面
const handleList = () => {
const newList = swiperList.filter((_item, index) => index < 4);
setList(newList);
};
// 将数据添加到新的数组list里面
useEffect(() => {
if (!swiperList || !swiperList?.length) return;
handleList();
}, [swiperList]);
6、循环新的数组list,并将list里面的内容放到swiper里面:
list.map((item, index) => {
return (
<SwiperSlide key={index}>
<img alt="photo" src={item} />
</SwiperSlide>
);
})
7、给swiper一个符合我们标准的样式:
import styles from "./style.module.scss";
<Swiper
className={styles.swipers}
>
{list.map((item, index) => {
return (
<SwiperSlide className={styles.swiperItem} key={index}>
<img alt="photo" src={item} />
</SwiperSlide>
);
})}
</Swiper>
.swipers {
width: 500px;
height: 600px;
.swiperItem {
img {
width: 100%;
height: 100%;
}
}
:global {
.swiper-pagination {
display: flex;
justify-content: center;
align-items: center;
}
}
.BulletItem {
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%;
overflow: hidden;
background-color: red;
color: yellow;
}
}
.buttonTest {
color: 0;
}
这样,我们的页面就基本完成了,接下来就是点击切换图片了
8、点击切换图片:
首先,我们需要给swiper一些属性,让他贴合我们的点击事件:
<Swiper
loop // 可以循环,就是当现在是最后一张图片的时候,点击下一个,就循环到第一张
className={styles.swipers} // 这个是他的class类名
modules={[Pagination]} // 这个是分页码,就是下面的小点点,告诉你现在在第几个,总共有几个
pagination={{ // 这个是可点击状态,要把他设置为true
clickable: true,
}}
onSlideChange={(swiper) => // 这个是当你鼠标滑动图片时需要做什么
console.log(swiper?.activeIndex, "slide change")
}
onSwiper={(swiper) => { //把初始化好的swiper 实例保存起来,后面可以直接使用他里面的属性
console.log(swiper);
setSwiperObj(swiper);
}}
>
然后给按钮点击事件,并将他要做的事情写在函数里:
<button
className={styles.buttonTest} // 类名
onClick={() => {
if (!refs?.current?.swiper?.slideNext) return;
refs.current.swiper.slideNext();
}}
>
下一个
</button>
<button
onClick={() => {
swiperObj.slidePrev();
}}
>
上一个
</button>
这里明显我使用了两种不同的方式去改变图片的走向,第二种就是因为我前面把初始化好的swiper 实例保存了起来,所以我上一个可以直接使用,而第一种就是如果我不保存的话,那么我就必须去找到他的slideNext()函数,才能使用他:
const refs = useRef(null);
<Swiper
ref = {refs}
></Swiper>