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

Sharing React Widgets Between Apps (blog.bitsrc.io)
Jul 02, 2020
How and why you should share React data-fetching components.
  • Eden Ella
How to Share React Components Between NextJS Projects (blog.bitsrc.io)
Jun 30, 2020
Publishing React components from a NextJS Project, to reuse in another.
  • Nathan Sebhastian
Sharing React Components between a Web App and an Electron Desktop App (blog.bitsrc.io)
Jun 22, 2020
How to publish components from a React web app and reuse them in a React-Electron desktop app.
  • Nathan Sebhastian
Blogged Answers: React Components, Reusability, and Abstraction (blog.isquaredsoftware.com)
Jun 21, 2020
Thoughts on the tradeoffs of trying to write "reusable components".
  • Mark Erikson
How to Publish React Components (blog.bitsrc.io)
Jun 08, 2020
How to quickly publish React components from any repository.
  • Eden Ella
Sharing React Components between Your SPA and Static Pages (blog.bitsrc.io)
May 18, 2020
Sharing components between your React app and your Gatsby blog or documentation site, with Bit.dev.
  • Eden Ella
How I Organize React Projects (blog.danawoodman.com)
Apr 26, 2020
This short article will outline how I tend to go about structuring React applications and some rationale around these decisions. If my thinking evolves on this subject, I will attempt to keep this post updated to reflect my new thinking.
  • Dana Woodman
How to Manage Reusable UI Components (hackernoon.com)
Mar 31, 2020
In this post I'll show you how we manage our reusable components in React, from development to integration in our applications.
  • Jonathan Saring
9 Tips for Building Awesome Reusable React Components (blog.bitsrc.io)
Mar 12, 2020
Tips for building reusable and shareable React components.
  • Eden Ella
React Single File Components Are Here (swyx.io)
Mar 10, 2020
The launch of RedwoodJS today marks a first: it is the first time React components are being expressed in a single file format with explicit conventions.
How to Micro Frontend with React (robinwieruch.de)
Mar 10, 2020
Micro Frontends are the equivalent for Microservices: Whereas microservices are an architecture to split up monolithic backend applications into smaller services, micro frontends can be used to achieve the same on the frontend. But they are not as popular as microservices yet.
6 Ways to Share React Components in 2020 (blog.bitsrc.io)
Mar 02, 2020
Reuse React components between projects in a managed way to keep your codebase DRY and maintainable.
  • Jonathan Saring
Maximizing Code Reuse in React (blog.bitsrc.io)
Feb 18, 2020
How to speed-up development by sharing ReactJS components from any codebase, using Bit.
  • Eden Ella
Writing Scalable Code with Shared React Components (blog.bitsrc.io)
Jan 30, 2020
In this post, I’ll demonstrate, using Bit, how to turn your frontend code from a monolith into a modular composition of independent components that are versioned individually and can be consumed and collaborated on from any repo.
  • Eden Ella
4 Ways to Reuse React Components (blog.bitsrc.io)
Jan 28, 2020
In this short post, we’ll list a few common ways to reuse components between different React projects and across different teams.
  • Jonathan Saring
Mixing React modules into a legacy application (itnext.io)
Jan 25, 2020
With a huge monolithic frontend application that is getting on in years, you will come to a point where the cost of maintenance and incremental changes is considerable, radical changes seems impossible, and recruiting for an outdated technology is a major hassle. It is time for a rewrite!
  • Kjartan Rekdal Müller
Designing Reusable React Components (blog.bitsrc.io)
Jan 20, 2020
A personal, opinionated take on designing components in a world of simple scalable reuse.
  • Fernando Doglio
Sharing React Components: From Atoms and Molecules to Pages (blog.bitsrc.io)
Jan 01, 2020
Sharing components of all scales to optimize frontend collaboration.
  • Eden Ella
Two Applications, One Repository (react.christmas)
Dec 23, 2019
When you’re developing similar apps for the web and native platforms, it's hard to find a project structure that works well. Let's take a look at how our team is approaching this challenge for maintaining different view layers, while sharing most of the business logic.
  • Caroline Odden
  • Kent Andersen
How I structure my React code (react.christmas)
Dec 22, 2019
If you're looking for the definite answer to how you should structure you React apps, this article probably isn't for you. If you're interested in seeing how it can be done - read on!
  • Mathilde Wærstad
Domain-Driven Design With React (css-tricks.com)
Dec 16, 2019
There is very little guidance on how to organize front-end applications in the world of React. The truth is that we can do better. Let’s take a look at one pattern you might consider using to architect your site.
  • Adam Conrad
Sharing Code between React Web / Native TypeScript Projects (codeburst.io)
Nov 27, 2019
Say we are working on a React Web and React Native project with overlapping functionality. We write some common code that we want to share between them, e.g., custom React Hooks. We don’t want to use the “copy-and-paste” method of sharing code; too error-prone. We want something that behaves like our projects’ other libraries, i.e., behaves like a npm library.
  • John Tucker
How to Reuse React Components Without Overhead (itnext.io)
Oct 02, 2019
Learn hands-on how to easily reuse a product-list component between React applications using bit, npm & friends.
  • Jonathan Saring
React Component Monorepo Library Made Easier (blog.bitsrc.io)
Sep 19, 2019
Keep components in a monorepo. Build, test, publish and update independent components and their dependents. Get adoption.
  • Jonathan Saring
Your React App Is a Mess Before You Even Know It (codeburst.io)
Sep 17, 2019
This is how you separate infrastructure, content, style, layout, and state from each other.
  • Frank Zickert
Next.js File Structure (sergiodxa.com)
Aug 27, 2019
Overview of the file structure I like to use in Next.js projects.
  • Sergio Xalambrí
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

How to Share Code Between React and React Native (youtube.com)
Oct 17, 2019
Learn how to share code between React and React Native to avoid duplicating logic.
Using monorepos to supercharge development (youtube.com)
Sep 13, 2019
Dmitri has spent 6 months researching monorepos so you don't have to. In this talk you will learn all you need to know about what a monorepo is, the benefits it provides, pitfalls to watch out for and how to make it work for you.
  • Dmitri Grabov
Successful Web & React Native Code Sharing Strategies (youtube.com)
Jul 31, 2019
At Nozbe, we share almost all component-level code between React for the web and React Native (both iOS and Android) — without ReactXP, react-native-web, or react-primitives! Let me show you how we did this — from project setup, through shared infrastructure, all the way up to shared components and styling — and how you can achieve the same thing.
  • Radek Pietruszewski
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.