【React】入门Day01 —— 从基础概念到实战应用

目录

[一、React 概述](#一、React 概述)

二、开发环境创建

[三、JSX 基础](#三、JSX 基础)

[四、React 的事件绑定](#四、React 的事件绑定)

[五、React 组件基础使用](#五、React 组件基础使用)

[六、组件状态管理 - useState](#六、组件状态管理 - useState)

七、组件的基础样式处理


快速入门 -- React 中文文档

一、React 概述

  1. React 是什么
    • 由 Meta 公司开发,是用于构建 Web 和原生交互界面的库。
  2. React 的优势
    • 相较于传统基于 DOM 开发:
      • 采用组件化开发方式,提高代码复用性和可维护性。
      • 性能不错,通过虚拟 DOM 等机制提高渲染效率。
    • 相较于其它前端框架:
      • 拥有丰富的生态系统,有大量的第三方库和工具。
      • 支持跨平台开发,可以用于 Web、移动端(React Native)等。
  3. React 的市场情况
    • 全球流行,被大厂广泛使用。

二、开发环境创建

  1. create-react-app 工具
    • 是快速创建 React 开发环境的工具,底层由 Webpack 构建,封装了配置细节,开箱即用。

    • 使用命令

      bash 复制代码
      npx create-react-app [项目名称]

      创建项目,例如

      bash 复制代码
      npx create-react-app react-basic

      其中npx是 Node.js 工具命令,create-react-app是核心包,react-basic是项目名称可自定义

三、JSX 基础

  1. 什么是 JSX
    • 是 JavaScript 和 XMl (HTML) 的缩写,在 JS 代码中编写 HTML 模版结构,是 React 中构建 UI 的方式。
    • 优势:
      • 具有 HTML 的声明式模版写法,方便构建页面结构。
      • 拥有 JavaScript 的可编程能力,可灵活处理数据和逻辑。
  2. JSX 的本质
    • 是 JS 的语法扩展,浏览器不能直接识别,需解析工具解析后才能使用。
  3. JSX 高频场景
    • JS 表达式 :在 JSX 中通过{}识别 JavaScript 表达式,如变量、函数调用等,但 if 语句、switch 语句、变量声明不属于表达式不能在{}中。

    • 列表渲染 :使用map方法实现列表渲染,如

      html 复制代码
      {list.map(item=><li key={item.id}>{item}</li>)}
    • 条件渲染:通过逻辑与运算符 &&、三元表达式 (?:) 实现基础条件渲染,也可通过自定义函数 + 判断语句实现复杂条件渲染。

四、React 的事件绑定

  1. 基础实现

    • 通过语法on + 事件名称 = {事件处理程序}绑定事件,遵循驼峰命名法,如

      html 复制代码
      <button onClick={clickHandler}>click me</button>
  2. 使用事件参数

    • 在事件回调函数中设置形参 e 可获取事件对象,如

      html 复制代码
      <button onClick={clickHandler(e)}>click me</button>
  3. 传递自定义参数

    • 事件绑定位置改造成箭头函数写法传递实参,如

      html 复制代码
      <button onClick={()=>clickHandler('jack')}>click me</button>

      注意不能直接写函数调用。

  4. 同时传递事件对象和自定义参数

    • 在事件绑定位置传递事件实参 e 和自定义参数,事件处理函数中声明形参对应顺序,如

      html 复制代码
      <button onClick={(e)=>clickHandler('jack',e)}>click me</button>

五、React 组件基础使用

  1. 组件是什么
    • 一个组件是用户界面的一部分,有自己的逻辑和外观,组件之间可嵌套和复用。
  2. 组件基础使用
    • 在 React 中,组件是首字母大写的函数,渲染组件像使用标签一样,如定义组件

      html 复制代码
      function Button(){return <button>click me</button>}

      使用组件<Button/><Button></Button>

六、组件状态管理 - useState

  1. 基础使用
    • useState 是 React Hook,可向组件添加状态变量,状态变量变化会影响组件渲染结果(数据驱动视图),如

      html 复制代码
      const [ count, setCount ] = React.useState(0)

      通过setCount函数修改状态。

  2. 状态的修改规则
    • 状态被认为是只读的,应替换而不是修改,直接修改状态不能引发视图更新。
  3. 修改对象状态
    • 对于对象类型状态变量,应给set方法一个全新的对象来修改。

七、组件的基础样式处理

  1. 行内样式

    • 通过style属性设置行内样式,如

      html 复制代码
      <div style={{ color:'red'}}>this is div</div>
  2. class 类名控制

    • 引入 CSS 文件,使用className属性应用类名,如

      html 复制代码
      import './index.css';<span className="foo">this is span</span>
相关推荐
花生侠25 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯32 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调39 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined241 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
WaiterL1 小时前
一文读懂 MCP 与 Agent
前端·人工智能·cursor