掌握这些，就能当react前端了

前端概述

前端（Frontend）指的是Web开发中与用户直接交互的部分，包括用户界面的设计、用户体验以及与用户进行交互的功能实现。前端开发主要涉及使用HTML、CSS和JavaScript等技术构建网页，并通过浏览器来展示和运行。前端往往与后端（Backend）搭配工作，前端调后端的接口，并处理返回的数据，将数据显示在页面上。

前言

我目前是一名工作经验一年的前端开发工程师，学历大专，目前业余在北理工专升本，专业是计算机科学与技术。大专的专业是建筑室内设计，不转行就是在设计院工作。我偶尔会写小小说，已经发表了一定的作品，但不管是当设计师，还是写作，两极分化严重，收入要么很高，要么很低。学校实习结束后，我去达内培训前端，此前我对编程一无所知，基础为零。经过三个月的培训，我在北京入职了一家主要做军工企业项目的it公司，半年后转正，工资不算高，也不算低，做react项目基本游刃有余。

前端开发者需要具备的素质

1、学习能力：当程序员需要一定的自学能力，因为it行业，特别是前端，技术发展迅速，不断地学习才能跟上时代的发展，进行更高效、高质量的编程。还要善于总结，及时消化遗留的问题，要保证下一次遇到的时候能够解决。

2、思考能力：当遇到复杂的bug时，开发者要像侦探一样抽丝剥茧，不断调试，多角度思考，发现问题所在。遇到一个没有做过的功能时，要有思路，即使不知道代码如何写，也成功一半了。

3、团队合作和沟通能力：具备良好的团队合作和沟通能力，能够与后端开发人员、UI设计师、项目经理和其他团队成员有效合作，推动项目的顺利进行。

4、设计和用户体验：对设计原则和用户体验有一定的了解，具备一定的美学和网页设计能力，能够优化用户界面和交互体验。

前端开发需要掌握的既能

1、HTML（超文本标记语言）：用于定义网页的结构和内容。开发人员使用HTML标签来创建网页的各种元素，如标题、段落、图像、链接等。HTML比较简单，也是前端的核心语言。

2、CSS（层叠样式表）：用于控制网页的样式和布局。CSS可以设置字体、颜色、大小、边距、背景等各种视觉效果，使网页具有吸引力并适应不同的设备和屏幕尺寸。高级的CSS开发者可以用代码作画，游戏项目对CSS的要求很高。另外，现代前端开发注重响应式设计，即使得网页能够根据用户使用的设备和屏幕尺寸做出自适应的布局和显示。这样用户无论是在电脑、平板还是手机上浏览网页，都能够有良好的用户体验。

3、JavaScript：一种用于实现网页交互和动态功能的脚本语言（JavaScript与Java是两种不同的语言）。有人认为，JS才是前端的编程语言，因为逻辑部分主要由JS完成。开发人员可以实现例如表单验证、响应用户事件（如点击、滚动等）、与服务器进行数据交互等功能。

4、前端框架和库：开发人员可以使用各种前端框架和库来简化开发过程和提高效率。常见的前端框架包括React、Angular、Vue、Svelte等，它们提供了组件化开发、状态管理、路由管理等功能。此外，还有许多JavaScript库可用于实现特定的功能，如jQuery、Bootstrap等。往往开发人员可以专攻一种框架，在中国，目前React的市场占有率最高，其次是Vue，一些老项目会用到jQuery。

5、Git：Git 是一个分布式版本控制系统，广泛用于软件开发中的源代码管理。它可以追踪文件的变化、协调多个开发者之间的工作，并提供了版本管理、分支管理、合并等功能。如今，可以使用例如小乌龟（TortoiseGit）或者VsCode自带的git工具，代替命令行管理代码。

HTML

这里只介绍基本知识点的学习范围，详细内容不多介绍。掌握这些，就可以干前端了。当然和高级前端还有差距。

1、div标签：div是代表一个区块，可以把一些其他的标签框定在一个区域内。

<div>
	<h1>区域内的文字标题<h1/>
	<span>内容：21qewrhf<span/>
