F01 Understanding Re-frame
- Buy now
- Learn more
Introduction

What are you going to learn in this course?
Getting Started

Getting your machine ready
Getting the code and starting the Figwheel compiler
Setting up Chrome dev tools
Arrange your browser and editor side-by-side
Reference Sheets

React Lifecycle Reference for Re-frame.pdf
Re-frame Components Reference Sheet.pdf
Re-frame Reference Sheet.pdf
Build custom components

Get a big picture view of the Re-frame stack
Create Reagent components in three different forms, depending on complexity
Components return Hiccup to represent HTML
Use Hiccup's true, false, and nil attributes to output conditional attributes
Hiccup style attributes break CSS rules into maps
Use a helper function to manage multiple CSS classes
Use Hiccup id and class shortcuts for permanent ids and classes
Use the Hiccup nested tag shortcut to ease overly nested HTML tags
Handle React events to respond to user input
Embed components in other components to compose your UI
Avoid laziness when returning lists of Hiccup elements
Use refs to access the real DOM on the rare occasions when it is needed
Keep an entire form in one component to maximize interactivity
Store and modify state using Reagent atoms
Interactively experiment with re-rendering to optimize rendering
Embedding raw HTML is dangerous, but you can do it if you know what you're doing
Use the :> syntax to embed JavaScript React components
Capture user intent with events

Get a big picture of how the parts of Re-frame work together
Dispatch events to capture user intent
Event handlers translate user intent into effects
Effect handlers translate effects into actions
Co-effects are the impure inputs to your event handlers
Interceptors let you compose functionality into your event handlers
Example: Composing undo using interceptors
Use subscriptions to query the database

Events and subscriptions help you isolate the database from the UI
Select data from the database to use in components with subscriptions
Use reactive subscriptions to intelligently chain computations
Understand reactive subscription data flow to optimize re-calculation and re-rendering
Store state in the database

Use locality, frequency, and transience to choose where to store state
Name events and subscriptions using domain concepts so they don't get out of date
Initialize your application with a meaningful first event
Use nested maps in your database to keep things organized
Keep events and subscriptions together so related things are near each other
Move calculations out of components and into reactive subscriptions so they can focus on view logic
Store data as entities indexed by id for easy access
Store a separate order vector to keep entities in arbitrary order
Conclusion

How to solidify and deepen your skills

Get a big picture view of the Re-frame stack

Let's take a high-level view of the entire Re-frame stack. That includes the DOM, React, Reagent, and Re-frame.