How to choose the best structure for react applications?

#react #redux #help #discuss

Hello,

I am a new beginner to React JS, and for learn i made a project.
I decided to write this post after transferring files from one directory to another many times.

For those who immediately want to watch the code GitHub

What happened to me

src/feature/

Auth (folder module feature, exported all reducers/routes)
   Signup
   RestorePassword
   Signin
      components/SigninForm
           index.jsx
           index.module.scss
      actions.js
      reducer.js
      index.jsx (container with connect redux)
   index.js (exported all reducers/routes)
   reducers.js (include all reducers module)
   routes.js (routes for module)
Cabinet
   Home
   Users
      index.jsx
   index.js
   routes.js
Shared
   Layout
   PrivateRoute

What structure are you using?

Top comments (3)

Kevin Oca • May 21 '19 • Edited

Hello! sometimes i don't feel confortable with my project structure too, but lately with this one, i think it is good fit for my and the project. This is inspired in Angular 2, keeping 2 kinds of components, some working as containers and others as child components, notice that "containers" are components too, in fact, but of a kind of higher order/privilege in the jerarqy that keeps control over it's childs.

Also i use to separate concerns with files for data, logic and presentational files, using .json, .js and .css/scss files trying to keep it clean and pure of it's own kind in a container component, mostly of the time. I am still working on it.

minority • May 21 '19 • Edited

Hi, first I had this structure

components ++++ Signin ++++++ index.jsx ++++++ index.module.css containers ++++ SigninForm store ++++ Signin

The problem with this structure is that there are a lot of folders and they are in different places of the project.

feature ++ Signin ++++ components ++++++ SigninForm ++++++++ index.jsx ++++++++ index.module.css ++++ container ++++++ index.jsx ++++++ index.module.css ++++ reducer.js ++++ actions.js

At the moment I have done so.
But I also think how it can be done better.

Code project github.com/minority/node-react-mon...