React Code Organization

React doesn’t have opinions on how you put files into folders. That said there are a few common approaches popular in the ecosystem you may want to consider. More info

Articles & Tutorials

Structuring React applications (javascriptplayground.com)
Jul 08, 2019
Today's post lays out my current thinking and approach to structuring React applications: the folder structure I use, my naming conventions, where I write tests, and so on.
What are Reusable Components in React? (robinwieruch.de)
May 26, 2019
In this tutorial, we will step through the process of making a component reusable for our React application.
How I architected a single-page React application (medium.freecodecamp.org)
Apr 13, 2019
With Data Structures, Components and integration with Redux
  • Gooi Ying Chyi
Optimal file structure for React applications (medium.com)
Mar 05, 2019
This article is an opinion piece for what file structure has worked best for me and my teams after our own trial and error. You are more than welcome to adjust it for your own use case.
  • Charles Stover
this or that? component names: index.js or component.js (bradfrost.com)
Feb 06, 2019
As a consultant I get to see a lot of different codebases, and I try study other projects’ architecture in order to better understand this Brave New JavaScript World we’re living in.
  • Brad Frost
Thinking About React, Atomically (blog.usejournal.com)
Aug 29, 2018
Utilizing Brad Frost’s Atomic Design principles to better architect React applications.
  • Katia Wheeler
CRUV: Structure React apps in 4 directories and 3 files (jamesknelson.com)
Aug 09, 2018
Where do your components go? Where should you put business logic? Where do higher order components fit in? And even if your structure feels right now, how do you know that it won’t feel wrong later?
The best way to architect your Redux app (medium.freecodecamp.org)
Jul 19, 2018
This article is about how to think in Redux. We’ll try to understand how we can utilise this wonderful library to make our application more stable, robust, and maintainable.
  • Lusan Das
How to structure components in React? (reallifeprogramming.com)
Oct 13, 2017
There are many ways we can structure components. We want components to be reusable, but only to the degree that is reasonable.
  • Bartek Witczak
How to Structure Your React Project (daveceddia.com)
May 22, 2017
One of many ways to organize the files in a React project.
Share Code between React and React Native Apps (hackernoon.com)
Jan 30, 2017
I’ll focus on using HOC and Functional Stateless Components to achieve reuse.
  • Christian Sepulveda

Video Guides & Talks

Micro-frontends: Is it a Silver Bullet? (youtube.com)
Jul 04, 2019
This talk will cover how we made the migration to micro-frontends following challenges we encountered. And will give a brief overview of some of the answers to the ultimate question, are micro-frontends worth the hype?
  • Liron Cohen
Sharing Code Between React and React-Native: What Not to Share (youtube.com)
May 03, 2019
In this talk I will give real examples from my work with made.com, migrating their web and mobile application to React and React-Native with code sharing as a primary objective.
  • Ben Ellerby
Codecrumbs in React (youtube.com)
May 01, 2019
The granular approach of designing components helps us to build reusable and encapsulated features. On another hand, it also makes a codebase much more complex by extra added abstractions and drastically increased amount of source code files. How can we navigate the maze of hundreds of React-atoms now?
  • Bohdan Liashenko
React Component Organization Tips (youtube.com)
Jan 04, 2019
Someone asked me a question about destructuring custom `this` methods in the `render` method. I'm going to answer their question in addition to talk about why I don't like using methods like that at all.
Feature Driven Architecture (youtube.com)
Dec 17, 2018
Large applications cannot be structured the same way as small applications. Many good decisions you make for a small application suddenly become bad once it grows in code and organization size. Let me walk you through a number of challenges and good decisions for scalable applications.
  • Oleg Isonen
The perfect folder structure for React (youtube.com)
May 21, 2018
Bikeshedding on the perfect folder structure this week!
Sharing Code between React and React Native (youtube.com)
Mar 31, 2018
Many companies use React JS for their website and would like to reuse that code in their mobile apps. This talk will cover identifying the best candidates for shared code, sharing both UI components and UI-less business logic, and using React Native in both greenfield and brownfield apps.
  • Erica Cooksey
How To Convert Components To Functional Stateless Components (youtube.com)
Dec 02, 2016
In this React.js Tutorial, I show you how to convert a normal component into a functional stateless component.

Courses & Video Series

React Recipes (lynda.com)
Jul 16, 2018
This course provides tested, easy-to-follow instructions to solve the most common challenges that React developers face every day
  • Diego Muracciole
React: Building Large Apps (lynda.com)
Aug 21, 2017
Build bigger and bolder applications. Explore tools and techniques for large-scale app development with React.
Creating Reusable React Components (pluralsight.com)
Jun 04, 2017
Learn how to design, create, and publish a reusable React component library that you can share with your team, your company, or the world.