老张跟着老许学前端之---react的初次接触------sass框架和组件化为主要文章内容

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://swiperjs.com/react

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>

以上就是我们初次接触react所学习的所有内容，肯定有很多很多不完全的和理解不到位的地方，在接下来的学习中，我会把他研究的更加的透彻！！