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.
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; npx create-react-app --template cra-template-xz.
I will split this into a multi-part series starting with the motivation and target audience, then the higher-level architecture, then the implementation details and maybe a sample project.
Fun fact: I originally thought this will be a succinct update describing my CRA template, but the more I write it, the more it appears to be a multi-part series.
First time?
Here are some links for readers who are not familiar with React and/or Frontend Development.
- What is CRA? -
create-react-app
Create a New React App – React (reactjs.org) - You can make custom create-react-app templates
https://create-react-app.dev/docs/custom-templates/
Motivation
Let me begin with a story. A few months ago, I was starting a school assignment with a team of 8 people, the goal was to build a fully functional software system with an idea of our choosing. Excluding myself and two other close acquaintances, the majority of my teammates have very little to no experience writing software outside of your typical Computer Science Java or C++ modules. To make it such that everyone can contribute to the code base regardless of technical level, I internalized a few requirements in my head.
Firstly, as much as I believe that my professors will not fully understand our technical work (considering the number of student assignments they are looking at on top of their usual research workload and teaching duties), I also believe that we should deliver a solid piece of work that is reasonable within the limited time frame. This means the architecture has to be sensible, maintainable, all that good stuff. It has to obey good practices like KISS, DRY, SOLID with little to no code smells.
Second, the app architecture must be easy to work with and understand. This means UI widgets have to be easy to write while complex app skeleton logic is abstracted away. My university (and I believe most IT courses in Singapore) has this (typically) unspoken rule where the "less technical" students will just write document while the "more technical" students should code. I find that sentiment worth as much as a pile of horse manure. Don't get me wrong, I am not an idealist, but it is my experience where the students who do implementation will have to rectify the documentation heavily regardless. In the end, I made the decision (right, I forgot to mention that I was the project lead) where each team member has to do both documentation and implementation. This means the "less technical" teammates will have to work on the UI widgets while I worked on the app skeleton, routing and another acquittance implemented the firebase communication interface. I ended up having to rewrite significant portions of some UI components, but their initial involvement helped tremendously.
Third, since it is a school project, I straight out removed some requirements that will not matter. They are necessary for building an actual product but contributes little to no value for our school's requirement.
- dynamic swapping of dark/light theming during runtime
- localization
- accessibility
- mobile responsiveness
Targeted Audience
When I was writing this CRA template, I adopted a similar architecture design to my school project. I wrote it with the same constrains in mind. Integrated any designs that I wished I had time to experiment with. Improved on some patterns that I found unsatisfactory and time did not permit me to backtrack.
If I have to choose a specific target audience, I will say students. Students who want to kick start a React Project quickly without having to spend days setting up the repository or think about the app architecture or experiment with the page templating design. Just run the npx command and you are ready to go.
To shorten development time, there are multiple quality-of-life libraries included. Things like a craco toolchain for LESS pre-processing, ant design UI library, JSX with TypeScript (perfectly named TSX with the .tsx extension) all these are included and pre-configured out of the box, allowing the developer to pick this template up and run with it. I also have redux-toolkit included in the package. All of these will be written in-depth in subsequent posts of this series.
Fin
If you want to try out the template today, you can run npx create-react-app my-app --template cra-template-xz or visit the npmjs page:
