Notes on React, pt 2: Handy Utils in Kiddom’s Frontend Codebase

This is post #2 in an ongoing series as I learn React, and share knowledge with other devs at Kiddom. Start at the first.

This list is only applicable to Kiddom devs, working on the frontend. These tools are not globals. They’re patterns and utilities we’ve added, that you should be aware of if you work in our code.

Utility Components

AuthenticatedAjaxCall

Use this class to make authenticated ajax requests to the api server.

[js]
// do this
import {
get,
post,
del,
put,
} from ‘authenticated_ajax_call';

// to do this
res = get(url)

// returns a promise
res.then(() => { … })
[/js]

ToggleDisplay

Use ToggleDisplay to conditionally show / hide a block of JSX.

onClickOutside

Wrap anything in , and it calls the provided callback when (you guessed it) the user clicks anywhere not inside. ie, we wrap our settings menu in this, and `dispatch(closeSettingsMenu())` as the callback.

There’s a whole bunch of plugins that do this. This one is good. Many of the others are not. I’ve tried them.

It relies on multidecorator. I have no idea how that stuff works.

A Note About CSS

Don’t Style

React creates a lot of them. They become filler. They should remain invisible. While you shouldn’t be targeting HTML tags with css, you really shouldn’t be targeting any spans.

Do Require Stylesheets

We use a heavily customized Webpack build. In order to add CSS to the app, you actually require it from inside JS, as if it were another library. This allows you to scope your CSS very neatly, whereby each component can require the CSS required for it to run, and it’ll all be packed efficiently to minimize load times.

Jordan is a freelance engineer with full-stack chops, and an eye for analytics and growth.