Collection: React and Reagent
Learn how to build reactive user interfaces based on ClojureScript and React.js. These episodes gradually build up your knowledge. You start by building a small app using React directly, then move on to using Reagent, a popular wrapper library. Finally you learn how to give your Reagent apps a more coherent structure based on re-frame.
41. Using React Components with Reagent
React’s component based approach means you don’t have to reinvent the wheel, there are literally thousands of building blocks freely available.
When using React components from Reagent there are a few things to watch out for, this episode will show you how to use some popular React components from Reagent, and point out useful constructs and patterns.
You’ll also get to see some of the new cljs.main feature that landed in
ClojureScript 1.10.
25. re-frame, part 3: Events and Effects
Side effects in re-frame are handled through events. You’ll implement several event handlers of a TodoMVC app so it becomes functional. You’ll also implement custom effect and co-effect handlers for storing the application state in localStorage. To debug event handlers you’ll learn about the “debug” interceptor, and about re-frisk, a handy tool for inspecting your re-frame database.
20. re-frame, part 2: Subscriptions
A complete look at re-frame subscriptions, including coverage of Reagent’s atoms and reactions. You learn how to write subscriptions, how they work, and how to plug them together into a signal graph.
19. re-frame, part 1
Reagent is a popular and easy to use option for using React with ClojureScript. re-frame builds on top of Reagent, providing an elegant and opinionated way to structure applications and deal with application state. The documentation for re-frame can easily overwhelm. With this episode you get a practical hands-on introduction, so you can be making your own apps in no time.
11. Reagent, part 3: Keys & Lifecycle MethodsFreebie
Learn about React performance, the use of keys properties, and how to use lifecycle methods with Reagent.
10. Reagent, part 2: Cursors
We continue building a Kanban board with Reagent, adding functionality to edit cards. In the process you’ll learn all about Reagent’s cursors and event handlers.
9. Reagent, part 1
One of the more popular wrapper libraries for using React with ClojureScript is Reagent. We’ll build a kanban style board to demonstrate the main features.
6. Building a React app with ClojureScript
React.js is the new hotness in the land of user interfaces. It’s descriptive approach pairs wonderfully with ClojureScript’s functional underpinnings.
This episode will show how to build an app with React, all from comfortable ClojureScript. It provides a solid foundation for diving into React wrappers like Reagent or Om later on, and it’s a welcome exercise in using ClojureScript’s interop features.
We’ll cover: elements, components, the virtual DOM, using an atom to keep application state, and attaching event handlers with component properties.