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

目录

一、React 概述

二、开发环境创建

三、JSX 基础

四、React 的事件绑定

五、React 组件基础使用

六、组件状态管理 - useState

七、组件的基础样式处理

---

快速入门 – React 中文文档

一、React 概述

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

二、开发环境创建

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

     npx create-react-app [项目名称]

     创建项目，例如

     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方法实现列表渲染，如

     {list.map(item=><li key={item.id}>{item}</li>)}

   • 条件渲染：通过逻辑与运算符 &&、三元表达式 (?:) 实现基础条件渲染，也可通过自定义函数 + 判断语句实现复杂条件渲染。

四、React 的事件绑定

1. 基础实现
   • 通过语法on + 事件名称 = {事件处理程序}绑定事件，遵循驼峰命名法，如

     <button onClick={clickHandler}>click me</button>

2. 使用事件参数
   • 在事件回调函数中设置形参 e 可获取事件对象，如

     <button onClick={clickHandler(e)}>click me</button>

3. 传递自定义参数
   • 事件绑定位置改造成箭头函数写法传递实参，如

     <button onClick={()=>clickHandler('jack')}>click me</button>

     注意不能直接写函数调用。
4. 同时传递事件对象和自定义参数
   • 在事件绑定位置传递事件实参 e 和自定义参数，事件处理函数中声明形参对应顺序，如

     <button onClick={(e)=>clickHandler('jack',e)}>click me</button>

五、React 组件基础使用

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

     function Button(){return <button>click me</button>}

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

六、组件状态管理 - useState

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

     const [ count, setCount ] = React.useState(0)

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

七、组件的基础样式处理

1. 行内样式
   • 通过style属性设置行内样式，如

     <div style={{ color:'red'}}>this is div</div>

2. class 类名控制
   • 引入 CSS 文件，使用className属性应用类名，如

     import './index.css';<span className="foo">this is span</span>