Learn to build interactive components with ease
Re-frame is the frontend framework I recommend. It gives you just what you want in order to build rich, complex web applications.
But how do you build actual, reusable components using it?
When using Re-frame, have you ever wondered:
- How do I decide between component state and application state?
- How do I implement simple, interactive components?
- Can my components be re-usable?
- How do I make a common UI pattern that I see all the time on web pages?
- What events and subscriptions do I need?
Introducing Building Re-frame Components
In this course, you will build many different components. They range from simple, like a collapsible panel, to complex, like a complete user registration flow.
This course is for anyone looking to get into Re-frame and frontend development with ClojureScript, or anyone who wants to deepen their skills creating rich, interactive web apps.
When I started planning this course, lots of people were asking for practice implementing common web UI patterns--accordions, expanding components, live-preview editors, etc. I did some searching for lists of patterns, and found a bunch of good stuff. I picked ones that were interesting enough to demonstrate the hard choices you have to make when working with Re-frame.
So that's what the course is about. It's practice for building those little to big UI elements you have to get right every day. It's 8 hours of video and each lesson comes with an interactive exercise to practice the coding yourself. You can access the exercise online on the page for the lesson. I've also put up a repo set up with Figwheel with all the exercises to run it locally.
This course is just a series of small projects. You don't need anything but a web browser to get started. Each lesson contains a video and an interactive editor where you can live code the component right there in the browser. I remove all of the friction of setting up ClojureScript compilation and get you started right away. Follow along at your own pace. Do the projects. Work through some of the obstacles, and watch me code it and explain my reasoning. It's all there for you to explore and learn from.
Each lesson contains two code editors embedded in the page. One is for you, the student, and the other is for me, the teacher. In the teacher's editor, you will see the code that I've written to build my version of the component. In the student's editor, you will see the beginnings where you will put your code.
Both editors are live. If you modify the code, it will be compiled and you can witness the changes happening live to the left. I hope you enjoy the experience of fast feedback that we have in ClojureScript for building UI components.
The course also comes with a repository of all code. If you like, you can download that repo and run the code locally in your favorite editor. It will be recompiled automatically with Figwheel.
Building Re-frame Components
Want this course?
Love it or leave it guarantee
If you don't learn as much from this course as you thought, just ask for a refund within 30 days and I'll give you your money back.
1. Collapsible Panel
We create a collapsible panel component. You give it a title and a child and it will hide the child inside until you click the panel.
2. Sortable Table
We build a reusable sortable table component using Re-frame and ClojureScript.
3. Inline Editable Field
We create inline editable fields. When you're just looking, the field looks like normal text. But when you click on it, it becomes a text box. And you can edit it!
4. Progress Bar
We create a simple progress bar to track the progress of downloads and other processes. All you need is a percentage or a numerator and denominator.
5. Password Box
We create a password field that validates the password and tells you how to fix your password so it passes validation.
6. Sortable Table in the Database
We modify the sortable table component we developed in the last lesson to use the database instead of local storage.
7. Tag Editor
We build a component that lets us easily add tags, like you find on blog posts or other content.
9. Externally Managed Components
This time we create a component that wraps an externally managed component. Specifically, we embed a CodeMirror editor right into the React-managed DOM, even though CodeMirror has no knowledge of React and manages its own DOM elements.
10. Accordion Component
You know those HTML components that show you some headers and let you expand the content underneath? Yeah! Let's build one!
11. Draggable List
You know those lists that let you reorder stuff by dragging? Well, we make one of those.
12. Expanding Table
We build a table. You can "expand" rows to reveal more detail about each of the visible rows.
13. Filterable List
We make a list of things that is so long, we need to have a text box at the top that lets us filter it. We experiment with different filtering techniques.
14. Username Box
We build a username box that checks with the server whether the username is already taken. Combine that with some simple validations and you have yourself a really nice username input field for a user registration system.
15. Username and Password Refactoring
We begin to culminate our components into a bigger and more complex component, the user registration flow. In this lesson, we refactor our username and password boxes to use the same code.
16. User-Password Further Refactoring
We continue to refactor our Username and Password components on the way to a user registration workflow. We explore how to pull out small parts of our code to give them names so that they are clearer.
17. User Registration 1
We begin to build out our user registration flow using the components we've built thus far.
18. User Registration 2
We continue our user registration flow with actually submitting a user creation message to the server. Our server will respond when it is created successfully.
A one-page sheet with the basics for creating Reagent components for use with Re-frame. Get started with Re-frame right away.
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.
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.