<div/>

2、span标签：span用于设置文本内容。

<span>三个字<span/>

3、a标签：a是超链接标签，用于创建链接到其他网页、文件、位置或资源的链接，链接的地址在 href 属性中指定。

<a href="https://example.com">点击打开此网页<a/>

4、br标签：类似回车，用于换行。

<span>第一行<span/>
<br/>
<span>第二行<span/>

5、strong和b标签：两者效果相同，均为加粗文字。

<strong>文字加粗<strong/>
<b>也是文字加粗<b/>

6、button标签：一个可以点击的按钮。

<button disabled=false>点击</button>

7、input标签：一个可输入的输入框。

<input placeholder='请输入'/>

8、img标签：定义图像。

<img src="apple.gif" alt="" width="42" height="42">

9、video标签：定义视频。

<video src="video.mp4" width="640" height="360" controls>
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

10、HTML属性：用于为 HTML 元素提供额外信息或定义其行为和特征的标签属性。
id：锚点，给HTML元素定义唯一的名字。
class：类名，给HTML元素定义的名字，可以用于多个HTML元素。
style：行内样式，定义该HTML元素的css样式。

<div
	id="name"
	class="className"
	style="background-color: blue"
>
	这是一个 div 元素
</div>

11、HTML事件：用于触发浏览器中的行为。
onclick：单击鼠标时触发。
onselect：选取元素时触发。
onchange：元素改变时触发。
onfocus：获得焦点时触发。
onblur：元素失去焦点时触发。

<button onclick='submit()'>点击提交<button/>

12、HTML 符号
常用的只有空格。
（空格）：&nbsp

CSS

属性：
1、background-color：背景色。
2、color：文本颜色。
3、font-size：字号。
4、font-family：字体。
5、font-weight：文字粗细。
6、width：宽度。
7、height：高度。
8、border：边框样式。
9、padding：内边距。
10、margin：外边距。
11、display:none：隐藏元素。
12、display:flex：弹性布局，默认情况下，弹性容器的主轴是水平方向（从左到右），交叉轴是垂直方向（从上到下）。
12、1、justify-content：弹性布局下的左右居中或对齐。
12、2、align-items：弹性布局下的上下居中或对齐。
13、overflow：控制内容溢出元素框时添加滚动条。
14、transform：设置元素旋转、缩放、平移和倾斜等操作。
14、1、translate()：平移元素在水平和垂直方向上的位置。
14、2、rotate()：旋转元素围绕某一点的角度。
15、transition：元素的过渡效果。

伪类：
1、:hover：鼠标放在链接上的状态。
2、:active：点击鼠标的状态。
3、:checked：所有选中的元素。
4、:focus：获取焦点的状态。

伪元素：
1、::before：在选中元素的内容前插入一个虚拟的元素。
2、::after：在选中元素的内容后插入一个虚拟的元素。

class-name
{
	color: red;
    background-color: blue;
}

JavaScript

数据类型：
1、undefined：表示未定义的值。
2、null：表示空值。
3、boolean：表示布尔值，可以是 true 或 false。
4、number：表示数值，包括整数和浮点数。
5、string：表示字符串，由字符组成的序列。
6、object：表示复杂数据类型，由键值对组成的集合。
7、Array：表示数组，用于存储多个值的有序列表。
8、Function：表示函数，可执行的代码块。

定义变量：
1、局部变量：

let a = 1

2、常量：

const arr = []

输出语句：
1、console.log(“控制台输出的内容”)
2、alert(“提示”);

逻辑判断：
if-else：

// 当a等于1时，打印1，如果不是，当2等于2时，打印2，再不是，打印3。
if (a === 1) {
	console.log(1)
} else if (a === 2) {
	console.log(2)
} else {
	console.log(3)
}

三目运算：

// 如果a等于1时，则result等于value1，否则等于value2
var result = a === 1 ? value1 : value2;

// 如果a等于1时，则result等于value1，如果不是，当a === 2时，result等于value2，再不是，等于value3
var result = a === 1 ? value1 : a === 2 ? value2 : value3;

