React 零基础入门，一篇搞懂核心用法（适合新手）

LIO2026-04-11 11:38

正文

React 是目前使用最广的前端框架之一，由 Facebook 开发，主打函数组件 + Hooks，生态非常完善。这篇带你从零学会 React 基础，看完就能写页面。

1. 创建 React 项目

bash 复制代码

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

2. 函数组件与 JSX

React 用 JSX 写视图，结构类似 HTML，但可以直接写 JS 表达式。

最简单组件：

jsx 复制代码

function App() {
  return <div>Hello React</div>
}

export default App

3. 状态管理：useState

React 用 useState 定义响应式数据：

jsx 复制代码

import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

4. 条件渲染 & 列表渲染

条件

jsx 复制代码

{
  isShow && <div>显示内容</div>
}

列表

jsx 复制代码

const list = ['vue', 'react', 'angular']

return (
  <ul>
    {list.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
)

5. 事件处理

jsx 复制代码

function handleClick() {
  alert('点击了')
}

return <button onClick={handleClick}>按钮</button>

6. 副作用 useEffect

相当于生命周期，常用于请求数据、定时器、监听窗口大小等。

jsx 复制代码

import { useEffect } from 'react'

useEffect(() => {
  // 进入执行
  console.log('组件挂载或更新')

  return () => {
    // 销毁时执行
    console.log('组件卸载')
  }
}, []) // 空数组 = 只执行一次

7. 组件拆分与传值

父组件：

jsx 复制代码

<Child name="React" />

子组件：

jsx 复制代码

function Child(props) {
  return <div>来自父组件：{props.name}</div>
}

8. 样式写法

行内样式：style={{ color: 'red' }}
className：<div className="box">
CSS Modules / styled-components

总结

React 基础核心：

函数组件 + JSX
useState 管理状态
useEffect 处理副作用
组件拆分 + Props 传值
列表 & 条件渲染

学会这些，你已经可以独立完成简单项目和常见业务页面。

祝各位指尖飞码，bug 不沾。

个人观点 · 仅供参考