前端必备基础回顾

在学习 React 之前，掌握一定的前端基础是非常必要的。本章节将回顾学习 React 所需的 HTML、CSS 和 JavaScript 核心知识。

2.1 HTML核心

语义化标签

• <header>：页面头部
• <nav>：导航栏
• <main>：主要内容
• <section>：内容区块
• <article>：独立内容
• <aside>：侧边栏
• <footer>：页面底部

表单元素

• <input>：输入框
• <textarea>：文本域
• <select>：下拉选择框
• <button>：按钮
• <label>：标签

布局基础

• 盒模型：content、padding、border、margin
• 浮动（float）：左浮动、右浮动
• 定位（position）：static、relative、absolute、fixed
• Flexbox：弹性布局
• Grid：网格布局

2.2 CSS核心

Flex/Grid布局

• Flex布局：

  • display: flex：创建弹性容器
  • flex-direction：主轴方向
  • justify-content：主轴对齐方式
  • align-items：交叉轴对齐方式
  • flex-wrap：换行方式

• Grid布局：

  • display: grid：创建网格容器
  • grid-template-columns：列定义
  • grid-template-rows：行定义
  • grid-gap：网格间距
  • grid-area：网格区域

样式优先级

• 内联样式 > ID选择器 > 类选择器 > 标签选择器
• !important 优先级最高（尽量避免使用）

响应式基础

• 媒体查询：@media (max-width: 768px) { ... }
• 相对单位：em、rem、%、vw、vh
• 弹性图片：max-width: 100%

2.3 JavaScript核心

变量、函数、数组/对象操作

变量

• var：函数作用域，存在变量提升
• let：块级作用域，不存在变量提升
• const：块级作用域，不可修改

函数

• 函数声明：function name() { ... }
• 函数表达式：const name = function() { ... }
• 箭头函数：const name = () => { ... }

数组操作

• push()：添加元素到末尾
• pop()：移除末尾元素
• shift()：移除首个元素
• unshift()：添加元素到开头
• map()：映射数组
• filter()：过滤数组
• reduce()：归约数组
• forEach()：遍历数组

对象操作

• 点表示法：obj.name
• 方括号表示法：obj['name']
• Object.keys()：获取对象键
• Object.values()：获取对象值
• Object.entries()：获取键值对

ES6+语法

箭头函数

// 传统函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

解构赋值

// 对象解构
const { name, age } = person;

// 数组解构
const [first, second] = array;

模板字符串

const name = 'React';
const message = `Hello, ${name}!`;

let/const

// let 声明可变变量
let count = 0;
count = 1;

// const 声明不可变变量
const PI = 3.14;

扩展运算符

// 数组扩展
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];

// 对象扩展
const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 };

Promise、async/await

Promise

const promise = new Promise((resolve, reject) => {
  if (condition) {
    resolve('Success');
  } else {
    reject('Error');
  }
});

promise
  .then(result => console.log(result))
  .catch(error => console.log(error));

async/await

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

数组方法

map

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
// [2, 4, 6]

filter

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
// [2, 4]

reduce

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
// 15

forEach

const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num));
// 1
// 2
// 3

find

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(num => num > 3);
// 4

some

const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
// true

every

const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every(num => num > 0);
// true

掌握这些前端基础知识，将为你学习 React 打下坚实的基础。在 React 开发中，这些知识会被频繁使用，特别是 JavaScript 的 ES6+ 语法和数组方法。