逻辑运算符：用于对多个条件进行组合判断。
1、&&（逻辑与）：当两个条件都为真时，返回真；否则返回假。
2、||（逻辑或）：当至少一个条件为真时，返回真；否则返回假。
3、!（逻辑非）：对条件进行取反。
4、!!（双逻辑非）：将条件转为true。

数组：
创建一个名为arr的数组：const arr = ['jack',true,'false',30,{number:5}]
数组可以包含任意类型的值，数组的每个元素都有对应的索引，从0开始，索引值为0代表第一个元素。例如，arr[0]为’jack’，arr[3]为30。
获取数组长度：arr.length，当数组为空数组时：arr.length == 0

数组方法：
1、map：对数组的每个元素执行指定的操作，并返回一个新的数组。三个参数：当前元素的值、当前元素的索引和被操作的数组本身。

const arr = [
  { id: 1, name: 'John' },
  { id: 2, age: 25 },
  { id: 3, name: 'Anna' }
];

const tempArr = arr.map((item,index,arr)=>{
    return item.name
})

console.log(tempArr)
// [ 'John', undefined, 'Anna' ]

2、forEach：与map类似，遍历数组的每个元素，并对每个元素执行指定的操作，不会返回新的数组，没有return。三个参数：当前元素的值、当前元素的索引和被操作的数组本身。

const arr = [
  { id: 1, name: 'John' },
  { id: 2, age: 25 },
  { id: 3, name: 'Anna' }
];

arr.forEach((item,index,arr)=>{
    console.log(item.name)
})

// John
// undefined
// Anna

3、filter：筛选数组中满足指定条件的元素，并返回一个新的数组，新数组包含符合条件的元素。三个参数：当前元素的值、当前元素的索引和被操作的数组本身。

const arr = [
  { id: 1, name: 'John' },
  { id: 2, age: 25 },
  { id: 3, name: 'Anna' }
];

const tempArr = arr.filter((item,index,arr)=>{
    return item.id >= 2
})

console.log(tempArr)
// [ { id: 2, age: 25 }, { id: 3, name: 'Anna' } ]

4、push：向数组的末尾添加一个或多个元素。

var fruits = ["apple"];

fruits.push("banana");
fruits.push("orange");

console.log(fruits); 
// ["apple", "banana", "orange"]

5、includes：检查数组是否包含指定的元素，并返回一个布尔值表示结果。

var fruits = ["apple", "banana", "orange"];

console.log(fruits.includes("apple")); // true
console.log(fruits.includes("grape")); // false

6、join：将数组的所有元素连接成一个字符串，并返回该字符串。

let fruits = ["apple", "banana", "orange"];

let result = fruits.join(", ");

console.log(result); 
// "apple，banana，orange"

7、toString：将数组转换为一个字符串，并返回该字符串。

let fruits = ["apple", "banana", "orange"];

let result = fruits.toString();

console.log(result); 
// "apple,banana,orange"

8、find：查找数组中满足指定条件的第一个元素，并返回该元素。三个参数：当前元素的值、当前元素的索引和被操作的数组本身。

let numbers = [2, 4, 6, 8, 10];

let result = numbers.find((number) => {
  return number > 5;
});

console.log(result)
// 6

9、concat：将两个或多个数组合并成一个新数组，并返回新数组。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const newArr = arr1.concat(arr2)

console.log(newArr)
// [ 1, 2, 3, 4, 5, 6 ]

另外，合并数组的方式还有解构方法：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const newArr = [...arr1,...arr2]

console.log(newArr)
// [ 1, 2, 3, 4, 5, 6 ]

10、往对象数组中添加新属性：

const arr = [
  { id: 1, name: 'John' },
  { id: 2, age: 25 },
  { id: 3, name: 'Anna' }
];

arr.forEach((item)=>{
    item.job = 'student'
})

console.log(arr)
//[
//  { id: 1, name: 'John', job: 'student' },
//  { id: 2, age: 25, job: 'student' },
//  { id: 3, name: 'Anna', job: 'student' }
//]

