Clojure is a functional hosted LISP known for its expressiveness, which has excellent interop with Javascript, Java, and Microsoft's Common Language Runtime (CLR). 

Many developers praise the elegance and productivity Clojure allows, but for many it seems like an esoteric language with an "ugly" syntax that is impossible to get started with. This course will change that view and show you how to be productive with this marvelous language.

In this course, we'll build a web-based graphics editor similar to Canva. We'll explore Clojure from the perspective of a JavaScript developer. Along the way, we'll also explore state management, authentication, API integration with Google Firebase and interop with NPM.

This course takes you from zero to an understanding of Clojure semantics, LISP tools, and building a production-ready React application in just a few hours. 

We'll start with the basics and build up to writing a fullstack app with both frontend and backend in Clojure. 

The frontend, built using ClojureScript (Clojure that runs on JavaScript) will be a single page React application with routing, key-based authentication and API integration, which will save, list, edit and delete graphics.
 

The backend is hosted on Google Firebase. 

Throughout the course, we'll learn about tools like REPL that aid development. Towards the end, we'll learn about advanced concepts like code splitting and end-to-end testing.

Clojure is unlike other languages as it is hosted on, and can leverage, existing VMs. This means that you can learn Clojure once and write it on the backend with JVM or CLR, and the frontend with JavaScript. If a new technology like Rust takes over the world tomorrow, you will probably be able to continue to write Clojure because a Rust port is already in the making.

By the end of this course, you'll have a superpower: the ability to write fullstack Clojure applications.

Build a Fullstack Web Graphics Editor in Clojure and React

This is a course on Clojure for React developers in which we'll build a web-based graphics editor similar to Canva.

Tinycanva: Clojure for React Developers

---
title: Using React Higher Order Components to Frame a Canvas Editor
slug: tc-graphic-details
description: 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.
privateVideoUrl: https://fullstack.wistia.com/medias/pzv851gaez
code: https://gitlab.com/fullstackio/books/newline-course-apps/shivek-khurana-tinycanva-clojure-for-react-developers-app/-/tree/main/code/module_04/lesson_04.15/App/source_code/tinycanva?ref_type=heads
---

# Graphic details page

With the graphics list in place, we will now build the details page for each graphic. The details page will include an editor component that will let us draw the actual graphic. In this chapter, we'll focus on the routing aspect and not concern ourselves with the actual editor.

![Graphic Details Wireframe](https://d2uusema5elisf.cloudfront.net/courses/tinycanva-clojure-for-react-developers/module_04/lesson_04.15/public/assets/wireframe.png)

## Parsing route params

React Router provides various mechanisms to parse route params (`:graphicId` in our case). There is a higher-order-component (HOC)-based approach using `withRouter` HOC, and a hooks-based approach using the `useParams` hook. We are going to use the `withRouter` HOC in our app. 

The `withRouter` HOC expects a React component as an argument. One small issue - ratoms don't work with React! However ratoms do work as children of React components. The solution is to create a transparent wrapper to the desired Reagent component and pass in the props manually. Then reactify this wrapper component, so ratoms continue to work. Let's understand this with an example:

```clojure
(def counter-atom (r/atom nil))

;; reagent component that needs route props and depends on ratoms
(defn x-page [props]
	(let [counter @counter-atom]
	;;...
	))

;; container component that will be reactified
(defn x-page-container [props]
	[x-page props])

;; somewhere in the router
[:> Route {:to "/g/:id"}
	[:> (withRouter (r/reactify-component x-page-container))]]
```

Now `x-page-container` is reactified and cannot use ratoms, however, its children can safely use ratoms.

## Graphics page `Switch`

The details for a graphic will be available at `/graphics/:graphicId` route. As per our [app structure](https://www.newline.co/courses/tinycanva-clojure-for-react-developers/tc-app-struct-auth-ui), the namespace responsible for this route is `app.pages.graphics.detail`.

We will also need an additional `Switch` component in `app.pages.graphics` since we need to compose routes as follows:

![Route Structure](https://d2uusema5elisf.cloudfront.net/courses/tinycanva-clojure-for-react-developers/module_04/lesson_04.15/public/assets/switch.png)

Let's update our `app.pages.graphics` namespace to accommodate this `Switch`:

```clojure { actualFilename=./protected/source_code/tinycanva/src/app/pages/graphics.cljs endLine=62 startLine=46 statedFilename=./tinycanva/src/app/pages/graphics.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_04/lesson_04.15/protected/source_code/tinycanva/src/app/pages/graphics.cljs#L46 }
(defn list-component []
  [:<>
   [nav/top]
   [:div {:class "w-100 md:w-2/3 m-auto p-4"}
    [header]
    [graphics-list]
    ]])

(defn graphics-detail-container [props]
  [detail/page props])

(defn page []
  [auth/private
   [:> Switch
    [:> Route {:path "/graphics" :exact true} [list-component]]
    [:> Route {:path "/graphics/:graphicId" :exact true}
     [:> (withRouter (r/reactify-component graphics-detail-container))]]]])
```

-   we extracted the existing `page` component to `list-component`
-   replaced `page` with a `Switch`
-   when the route `path` is `/graphics` the `list-component` will be rendered
-   when the route `path` is `/graphics/:graphicId`, the `graphics-detail-container` will be reactified and rendered. It will also receive route properties courtesy of `withRouter` HOC.
-   `graphics-detail-container` internally renders the `detail/page` component, which we haven't created yet 
-   the `exact` prop prevents the `list` component from being rendered on `/graphics/:graphicId`. It's how React Router composes.

## Link graphic card

The `graphic-card` component should redirect the user to `/graphics/:graphicId` when the card is clicked. We can achieve this by using React Router's `Link` component.

Let's update our card and wrap its content in a `Link`:

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.