React Project Organization: Best Practices for Developers at Any Level

Teerth Sankesara — Tue, 30 Jul 2024 15:20:53 +0000

Mastering Your React Project Structure: A Friendly Guide for All Levels

Welcome to the world of React! Whether you're just starting out, have a few projects under your belt, or are a seasoned pro, organizing your project can sometimes feel like navigating a maze. But don't worry, I've got you covered! In this post, we'll explore how to structure your React projects to keep them neat, scalable, and easy to manage. Let's dive in!

For Beginners: Keeping It Simple and Sweet

If you're new to React, you probably just want to get things working without worrying too much about where to put your files. That's totally fine! At this stage, it's all about learning the basics and getting comfortable with the framework.

Basic Folder Structure:

Components: This folder contains all React components, including everything from basic buttons to more complex forms. Organizing components in one place helps beginners easily find and work with them.
Hooks: Custom hooks are stored in a separate folder. Hooks are essential for managing state and side effects in functional components.
Tests: All test files are placed in a single folder, separate from the code they test. This separation helps maintain clarity and organization in the project.

Example:

/src
  /components
  /hooks
  /tests
  index.js
  App.js

This setup is straightforward and helps you keep track of your components and hooks without getting overwhelmed.

For Intermediate Developers: Organizing and Scaling Up

As you get more comfortable with React and start building more complex applications, it's time to add some structure to your project. This is where things get a bit more organized, and you start thinking about scalability.

Intermediate Folder Structure:

Assets: This is where you stash all your images, global CSS files, and any other non-JavaScript assets. It's like your app's toolbox.
Context: If you're using React's Context API for state management, this is where you'll keep all those context-related files. It helps in managing the state across different parts of your app.
Data: Store your JSON files or any other data constants here. Keeping data separate from your logic and UI makes it easier to manage and update.
Pages: For apps with multiple pages, it's a good idea to have a separate folder for each page. This way, each page can have its own set of components and styles.
Utils: Utility functions and helpers go here. These are the little snippets of code that make your life easier by handling common tasks.

Example:

/src
  /assets
  /components
  /context
  /data
  /pages
  /utils
  index.js
  App.js

This structure not only helps you stay organized but also makes your codebase easier to navigate and maintain. It’s like upgrading from a simple toolbox to a well-organized workshop.

For Advanced Developers: Crafting a Robust and Scalable Architecture

At the advanced level, you’re likely working on large-scale applications or projects that require robust architecture. The goal here is to create a highly modular and maintainable codebase. This structure is designed to handle complexity with grace.

Advanced Folder Structure:

Public: Contains static files like your index.html, which is the entry point of your app. It’s like the welcome mat of your project.
Src: The main hub of your application, neatly divided into several subdirectories.
- Assets: Further divided into categories like audios, icons, images, and videos. It’s your multimedia corner.
- Components: Organized by functionality or feature, with each component having its own folder. This includes the component file, its styles, and any related assets.
- Contexts: For managing state and contexts across your app. It’s like the control room for your app’s state.
- Services: If your app talks to APIs or performs other backend tasks, those logic pieces go here.
- Store: For global state management using libraries like Redux or MobX. It’s your app’s memory bank.
- Hooks: Custom hooks, organized by their purpose. Think of these as your app’s special abilities.
- Pages: Each major page or view of your app gets its own folder. This keeps your app’s structure tidy and easy to follow.
- Utils: Advanced utility functions and higher-order components (HOCs) live here. These are the tools that make your app smarter and more efficient.

Example:

/public
  index.html
/src
  /assets
    /audios
    /icons
    /images
    /videos
  /components
    /Button
      index.jsx
      button.module.css
    /Modal
      index.jsx
      modal.module.css
  /contexts
  /services
  /store
  /hooks
  /pages
  /utils
  index.js
  App.js

This structure is like a well-oiled machine, designed to handle the complexity of large-scale apps with ease. It ensures that everything has its place, making the codebase easy to navigate and maintain.

Wrapping It All Up: Finding Your Perfect Fit

Choosing the right folder structure for your React project depends on your project's needs and your team's workflow. Start simple if you're a beginner, and gradually adopt more sophisticated structures as your project grows and your skills improve. Remember, there's no one-size-fits-all solution—adapt these structures to what works best for you and your team.

A well-organized project not only makes development smoother but also helps when collaborating with others or bringing new developers on board. As you continue to work with React, don't be afraid to refine and tweak your structure. The goal is always to make your codebase as clean, efficient, and maintainable as possible.

Happy coding!

Hosting Static Websites on Heroku

Teerth Sankesara — Wed, 07 Apr 2021 08:28:33 +0000

Hey there, so I've been developing React web-apps for a year now, but recently I've decided to go for the good old method of web development DOM.

So I took up an Udemy course by Brad Traversy to create 50 projects solely based on HTML, CSS and JS.

After I've created my first project it hit to that I had no idea on how to host an static website for free, I know github gives us this option but I've worked with Heroku so much that I wanted nothing more that to use it here as well, and after some googling I've found some outdated-solution.
I decided to write an clean solution here.

So Here comes the good part.

Sites Hosted Here
Code Here

So as Heroku doesn't allow us to host serve static content I'll be using php to host it.

Step 1 => Create an index.php file in your root directory.
Step 2 => Insert Following Code (Where index.html in you main html file)

<?php 
define('PROJECT_ROOT_PATH', __DIR__);

include_once(PROJECT_ROOT_PATH . '/index.html'); 
?>
```

` 

**Step 3 =>** Create an composer.json file in root and fill it wil `{}` (php server require an composer.json file, it can be an empty json but it is still required)

**Step 4 =>** Run following commend to create and commit an local git repository 
`git init`
`git add .`
`git commit -m 'first commit'`

**Step 5 =>** Create an [Heroku Account](https://signup.heroku.com/) and Install [Heroku Cli](https://devcenter.heroku.com/articles/heroku-cli).

**Step 6 =>** Run `heroku login` on you cmd or terminal.

**Step 7 =>** Run `heroku apps:create <APP_NAME>`

**Step 8 =>** Run `git push heroku <BRANCH_NAME>`

### So it concludes us deploying static websites on Heroku. 

*Please leave an comment if this helped or if you faced any issues, I'd be more then happy to help you. Follow me if you liked this content I'd be making post on daily bases about my journey through making these 50 projects.*

Forem: Teerth Sankesara

React Project Organization: Best Practices for Developers at Any Level

Mastering Your React Project Structure: A Friendly Guide for All Levels

For Beginners: Keeping It Simple and Sweet

Basic Folder Structure:

For Intermediate Developers: Organizing and Scaling Up

Intermediate Folder Structure:

For Advanced Developers: Crafting a Robust and Scalable Architecture

Advanced Folder Structure:

Wrapping It All Up: Finding Your Perfect Fit

Hosting Static Websites on Heroku

So Here comes the good part.