11、Set对象实现对象数组去重：

let arr = [
  { id: 1, name: 'John' },
  { id: 2, age: 25 },
  { id: 3, name: 'Anna' },
  { id: 3, name: 'Anna' }
];

arr = [...new Set(arr.map((item) => JSON.stringify(item)))].map((val) =>JSON.parse(val));

console.log(arr)
//[
//  { id: 1, name: 'John' },
//  { id: 2, age: 25 },
//  { id: 3, name: 'Anna' }
//]

对象：
创建一个名为obj的对象：const obj = {name:'jack',age:8,job:'student'}
用于存储多个键值对（属性和值）的集合。对象由一对花括号 {} 包围，内部包含一个或多个属性，每个属性由键和值组成，形式为 key: value。键是一个字符串或符号，而值可以是任意 JavaScript 数据类型。
当数对象为空对象时：Object.keys(obj).length == 0

对象方法：
1、Array.isArray：用于检测一个值是否为数组。

const arr = [1, 2, 3];
const obj = { name: 'John', age: 30 };
const str = 'Hello';

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
console.log(Array.isArray(str)); // false

2、hasOwnProperty：检查对象是否具有该的属性，返回布尔值。

const obj = {
  name: 'John',
  age: 30
};

console.log(obj.hasOwnProperty('name')); // true
console.log(obj.hasOwnProperty('gender')); // false

3、delete：删除对象的属性。

var obj = {
  name: 'John',
  age: 30
};

delete obj.age;

console.log(obj)
// { name: 'John' }

字符串：
创建一个名为name的字符串：const name= 'jack'

字符串方法：
1、JSON.parse()：将 JSON 字符串解析为对应的 JavaScript 对象或值。

var jsonString = '{"name":"John","age":30,"city":"New York"}';
var obj = JSON.parse(jsonString);

console.log(obj); 
// { name: 'John', age: 30, city: 'New York' }

2、Number： 将给定的值转换为数字。

const num1 = Number("123");

console.log(num1)
// 123

3、isNaN()：判断给定的值是否不是数字。返回一个布尔值。

console.log(isNaN("a"))
// true

4、split：将一个字符串拆分为子字符串，并将结果存储在一个数组中。

const str = "Hello,World,JavaScript";
const arr = str.split(","); // 使用逗号作为分隔符

console.log(arr) 
// [ 'Hello', 'World', 'JavaScript' ]

调接口：
封装接口（增删改查）：

import request from "@/utils/request";
const prefix = process.env.API_BASE_PATH + '/prefix';

// 查
export async function getData(options: any) {
  	return request(prefix + '/name', {
    	method: 'GET',
    	params: {
      		...(options || {}),
    	},
  	});
}

// 增
export async function addData(options: any) {
  	return request(prefix + '/name', {
    	method: 'POST',
    	...(options || {}),
  	});
}

// 改
export async function updateData(id:string,options:any ) {
  	return request(prefix + '/name/' + id, {
    	method: 'PUT',
    	...(options|| {}),
  	});
}

// 删
export async function deleteData(id: string) {
  	return request(prefix + '/name/' + id, {
    	method: 'DELETE',
  	});
}

Promise调接口：

import { getData, addData, updateData, deleteData } from '@/services'

// 查
const get = async () => {
	const res = await getData()
}

// 增
const add = async () => {
	cosnt res = await addData({data: params})
}

// 改
const update = async (id: any) => {
	const res = await updateData(id,{data: params})
}

// 删
const delete = async (id: any) => {
	await deleteData(id)
}

React

React引入钩子函数后，基本使用函数组件。
函数组件模型：

import type { ActionType } from '@ant-design/pro-components';
import { useEffect, useRef, useState } from 'react';
import { ProTable } from '@ant-design/pro-components'; // 引入组件
import { getDictEntries, testInterface } from '@/services'; //引入封装好的接口

// 定义props的类型
export interface ComponentProps {
	params: any;
	info: any;
}

