![](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 · 463 阅读 · 0 评论 -
05.简书项目实战二:首页开发
简书项目实战二:首页开发本文是 React 的仿写简书项目开发学习笔记。代码仓库:https://github.com/shijuhong/jianshu1. React 路由路由就是根据 url 的不同来显示不同的内容。安装 react 路由yarn add react-router-dom创建 pages 文件夹来放页面。然后创建两个文件夹,见名知意,Home 文件夹和 Detail 文件夹。然后写最基础的类组件。现在想要的效果是,根据不同的 url 来分别加载 Home 和 Detai原创 2022-05-02 15:05:03 · 580 阅读 · 0 评论 -
04.简书项目实战一:Header组件开发
简书项目实战一:Header组件开发1. 项目目录搭建,Styled-Components 与 Reset.css 的结合使用create-react-app jianshucd jianshuyarn start1.1 Styled-Components 的使用css 文件在全局是生效的,这个就会造成一个问题,因为有多个 css 文件,可能会造成相互冲突,因此使用一个第三方模块 styled-components安装yarn add styled-components在 src原创 2022-04-30 18:55:18 · 740 阅读 · 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 · 222 阅读 · 0 评论 -
02.Redux 入门
Redux 入门5.1 Redux 概念简述单单靠组件间传值太麻烦了,因此 Redux 应运而生。Redux 是数据层框架,把数据放在 store 这个共用存储空间里。其他组件取数据也在 store 里取。Redux = Reducer + Flux5.2 Redux 的工作流程下面一个形象的比喻来解释 Redux Flow 工作流程:图书馆借书React Component: 借书的用户Action Creators: 借书所说的话Store: 图书馆管理员Reducers: 管理员原创 2022-03-17 01:12:43 · 824 阅读 · 0 评论 -
01.React 基础
React 基础0. 构建项目Create React App1. 代码优化1.1 构造器里使用 bind 绑定 thisconstructor(props) { super(props); this.state = { inputValue: "", list: [], }; this.handleInputChange = this.handleInputChange.bind(this); this.handleBtnC原创 2022-03-14 23:05:36 · 1109 阅读 · 0 评论