Tinycanva: Clojure for React Developers

Tinycanva

18 Lessons 49 Minutes

• 01Overview

  Sneak Peek 

  Walkthrough the components and concepts we will implement, with a video demo of the final app.

• 02Clojure Project Setup with create-cljs-app

  Sneak Peek00:06:22

  In this chapter, we will bootstrap a project using create-cljs-app and understand the code generated. We'll also study Hiccup, a CLJS alternative for JSX, and various ways to require namespaces.

• 03What is Reagent? The Minimalist Clojurescript React Wrapper

  Sneak Peek00:07:09

  Reagent is a minimalist Clojure wrapper for React. It exposes all React APIs including hooks and is one of the most popular Clojure projects. This chapter is a theoretical introduction to Reagent. We'll learn about components, third-party integrations and local state.

• 04How to Install React Router from NPM and Set Up Routes

  Sneak Peek 

  We have already learned how third-party components fit with Reagent. In this chapter, we'll implement React Router in the Tinycanva app.

• 05How to Set Up a UI Library & CSS Build Process Using PostCSS

  Sneak Peek 

  In this chapter, we'll set up our UI library and CSS build process using PostCSS.

• 06Introduction to React State Management

  Sneak Peek00:09:27

  Reframe is a flux-like library for uni-directional data flow. In this chapter we'll study the six-step Reframe loop.

• 07App Structure and Authentication UI

  Sneak Peek00:01:55

  Let's implement the concepts learned in the chapter on Reagent and React Router to build a login page..... plus the magic of REPL!

• 08Setting Up Firebase Projects and Authentication for Clojure Apps

  Sneak Peek 

  Set up Firebase project and configure authentication.

• 09Auth Event Handlers

  Sneak Peek00:04:38

  In this chapter, we'll initiate the Reframe loop for our login form, dispatch form submit events and handle them, ie implement steps 1 and 2.

• 10Auth Effects and Firebase Initialization

  Sneak Peek00:06:58

  We dispatched an event and wrote a handler. The handler returned an effects map, with a custom effect :firebase/email-auth. In this chapter, we'll create the custom effect handler and initialize the Firebase app.

• 11How to Create Firebase Data Subscriptions in Reframe

  Sneak Peek00:06:46

  In this chapter, we'll connect the UI to the Reframe loop and create loading indicators and subscriptions to check if the user logged in successfully.

• 12How to Build Reusable Containers for Clojure Apps with Reagent

  Sneak Peek 

  We have authenticated our users, but now they're stuck on the login screen. This chapter is about building re-usable containers to redirect users to authorized pages.

• 13How to Store Reframe Data in Firebase Without a REST API

  Sneak Peek 

  In this chapter, we will integrate Reframe and Firebase to save the graphic "entity". This is analogous to a POST request with a traditional REST API.

• 14Read and Delete Graphics

  Sneak Peek 

  Create Reframe handlers to read and delete graphics. Analogous to GET and DELETE in a REST API.

• 15How to Integrate Reagent and Reframe With Clojure to Create a UI

  Sneak Peek 

  Integrate Reagent and Reframe to create UI for listing and deleting graphics.

• 16Using React Higher Order Components to Frame a Canvas Editor

  Sneak Peek00:05:47

  Making graphic list items clickable; and the editor(detail) route. In the process, we'll learn how to use React's Higher Order Components with Reagent.

• 17How to Create an HTML Canvas Editor with Clojure and FabricJS

  Sneak Peek 

  In this chapter, we will integrate FabricJS with our app and create an HTML canvas-based editor.

• 18Saving graphics

  Sneak Peek 

  We have an editor in place, but it doesn't save data to Firebase. It is also not equipped to load data from Firebase. In this chapter, we'll create Reframe components to store data. We'll then update the editor to load data from Firebase. We will also extend the editor functionality.