现代 Rails 前端开发

Content

16 Lessons • 0 Quizzes • 0 Challenges

入门

1
课程简介
2
课程结构与工具

客户端 Rails

1
使用 Rails 进行客户端开发简介
2
状态管理与前端开发
3
围绕客户端逻辑与Web应用模式进行设计
4
使用 Webpacker
5
添加实际功能
6
泛型编程
7
在客户端 Rails 中自我测验

层叠样式表

1
CSS简介
2
CSS 和 webpack
3
CSS 动画
4
CSS 过渡
5
CSS 与 React 组件
6
自我测验：CSS

Stimulus

1
Stimulus 简介
2
添加我们的第一个控制器
3
创建一个操作
4
添加目标
5
Stimulus 有类
6
使用值
7
再多一点 Stimulus
8
使用 Stimulus 与 Haml 或 Slim
9
自我测验：Stimulus

TypeScript

1
TypeScript 简介
2
静态类型与动态类型
3
变量和类型注解
4
函数和类型注解
5
类和类型注解
6
类型检查类和接口
7
自我测验：TypeScript

React

1
使用 React 与 Rails 入门
2
添加我们的第一个组件
3
组合组件
4
与页面关联
5
交互性、状态与钩子
6
共享状态 - 场地组件
7
共享状态 - 行与座位组件
8
使用 React 与 Rails 自测问答

Webpack

1
webpack 简介
2
Yarn
3
Webpack
4
自我测验：webpack

Webpacker

1
Webpacker 简介
2
开发环境中的 Webpacker
3
Webpacker 在生产环境中的使用与自定义 Webpacker
4
自我测验：Webpacker

与服务器通信

1
与服务器通信简介
2
在 Stimulus 中使用 Gon
3
Stimulus 与 Ajax
4
在 Stimulus 中使用数据
5
在 React 中使用 useState 获取数据
6
在我们的 React 代码中传递数据
7
通过 Action Cable 实现即时通信
8
React 与 Action Cable
9
自我测验：与服务器通信

在 Stimulus 代码中管理状态

1
Stimulus 中的状态管理入门
2
实现数据存储
3
使用数据存储
4
重构为Reducer模式
5
维护状态仓库（concept）
6
在 Stimulus 中测试你的状态知识

React 中的状态管理

1
React 中状态管理入门
2
放置上下文
3
使用上下文
4
使用 Props 与 Context
5
向上下文添加异步事件
6
React 中状态管理自测题

使用 Redux 管理状态

1
使用 Redux 管理状态简介
2
使用 Redux Store
3
向 Redux 添加异步操作
4
自我测验：使用 Redux 管理状态

使用高级 TypeScript 验证代码

1
使用高级 TypeScript 验证代码入门
2
联合类型和类型守卫
3
使用字面量类型指定类型
4
使用枚举和字面量类型
5
构建映射类型和工具类型
6
TypeScript 配置选项
7
处理严格性

使用 Cypress 进行测试

1
Cypress 测试入门
2
编写我们的第一个测试
3
理解 Cypress 的工作原理
4
Cypress 中的操作
5
断言
6
故障排除
7
用 Cypress 进行测试自测

更多测试与故障排查基础

1
测试与故障排除基础入门
2
Cypress 与 React
3
Cypress 工具、API 和故障排除

附录

1
安装
2
安装 Webpacker
3
安装 Stimulus
4
安装 React
5
安装 Cypress
6
配置 Cypress 和 Rails
7
全 Stimulus 应用
8
全 React 应用

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.