const Component: React.FC<ComponentProps> = (props) => {
	// 定义变量
	const [status, setStatus] = useState<any>('');
	const actionRef = useRef<ActionType>();
	// 定义函数
	const dictStatus = async () => {
    	const res = await getDictEntries('ProjectStatus');
    	res?.status?.forEach((item: any) => {
      	const obj = {
        	value: item.name,
        	label: item.name,
      	};
      	emptyArr2.push(obj);
    	});
    	setProjectStatusArr(emptyArr2);
  	};

	// 初始化函数
	useEffect(() => {
		dictStatus()
	},[])

	// dom部分
	return (
		<span>{props?.info?.title}<span/>
		<ProTable
			columns={columns}
			actionRef={actionRef}
			rowKey="id"
		 	request={async () => {
          		const res = await testInterface({data: props?.params});
          		if (res.content) {
            		return Promise.resolve({
              			data: res.content,
              			total: res.totalElements,
            		});
          		} else {
            		return Promise.resolve({
              			data: [],
              			total: 0,
            		});
          		}
        	}}
		/>
	)
};
export default Component;

钩子函数：
useState：第一个参数为变量的值，第二个元素是一个函数，用于更新、改变该值。
useEffect：初始化，在组件渲染之后执行函数内部的操作。[]内可为空，也可设置变量，当该变量改变时，重新执行一次内部的操作。
useRef：使用 useRef 创建一个引用，然后将其赋值给 JSX 元素的 ref 属性，从而可以在组件中访问该 DOM 元素或组件实例。在antd组件的表单和表格运用广泛。

组件传值：props 是父组件向子组件传递数据和方法的一种机制。通过 props，我们可以将数据、函数或其他 React 元素传递给子组件，子组件可以使用这些 props 来渲染内容、执行操作或修改状态。

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  	const message = 'Hello, World!';

  	return (
    	<div>
      		<ChildComponent text={message} />
    	</div>
  	);
}

// 子组件
import React from 'react';

function ChildComponent(props) {
  	return <p>{props.text}</p>;
}

路由跳转（传值）：

import { history } from 'umi';
 
<a
  	onClick={() => {
    	history.push({
      		pathname: '/project/projectList/projectInfo',
      		state: { id: record.id },
    	});
  	}}
>
  	详情
</a>,

在目标页面，取id值的方法：
props?.location?.state?.id或history?.location?.state?.id，可以获取传过来的值。

import { getInterface } from '/services'
 
interface ProjectInfoProps {}
 
const ProjectInfo: React.FC<ProjectInfoProps> = (props: any) => {
  	const init= async () => {
    	const res = await getInterface(props?.location?.state?.id || history?.location?.state?.id)
  	};
}

Git

常用命令：
git init：在当前目录初始化一个新的 Git 仓库。
git clone ：克隆（下载）一个远程仓库到本地。
git add ：将文件添加到暂存区，准备提交。
git commit -m “”：将暂存区的文件提交到本地仓库，附带提交信息。
git status：查看当前仓库的状态，包括有修改的文件和暂存区的文件。
git pull：拉取远程仓库的最新提交。
git push：将本地提交推送到远程仓库。
git branch ：创建一个本地分支。
git branch -a：查看当前仓库的分支列表。
git checkout ：切换到指定分支。
git revert ：将代码撤销到某一版本。
git log：查看提交历史记录。
git reset .：清空添加到暂存区的所有文件。
git checkout .：撤销、还原所有本地文件修改过的代码（仅修改，未进行过任何git操作）。

git 提交代码基础五步：
1、git pull origin master 拉取主分支代码（拉取无法使用“-u”）
2、git status 看状态
3、git add . 把所有更改内容上传暂存区（有“warning”是正常的，注意add后面有个“.”）
4、git commit --no-verify -m ’ ’ 把代码上传到本地仓库（引号内为更改内容或代码提交信息，有时候提交内容会报错，可以加上–no-verify跳过检查，例：git commit --no-verify -m ’ 完成首页静态页面’）
5、git push 把代码上传到远程分支（第一次要输入git push -u origin <分支名>，设置默认推送路径，例：git push -u origin dev-xxx）