React Code Organization

How to quickly publish React components from any repository.

How to reuse components across Gatsby projects.

Sharing components between your React app and your Gatsby blog or documentation site, with Bit.dev.

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.

In this post I'll show you how we manage our reusable components in React, from development to integration in our applications.

Tips for building reusable and shareable React components.

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.

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.

Reuse React components between projects in a managed way to keep your codebase DRY and maintainable.

How to speed-up development by sharing ReactJS components from any codebase, using Bit.

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.

In this short post, we’ll list a few common ways to reuse components between different React projects and across different teams.

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!

A personal, opinionated take on designing components in a world of simple scalable reuse.

Sharing components of all scales to optimize frontend collaboration.

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.

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!

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.

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.

Learn hands-on how to easily reuse a product-list component between React applications using bit, npm & friends.

Keep components in a monorepo. Build, test, publish and update independent components and their dependents. Get adoption.

This is how you separate infrastructure, content, style, layout, and state from each other.

Overview of the file structure I like to use in Next.js projects.

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.

In this tutorial, we will step through the process of making a component reusable for our React application.

With Data Structures, Components and integration with Redux

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.

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.

Utilizing Brad Frost’s Atomic Design principles to better architect React applications.

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?

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.

There are many ways we can structure components. We want components to be reusable, but only to the degree that is reasonable.

One of many ways to organize the files in a React project.

I’ll focus on using HOC and Functional Stateless Components to achieve reuse.

Bikeshedding on the perfect folder structure this week!

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.

In this React.js Tutorial, I show you how to convert a normal component into a functional stateless component.