ReactJS Folder structures

Question

I'm battling to understand a component based folder structure with React applications. As I am learning, there's a multitude of different opinions, and the one that seems most natural to me, is grouping code by component. I may have misunderstood this though.

On my app, I have a shared header and footer, navbar and then pages which I group into my components. My login page, my register page, my landing (home) page. (I have 'about' and 'contact us' as well.

But this structure seems strange. I don't think I'm doing it right. Where should common items go (navbar, footer etc).

My paths are getting quite long as well.

import fetchData from '../../helpers/fetchData.js';

Any advice or pointers would be great.How should I be structuring my folders? As this is due to become a large app with around 20 screens, this could get messy.

Answer 1

This question confused pretty much all developers when they're learning React.

React is smart enough to organize all your files application.

The important thing you need to know is when you finished and creating a production build to your application all your CSS files will be in one file as well to all your components will be in only one JS file as well to all your images, icons...etc will be in a folder called media.

After you've done created a production build by doing

//If your project is built with Create React App, run
npm run build

You will get only one folder called "build" in this folder you will have index.html and static folder it has only one CSS file and one JS file and media folder as I explained above. The files inside this folder will need them to be uploaded to your site

So what you really need to do now:

You don't have to create a specific CSS file for each component

you can simply create only one file in public folder and link it in index.html file so all your components will have an access easily to this CSS file.

 <link rel="stylesheet" href="styles.css">

And you can create Services folder will have all your application actions like

/app
    /layout
      /header.js
      /footer.js
/members
    /Sign
      /index.js

    /Register
      /index.js    

    /Profile
      /index.js

/services
    /members
      /actions.js
      /reducer.js//in case if you're using redux
    /panel
      /actions.js
      /reducer.js//in case if you're using redux

/media
    /images
      /images.js // why JS file here?? read below
      /logo.svg
      /cover.svg
      /profile.svg
      /body.svg

The important thing is to make the folders structures easy to understand to you and try not to make it messy by creating many files it's not needed to be in single file.

Try to make it simple in the case in the future if you need to update something so that's will not take a while to re-understanding, just make it as you feel it's comfortable to you.

Why there's a JS file inside images folder?

You have many ways how to handle your images but how if you need hundreds of images in one component, are you going to import them like this

import logo from '../images/logo.svg';
import cover from '../images/cover.svg';
import profile from '../images/profile.svg'; // ...etc

I know that doesn't make sense for you, I'll show you two way to handle hundreds of images

First way: Because you can’t use import paths, you have to create a images folder in the public folder and use this code

 //This is the regular way.

  <img src={process.env.PUBLIC_URL + 'images/profile.svg'} width={"200"} height={"200"} className="profile-img" alt="profile" />

Second way: you can specify each component has an images.js file, then import all the images that retarded of that component in images.js and name it as the related component name (It will let you know what this images file for.)

images.js

import logo from './logo.svg';
import cover from './cover.svg';
import profile from './profile.svg';
import background1 from './body.svg';
export default {
    logo,
    cover,
    profile,
    background1
}

Then in your component, you can just import images.js file:

import images from './images';

Then call any img you want:

   <img src={images.logo} className="App-logo" alt="logo" />
      <img src={images.cover} className="App-logo" alt="logo" />
      <img src={images.profile} className="App-logo" alt="logo" />
      <img src={images.background1} className="App-logo" alt="logo" />

Unable to load images from local library in React.js

Finally, I prefer you to use when generating a production build is minify and uglify

This will compress the JS code making it smaller — you can use the UglifyJsPlugin which does also uglify CSS contrary to what the name would suggest

Check this like out it will help you also

How to Organize React Files Before It’s Messed Up?