Re-frame is a ClojureScript web framework built on top of Reagent, which is in turn built on React. It provides a comprehensive approach to create frontend applications (it has no backend story). It provides a place to store application state (the Database), ways to capture user intent (Events), and ways to create reactive calculations (Subscriptions), in addition to Reagent's components. By putting these pieces together, you can build an app that will stand the test of time.
Events, Effects, Co-effects, and Subscriptions! This reference sheet shows you the most common forms of all of these so you can get started with Re-frame right away.
Download Resources
PDFs, code, and other downloads to help you learn
React Lifecycle Reference for Re-frame
Learn the four important React Lifecycle methods you’ll need when using Re-frame, when to use them, and how. Get started with Re-frame right away.
Reagent Components Reference Sheet
A one-page sheet with the basics for creating Reagent components for use with Re-frame. Get started with Re-frame right away.
Written Guides
Pragmatic and in-depth guides to a topic.
Database Structure in Re-frame
Your Database is going to contain a lot of important information. When you鈥檙e first starting out your app, you don鈥檛 know exactly what you鈥檙e going to store in there. In addition, you don鈥檛 know how you鈥檙e going to want to access it. Both of these will evolve over time as you understand more of the domain and you uncover the complexities of your UI. We want some help from the framework (Re-frame) to help us deal with this evolution.
Guide to Reagent
Reagent is a ClojureScript wrapper around React. It makes it easy to create React components using functions and hiccup, and state managed in Atoms.
Optimistic Update in Re-frame
How do we deal with that little bit of time between when the user clicks and the server confirms the change is saved? Well, like many things in life, there are two ways: optimistically and pessimistically.
Re-frame, a Visual Explanation
We look at a sequence diagram to organize the parts of Re-frame.
React Lifecycle for Re-frame
Learn the 4 React Lifecycle Methods you’ll need to know for Reagent/Re-frame and why the other 6 are not needed.
State in Re-frame
Re-frame gives us several places to put our state. So how do we choose? It turns out the decision is easy.
Learning Paths
Curated selections of courses on a specific topic
The Everything Learning Path
If you’re looking to watch absolutely all of the courses on this site, I’ve put together a suggested order. Start at the beginning and just watch everything straight through. Be sure to click those checkmarks to track your progress.
Web Programming Learning Path
Web development is an extremely popular use for Clojure. If you want to learn web programming, here are the courses I recommend you watch. I am assuming you already are familiar with Clojure. Be sure to click those checkmarks to track your progress. Backend You’ll want to learn Ring. It is a unifying set of […]
Video Courses
Screencasts, Whiteboards, and Slides produced to help you learn
Building Re-frame Components
Sometimes we want to see how individual components are built. We want to know how to reproduce common components easily using Re-frame. In this course, we take that approach. We build individual, interactive components, going through the design decisions we have to make.
Understanding Re-frame
A comprehensive guide to the ClojureScript Single Page Application framework built on top of React and Reagent.
Video Lessons
Parts of courses on specific topics
Accessing DOM nodes
Sometimes we need to get a reference to the real DOM node that React normally manages for us. For instance, when we need to play an embedded video, the API requires access to the DOM node of the video element. React gives us a feature called Refs that let us get access to any DOM node it creates.
Accordion Component
You know those HTML components that show you some headers and let you expand the content underneath? Yeah! Let’s build one!
Basic HTML with Hiccup
We look at the basics of representing HTML with Hiccup, which is a very convenient way of embedding markup right in our code.
Calculations in Subscriptions
In this lesson, we learn to move our calculations from our components into Reactive Subscriptions. We don’t want to store calculated values in the database, because that would de-normalize the data. We learn how calculated subscriptions are a solution to database de-normalization.
Choosing where to store state
There are four places Re-frame allows to store state in. We go over a framework of three criteria to decide where to put it.
Co-effects
Co-effects are the impure data your Event Handlers need to run. This might include the current value of the Database, the current time, or even a value stored in LocalStorage.
Technical Articles
6 things Reacters do that Re-framers avoid
Down on React? You should check it out from the ClojureScript perspective.
Why Re-frame instead of Om Next
I had to choose between Re-frame and Om Next when building a course. Here are the reasons why.