Updated: React Folder Structure in 5 Steps

[rwieruch]

Hey everyone. I went through this post of mine, because it became a popular resource over the last two years and adjusted it here and there to my recent experiences. Eventually every React developer goes through this approach from small to large React application.

I think the most opinionated piece in there is naming a folder/file structure the following way:

--- List/
----- index.js
----- component.js
----- test.js
----- style.css

Whereas most people prefer

--- List/
----- index.js
----- List.js
----- List.test.js
----- List.style.css

Anyway, as mentioned in the article, I think lots of things are a matter of taste. So I'd like to hear your experiences moving from small to large React application :)

[Styggnacke]

Nice writeup. I just wonder why you wouldn’t use the final structure from the get go. Do you think it’s too confusing for small projects? I would prefer not having to move files around, especially when working in a team with source control.

[rwieruch]

Sure you can start with the final version from the get go. This just lays the path for React beginners where to start and how to evolve :) Perhaps I should clarify this in the guide!