第1课: React基础入门

1. React是什么？

React的核心特点

• 组件化：将UI拆分成独立、可复用的组件
• 声明式：描述UI应该是什么样子，而不是如何操作DOM
• 虚拟DOM：高效的DOM更新机制
• 单向数据流：数据从父组件流向子组件

2. 组件化思想

传统开发 vs 组件化开发

// 传统方式：HTML、CSS、JS分离
<div id="app">
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
</div>

// 需要分别维护三个文件

// React方式：组件封装
function App() {
    return (
        <div>
            <Header />
            <MainContent />
            <Footer />
        </div>
    );
}

// 每个组件都是独立的单元

组件的好处

• 可复用性：一次编写，多处使用
• 可维护性：每个组件职责单一，易于维护
• 可测试性：组件可以独立测试
• 团队协作：不同开发者可以并行开发不同组件

3. 虚拟DOM原理

虚拟DOM的工作流程

为什么需要虚拟DOM？

• 性能优化：减少直接操作DOM的次数
• 跨平台能力：虚拟DOM可以渲染到不同平台
• 开发体验：开发者无需关心DOM操作细节

4. 第一个React组件

函数组件示例

// 最简单的函数组件
function Welcome() {
    return <h1>Hello, React!</h1>;
}

// 使用组件
function App() {
    return (
        <div>
            <Welcome />
            <p>这是我的第一个React应用</p>
        </div>
    );
}

类组件示例（了解即可）

// 类组件（传统方式，现在推荐使用函数组件）
class Welcome extends React.Component {
    render() {
        return <h1>Hello, React!</h1>;
    }
}

5. 声明式编程 vs 命令式编程

// 描述"如何做"
const button = document.getElementById('btn');
button.addEventListener('click', () => {
    const text = document.getElementById('text');
    text.style.color = 'red';
    text.textContent = '按钮被点击了！';
});

// 描述"应该是什么样子"
function Button() {
    const [clicked, setClicked] = useState(false);
    
    return (
        <div>
            <button onClick={() => setClicked(true)}>
                点击我
            </button>
            <p style={{color: clicked ? 'red' : 'black'}}>
                {clicked ? '按钮被点击了！' : '等待点击...'}
            </p>
        </div>
    );
}

6. React生态系统

核心生态工具

• React Router：单页面应用路由管理
• Redux：可预测的状态容器
• Next.js：React服务端渲染框架
• Create React App：官方脚手架工具

// 参考答案
function ProfileCard() {
    return (
        <div style={{border: '1px solid #ccc', padding: '20px', margin: '10px'}}>
            <h2>张三</h2>
            <p><strong>职位：</strong>前端工程师</p>
            <p>热爱编程，专注于React技术栈开发</p>
        </div>
    );
}

function App() {
    return <ProfileCard />;
}