其他章节请看: 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识,而真实项目通常是基于脚手架进行开发. 本篇首先通过 react 脚手架创建项目,分析其目录结构,接着编写第一个组件.解决样式覆盖,最后配置代理 proxy 以及通过消息发布与订阅解决兄弟组件之间的通信问题. Tip:我们要接手的 react 项目是:spug_web. 使用 react 脚手架创建项目 react-cli-demo 前面我们学习 vue 脚手…

其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以及编程式导航. Tip:我们要接手的 react 项目是:spug_web. 什么是路由 路由就是根据不同的 url(网址) 返回不同的页面(数据).如果这个工作在后端做(或者说由后端程序员做),就是后端路由:在前端做就是前端路由. 平时总说的 SPA(单页面应用)就是前后端分离的基础上,再加一层前…

其他章节请看: 七天接手react项目 系列 尾篇 前面我们依次学习了 react 基础知识.react 脚手架创建项目.react 路由,已经花费了不少时间,但距离接手 spug_web 项目还有一些困难. package.json 作为项目的核心,从中我们能大概知晓此项目到底用了哪些技术,所以笔者决定从其入手. spug_web/package.json 为什么没有看见 redux,mobx 是什么?antd 是什么,react-app-rewired.@babel/plugin-propo…

七天接手react项目 背景 假如七天后必须接手一个 react 项目(spug - 一个开源运维平台),而笔者只会 vue,之前没有接触过 react,此刻能做的就是立刻展开一个"7天 react 扫盲活动". react 活动扫盲方针 以读懂 spug 项目为目标 无需对每个知识点深究 功能优先能实现,代码质量无需太苛刻 目录 react 起步 state&事件处理&ref 生命周期&受控和非受控组件&Dom 元素&Diffing 算法…

七天接手react项目-起步 背景 假如七天后必须接手一个 react 项目(spug - 一个开源运维平台),而笔者只会 vue,之前没有接触过 react,此刻能做的就是立刻展开一个"7天 react 扫盲活动". react 活动扫盲方针 以读懂 spug 项目为目标 无需对每个知识点深究 功能优先能实现,代码质量无需太苛刻 项目准备 将 spug 克隆到本地: exercise> git clone https://github.com/openspug/spug spu…

state&事件处理&ref 在 react 起步 一文中,我们学习了 react 相关知识:jsx.组件.props.本篇将继续研究 state.事件处理和ref. state State 与 props 类似,但是 state 是私有的,并且完全受控于当前组件 -- 官网 react 中的 props 用来接收父组件传来的属性,并且是只读的. 由此,我们能猜测 state 就是组件自身属性. Tip:是否感觉像 vue 组件中的 data,请接着看! var app = new Vue…

生命周期&受控和非受控组件&Dom 元素&Diffing 算法 生命周期 首先回忆一下 vue 中的生命周期: vue 对外提供了生命周期的钩子函数,允许我们在 vue 的各个阶段插入一些我们的逻辑,比如:created.mounted.beforeDestroy等. react 中的生命周期是否也类似?请接着看: 每个组件都包含 "生命周期方法",你可以重写这些方法,以便于在运行过程中特定的阶段执行这些方法 -- react 官网-组件的生命周期 请看一张 r…

返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 经过前面十二篇的基础教程,现在终于该做个总结了. 回顾 第一篇,我们建议新手朋友们先通过ABP官网的启动模板生成解决方案,因为这样既快速又准确,不会因为项目的搭建,而让新手畏而却步. 第二篇,我们说了实体类的创建,这是放在核心层(Core Layer)的,每个实体类最终和数据库中的表是一一对应的. 第三篇,我们讲了创建数据库上下文DbContext,这是连接应用程序和数据库的桥梁,是数据在应用和数据库之间流通的管道. 第四篇,有了前面的…

文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React. React 中的元素.组件.实例和节点,是React中关系密切的4个概念,也是很容易让React 初学者迷惑的4个概念.现在,老干部就来详细地介绍这4个概念,以及它们之间的联系和区别,满足喜欢咬文嚼字.刨根问底的同学(老干部就是其中一员)的好奇心. 元素 (Element) Rea…

文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列2:组件分类 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React. React 组件有很多种分类方式,常见的分类方式有函数组件和类组件,无状态组件和有状态组件,展示型组件和容器型组件.好吧,这又是一篇咬文嚼字的文章.但是,真正把这几组概念咬清楚.嚼明白后,对于页面的组件划分.组件之间的解耦是大有裨益的. 函数组件和…