Structuring a React App

!UPDATE: i'm now publishing here

As much as I practiced writing React code, I also learned about collaboration, systems thinking, and deployment.

Introduction

Building a React app is a journey filled with decisions, revisions, and constant learning. In this blog post, I will share the insights and experiences gained while structuring a React app, focusing on the evolution of component and route structures, and the collaborative efforts that went into building a small yet dynamic application.

Initial Setup: Components and Routes

At the outset, the project was conceived as just components. It's all we really knew so far from our lab work. In our brainstorming, we listed routes separately so I created two primary folders in our codebase not really thinking about it. So there we had components and routes folders.

• Components

  • App.js
    • NavBar: Incorporating logo and navigation elements
    • Footer: Potentially housing a site map
    • QuestionsContainer: The heart of our application. State is here.
      • QuestionsList: Displaying a list of questions
      • QuestionCard: Detailing individual questions with functionalities like delete and vote
    • AddQuestionForm: A form to add new questions to our database

• Routes

  • Home: Showcasing the question of the day and a dashboard with dynamic stats
  • Questions: A route dedicated to housing all our questions
  • Add Question: A route guiding users to the question addition form

Evolution and Refinement

It was only once I started coding the routes that I couldn't quite think through and visualize the codebase. It took some dedicated research and follow up conversations with my teammates to arrive at consensus and clarity.

We realized that renaming the routes folder to "pages" would offer a more intuitive understanding of its function. This change was more than cosmetic; it represented a shift in perspective, emphasizing the role of each file in dictating a full page of content, rather than just managing routes.

The updated structure became:

Functional Components (reusable, modular functions)

• App.js (State moved here)

  • NavBar:

    • Logo
    • navigation links: see routes

  • Footer: site map

  • Questions Container

    • QuestionsList: displays list of questions

      • QuestionCard
        • shows 1 question from the list
        • Delete function
        • Vote function

    • Search

    • Category Filter

    • Randomizer: shows a random question function

    • Add question Form

    • Dashboard: shows stats like number of questions completed, most popular category, completed questions

Page Components (the presentation, the view)

• Home

  • Shows randomizer component
  • General information
  • Dashboard: that shows number of questions completed, most popular category, etc

• Questions: shows all the questions and has category filter and search functions

• Add a new question of the day: basically the add question form component

To sum up, we realized that the components folder was designed to store the smaller, reusable parts of the app, while the routes folder was meant to house the different routes that would define the various screens or views in the app.

This updated structuring helped gel our understanding of the flow of the various functional components and the page components.

Refining the Structure: Introducing a Styles Folder

• dashboard.css: To maintain a modular approach to styling, I introduced a styles folder, starting with a dedicated stylesheet for our dashboard component. At first it was necessity. The other two were cleaning up two separate .css files that were mistakenly used, and I didn't want to wait to build the dashboard component. After some personal deliberation, I realized this would allow for a longer term vision to build out the app to have a sign in featured and a much more tailored, personalized dashboard.

Integration and Experimentation with a New Hook

The development journey included a confetti hook to add a celebratory flair to the app. This integration turned into a fun little diversion that added so much joy.

Conclusion

Building this React app was a journey of learning and collaboration. The initial setup provided a strong foundation, but as we progressed, we adapted to create a more structured and efficient environment for development. The evolution from a basic structure on just being sure we can simply render each component to a more refined, collaborative, and dynamic setup was a testimony to the agile and flexible nature of development. It was a reminder that while starting with a robust plan is essential, being open to change and continuously adapting is equally vital in building a successful app.