Quick Overview of my CRA Template

My previous 2 posts in this series were about how the motivation of making a CRA template for myself and the higher-level app architecture. In this post, we will talk about specific implementations of my CRA template and lower level design considerations.

This is the thirs post in the series, check out the first two posts here 👇

How do I structure my React Application - Motivation

Every time I sit down and make a Web Application with React, I find myself constantly going through the same motion. Running the same scripts, using the same components to build the skeleton. So, I made a CRA template and you can use it too.

Xing Zhi's BlogLim Xing Zhi

Skeleton and Architecture for my React App Template

Picking up from the last post, I will be talking about the higher-level architecture of how I structure my React Applications. I package everything into one neat NPM package which you can use as a template with CRA.

Xing Zhi's BlogLim Xing Zhi

Getting the template

So let us begin by getting the template with CRA. Run this command the directory where you keep all of your repositories npx create-react-app my-app --template cra-template-xz. We are calling an external script create-react-app with the npx command. We passed in a NPM package of cra-template-xz as a parameter to this command. By doing this one-liner, we are generating a react template based on what I published on NPM.

Then, move into the directory that just appeared and open your text editor there.

Quick overview of project and configuration files

Looking at the root directory, we can see a few files pre-configured by me. The npm scripts under package.json use the craco toolchain by default. I am not using react-scripts because I have to override some webpack configuration and I am not comfortable enough to do a npm eject.

The craco.config.js file holds all of my JSON data to override the webpack configuration. Right now, the sole reason for using craco is to enable LESS pre-processing support. Personally, I prefer to use SASS as a CSS-preprocessor, but I am using the Ant Design UI library and I have to use LESS variables in order to take full advantage of their design system.

tsconfig.json defines all of my TypeScript Configuration.

Source folder

There are 4 main folders under /src.

The App folder holds the entry point of my React Application along with any global configuration or styles.

The components folder hold all of my UI Components. They are all self-contained within a file of the component name. All components are managed under /src/components/index.tsx. This makes my imports clearer since I only have to destructure the index file rather than going deep into the directory to import the desired components one by one.

The pages folder hold all of my Page Components. The /src/pages/Template.tsx file provides a wrapper component. It applies consistent styling to all pages. It allows me to change the page title and document title through a single prop rather than calling a utility. It also provides a consistent render callback interface for any additional functionality. At the App component, I passed in a function to modify the current Selected Tab.

The redux folder holds all of my logic for Redux state management. This is my first time using the reduxjs-toolkit.

Using the Design System

I am using a design system called Ant Design. This means we could directly consume LESS variables from the design system and utilize their theming system.

Looking at the Layout.less file, I am using a LESS variable from the design system; background-color: @component-background;. This means whenever I change the themes, this variable will automatically be updated to follow the new theme.

Configuring Navigation

Since this is a template, I had both the Tab menu and Side menu available. The Tab Menu is configurable through a TypeScript object. Right now, that object is defined under /src/App/tabConfig.tsx with the interface defined under the Layout Component (which you can export from the component/index). The Side menu, however, is defined as a component. This is specific to my working style since I normally have simpler demands for Tabs based Menus and more complex requirements for Side menus.

To remove either the Tab menu or Side menu, it is a simple as removing the props from the Layout Component under /src/App/App.tsx.

Changing the Branding name is as simple as changing the string under the component. If you choose to use an image, you can just pass in the URL as a brandingImageURL prop too.

Fin

And that is more or less a quick overview of the basic usage of my React template.