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

其他章节请看: 七天接手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 项目(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,这是连接应用程序和数据库的桥梁,是数据在应用和数据库之间流通的管道. 第四篇,有了前面的…

1.简介 前面宏哥介绍了几种关于时间等待的方法,也提到了,在实际自动化测试脚本开发过程,百分之90的报错是和元素因为时间不同步而发生报错.本文介绍如何新建一个自定义的类库来解决这个元素同步问题.这样,我们在写脚本的时候,就直接调用该类方法就可以. 2.项目实战 2.1代码设计 1.在新包library下新建我们的自定义类方法.如下图所示: 2.2参考代码 package library; import org.openqa.selenium.By; import org.openqa.selen…

1.简介 上一篇中介绍了DataProvider如何传递参数,以及和一些其他方法结合传递参数,今天宏哥接着把剩下的一些常用的也做一下简单的介绍和分享. 2.项目实战1 @DataProvider + 方法:此示例显示如何根据测试方法名称传递不同的参数. 2.1代码设计 2.2参考代码 package library; import java.lang.reflect.Method; import org.testng.Assert; import org.testng.annotations.D…