How to organize the file of his project React (without Redux)?

Question

Currently I use sass, images, and jsx files and I would like to know if there is a standard.

For example, currently I'm doing this:

"/src
    /components
       App.jsx
       App.scss
       /Header
         Header.jsx
         Header.scss
    /utils
    index.js"

In my App.jsx (Example importations)

import Header from './Header.jsx
import appSass from './App.scss'

Answer 1

There are many ways good practices in organizing your files, I am currently going through a coding bootcamp and they showed us this process of organization:

/src
    /components
        /app
            index.js
            app.scss
        /header
            index.js
            index.scss
    /lib
        util.js
    /style
        main.scss
        _reset.scss
        _vars.scss
        _layout.scss
        _base.scss
    main.js

In your main.js you can import your app component with:

import App from './component/app'

and in your app.js (and other components) you will can import using:

import Header from './header'

I found this a nice way to keep things organize and makes your imports more uniformed where you aren't trying to figure out which directory level you are storing each component.

It also is a good way to organize sass files, inside the style directory you have all your sass files that has to do with the styling of your overall app. main.scss imports the other files and dictates which scss you want applied first (usually a reset/normalize). Each component directory will also contain a sass file that will dictate the styling for that single component.