大纲

目标

• 了解 React 基础项目搭建：学习使用常见工程化方案搭建 React 项目，包括基于 Webpack5 和 Vite 的 React 工程搭建
• 掌握 React 基础语法：掌握 React 最核心语法，包括 JSX、props、state、条件渲染、生命周期与事件处理
• 了解 React 18 基础：了解 React Hooks，并深入理解 React Hooks 方案的优势
• 了解 React 生态体系：了解 React 主流技术栈及方案选型，包括：样式方案、状态方案等

React 基础

基础概念

• 声明式
• 组件化
• 虚拟 DOM
• 单向数据流
• JSX

组件

class Welcome extends React.Component {
	render() {
		return <div>Welcome</div>
	}
}

function Welcome() {
	return <div>Welcome</div>
}

状态

// 类组件
class Welcome extends React.Component {
	constructor() {
		this.state = {
			name: 'Lance'
		};
	}
	render() {
		return <div>Welcome</div>;
	}
}

// 函数式组件
function Welcome() {
	const [count, setCount] = useState(0);
	return <div>Welcome</div>;
}

属性

function Welcome(props) {
	return <div>{ props.name }</div>;
}

const element = <Welcome name="Lance" />