![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React 学习笔记
文章平均质量分 95
John是橘红
...
展开
-
01.React 使用
React 使用 1. JSX 基本使用 变量、表达式 class style 子元素和组件 在 render 函数中举例子 获取变量,插值语法 const pElem = <p>{this.state.name}</p> return pElem 表达式 大括号里都是 js 表达式 const exprElem = <p>{this.state.flag ? 'yes' : 'no'}</p> return exprElem 子元素 co原创 2022-04-19 01:44:37 · 199 阅读 · 0 评论 -
06.简书项目实战三:详情页面和登录功能实现
简书项目实战三:详情页面和登录功能实现 1. 详情页面布局 这部分的布局比之前的简单多了,就一个标题加上主要内容而已。 export default class Detail extends Component { render() { return ( <DetailWrapper> <Header>你听过婚姻式扶贫吗</Header> <Content> 内容 &l原创 2022-05-03 17:42:32 · 464 阅读 · 0 评论 -
05.简书项目实战二:首页开发
简书项目实战二:首页开发 本文是 React 的仿写简书项目开发学习笔记。代码仓库:https://github.com/shijuhong/jianshu 1. React 路由 路由就是根据 url 的不同来显示不同的内容。 安装 react 路由 yarn add react-router-dom 创建 pages 文件夹来放页面。然后创建两个文件夹,见名知意,Home 文件夹和 Detail 文件夹。然后写最基础的类组件。 现在想要的效果是,根据不同的 url 来分别加载 Home 和 Detai原创 2022-05-02 15:05:03 · 583 阅读 · 0 评论 -
04.简书项目实战一:Header组件开发
简书项目实战一:Header组件开发 1. 项目目录搭建,Styled-Components 与 Reset.css 的结合使用 create-react-app jianshu cd jianshu yarn start 1.1 Styled-Components 的使用 css 文件在全局是生效的,这个就会造成一个问题,因为有多个 css 文件,可能会造成相互冲突,因此使用一个第三方模块 styled-components 安装 yarn add styled-components 在 src原创 2022-04-30 18:55:18 · 748 阅读 · 0 评论 -
03.Redux 进阶
Redux 进阶 6.1 UI 组件和容器组件 UI 组件负责渲染,容器组件负责页面逻辑。 UI 只负责页面的组件 (傻瓜组件)。 容器组件里的代码都是业务逻辑代码 (聪明组件)。 示例: // TodoList.js 只负责业务逻辑 import React, { Component } from "react"; import "antd/dist/antd.css"; import store from "./store"; import { getInputChangeAction, get原创 2022-03-21 21:11:15 · 223 阅读 · 0 评论 -
02.Redux 入门
Redux 入门 5.1 Redux 概念简述 单单靠组件间传值太麻烦了,因此 Redux 应运而生。Redux 是数据层框架,把数据放在 store 这个共用存储空间里。其他组件取数据也在 store 里取。 Redux = Reducer + Flux 5.2 Redux 的工作流程 下面一个形象的比喻来解释 Redux Flow 工作流程:图书馆借书 React Component: 借书的用户 Action Creators: 借书所说的话 Store: 图书馆管理员 Reducers: 管理员原创 2022-03-17 01:12:43 · 825 阅读 · 0 评论 -
01.React 基础
React 基础 0. 构建项目 Create React App 1. 代码优化 1.1 构造器里使用 bind 绑定 this constructor(props) { super(props); this.state = { inputValue: "", list: [], }; this.handleInputChange = this.handleInputChange.bind(this); this.handleBtnC原创 2022-03-14 23:05:36 · 1111 阅读 · 0 评论