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.

Want this course?

Team License

$499
  • HD Download
  • Watch Online
  • Lifetime Access
  • For your company

Download License

$75
  • HD Download
  • Watch Online
  • Lifetime Access
  • For an individual

Online License

$48
  • Watch Online
  • Lifetime Access
  • For an individual

Membership

$49/mo
  • HD Downloads
  • Watch Online
  • Full access
  • All Content
  • For an individual
Get access

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.

Extra Resources

Register for a free account or log in to access these resources.

  • Re-frame Components Reference Sheet

    A one-page sheet with the basics for creating Re-frame components. Get started with Re-frame right away.

  • Re-frame Reference Sheet

    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.

  • 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.

Building Re-frame Components

Lessons

Video time: 07h53m

Collapsible Panel
  • 25 min
  • free

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.

Sortable Table
  • 34 min

We build a reusable sortable table component using Re-frame and ClojureScript.

Tag Editor
  • 26 min

We build a component that lets us easily add tags, like you find on blog posts or other content.

Markdown Editor with Live Preview
  • 9 min

We build a small markdown editor with live preview.

Username Box
  • 1 hr

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.

User-Password Further Refactoring
  • 17 min

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.

User Registration 1
  • 16 min

We begin to build out our user registration flow using the components we've built thus far.

User Registration 2
  • 28 min

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.

User Registration 3
  • 25 min

We complete the User Registration Workflow with a start button and uploading an avatar!