React Flow topics
12 short topics in Extensions Plugins CLI and Developer Tools. Each one is a single focused exercise with a clear piece of evidence at the end.
12 topics, one exercise each.
Work through them in order, or jump to the one you need.
These are draft topic outlines (draft; instructor review pending). Full lessons follow after review; ask Ajay if you need a topic sooner.
- 01
Node and connection schema
Demonstrate node and connection schema in a focused React Flow example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 02
Port and relationship constraints
Demonstrate port and relationship constraints in a focused React Flow example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 04
Node selection and interaction
Demonstrate node selection and interaction in a focused React Flow example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 05
Connection editing workflows
Demonstrate connection editing workflows in a focused React Flow example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 06
Graph state and history
Demonstrate graph state and history in a focused React Flow example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 07
Custom node and edge rendering
Demonstrate custom node and edge rendering in a focused React Flow example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 08
Graph serialization
Demonstrate graph serialization in a focused React Flow example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 09
Validation and cycle handling
Demonstrate validation and cycle handling in a focused React Flow example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 10
Large-graph performance
Demonstrate large-graph performance in a focused React Flow example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 11
Accessible interaction design
Demonstrate accessible interaction design in a focused React Flow example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 12
Graph-editor regression checks
Demonstrate graph-editor regression checks in a focused React Flow example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course →
Learn the same ideas beyond React Flow.
These courses share topics with this one, so you can compare how each language or tool handles the same concept.
More in Editors visualisation and component tooling.
You have the curiosity.
Let’s turn it into capability.
Start with a practical workshop or bring a specific question to Ajay.