itnext.io Open in urlscan Pro
52.4.145.119  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Open in app

Sign up

Sign in

Write


Sign up

Sign in




HOW TO STRUCTURE YOUR REACT APP 2.

Ven Korolev

·

Follow

Published in

ITNEXT

·
4 min read
·
Sep 26, 2018

219

1

Listen

Share

In the previous story of how to structure your react app, I wrote about using
bundles as the top level of entry points of your app, which might work for some
and might not for others. Today I am going to tell you about another way of
structuring your react app which we are using at unicorndev — domains. I would
recommend reading the first version of this topic before you continue.




Before we start

Before we even start talking about domain, let’s take a look at it:

We define a domain called alert it has components and redux folders but it also
has constants file which is related only to this domain.



As you might see it’s quite tiny.

We define a domain and two folders inside it: components & redux. It depends on
you what to put inside a domain folder. Whether you are using redux or relay.
The idea is to keep everything related to a domain inside it’s own folder.



Idea

Having domains as the top level of your app is beneficial for some reasons:

 1. Domains are small. It’s easy to keep it in mind while working with it
    because everything you work on is in the same folder. It’s also easy to
    reorganise in case you don’t like it.
 2. Main application’s structure remains flat. Easier to planning the app on the
    initial stage because domains are independent.
 3. No deep folder structure — 3 levels average. Don’t need to write long
    imports that’s why it’s easier to remember what you need to import and from
    what domain.
 4. Each domain has a similar structure and usually has some subset of entities
    like components redux actions reducers sagas . As long as you keep all the
    domain look similar it’s easy to remember and used to it.
 5. Domains are easy to specify because it’s always clear what component you are
    going to write it’s also easy to specify a domain. If you need to create a
    common text input or a button, so you might want to create a domain called
    input.
 6. This approach eliminates things like shared or common where usually all the
    things which has nothing in common are. You usually put a thing which you
    can’t specify in one of those folders.



Humans

We’re humans and our brain works in a specific way. It means that for our brain
some things are easy to remember and work with rather than others. We tend to
remember small and simple things faster. This is why this approach is compatible
with a human brain:

 1. Clear to understand what is what. Domain’s name represents the main function
    of it.
 2. Easy to find domain by feature’s name/description.
 3. Easy to keep them tiny because domains are specifically created for a
    purpose, and they mostly keep stuff only related to their domains logic.



How to specify

Before you even start thinking of what is a domain you are working or going to
work on now you might want to think if you already have this domain in your app.
If you don’t have the domain so you need to create one:

 1. Choose the name. Name should reflect the main function of a domain. Just
    think about what’s the main purpose or reason you are creating it. Usually
    name should be singular and start from a lower case letter. Like: user auth
    , navigation .
 2. Try to keep all the domain structures similar. To be able to write/find
    stuff quickly you would have to keep a similar structure for all the
    domains. For example:




Difference

A bundle is a higher level of abstraction for keeping components than a domain.
Defining a bundle is always hard because you need to think about what type of
components will be there and because it’s a high-level abstraction it’s always
hard to determine, several bundles could have logic intersections that lead to
extracting a new bundle or keep it as technical debt. A domain is easy. Simple
and exact.

What is better

It is absolutely up to you how to structure your react app. Just think about
other people who are working or might be working on the same project with you.

Like & Share. Piece.

P.S. Thanks to all from unicorndev team for reviewing & helping with this
article.




SIGN UP TO DISCOVER HUMAN STORIES THAT DEEPEN YOUR UNDERSTANDING OF THE WORLD.


FREE



Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.


Sign up for free


MEMBERSHIP



Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app


Try for 5 $/month
React
Redux
GraphQL
JavaScript


219

219

1


Follow



WRITTEN BY VEN KOROLEV

220 Followers
·Writer for

ITNEXT

I am a javascript preacher. Write about React, Relay, GraphQL, Testing.

Follow




MORE FROM VEN KOROLEV AND ITNEXT

Ven Korolev

in

ITNEXT


GRAPHQL & JEST: SNAPSHOT TESTING


TESTS ARE VERY IMPORTANT IN THE DAILY DEVELOPMENT FLOW. WHENEVER YOU BUILD A NEW
FEATURE OR REFACTOR AN EXISTING ONE YOU WANT TO BE SURE…

Jun 24, 2018
237



Maksim Dolgikh

in

ITNEXT


FRONTEND DEVELOPMENT PRACTICES THAT WILL HELP YOU AVOID FAILURE


SIMPLIFY AND ACCELERATE YOUR FRONTEND DEVELOPMENT WITH A FEW EFFECTIVE
SOLUTIONS. HOW TO REDUCE TECHNICAL DEBT, WRITE ROBUST CODE, AND…


Sep 18
485
11



Raghav Joshi

in

ITNEXT


STOP USING SIZED BOX FOR SPACING, USE THESE INSTEAD — FLUTTER BYTES


2 SIZEDBOX ALTERNATIVES IS ALL YOU NEED


Sep 19
354
8



Ven Korolev

in

ITNEXT


REACT: COMPONENT CLASS VS STATELESS COMPONENT


MOST OF NEW REACT DEVELOPERS USUALLY ASK THIS QUESTION: WHAT IS THE DIFFERENCE
AND WHICH ONE SHOULD I USE? IN THIS ARTICLE, WE WILL TRY TO…

Mar 14, 2018
2.4K
10


See all from Ven Korolev
See all from ITNEXT



RECOMMENDED FROM MEDIUM

Shuai Li

in

Programming Domain


CAN YOU ANSWER THIS SENIOR LEVEL JAVASCRIPT PROMISE INTERVIEW QUESTION?


MOST INTERVIEWEES FAILED ON IT.


Aug 12
3.1K
35



Alexander Nguyen

in

Level Up Coding


THE RESUME THAT GOT A SOFTWARE ENGINEER A $300,000 JOB AT GOOGLE.


1-PAGE. WELL-FORMATTED.


Jun 1
24K
490




LISTS


STORIES TO HELP YOU GROW AS A SOFTWARE DEVELOPER

19 stories·1425 saves


GENERAL CODING KNOWLEDGE

20 stories·1654 saves


MEDIUM'S HUGE LIST OF PUBLICATIONS ACCEPTING SUBMISSIONS

334 stories·3713 saves


GENERATIVE AI RECOMMENDED READING

52 stories·1436 saves


Asian Digital Hub


REACT COMPONENT REUSABILITY IN MICRO-FRONTENDS


ARE YOU TIRED OF REINVENTING THE WHEEL EVERY TIME YOU BUILD A NEW
MICRO-FRONTEND? DO YOU FIND YOURSELF COPYING AND PASTING REACT COMPONENTS…


Sep 28




Pradip Bhusnar


BUILDING RESILIENT OFFLINE-FIRST REACTJS CRUD APPS WITH REDUX TOOLKIT AND
REDUX-OFFLINE OR SERVICE…


THIS BLOG POST DIVES INTO BUILDING A REACTJS APPLICATION THAT CAN HANDLE CRUD
(CREATE, READ, UPDATE, DELETE) OPERATIONS SEAMLESSLY, EVEN…

Jul 11
50



Tari Ibaba

in

Coding Beauty


5 AMAZING NEW JAVASCRIPT FEATURES IN ES15 (2024)


5 JUICY ES15 FEATURES WITH NEW FUNCTIONALITY FOR CLEANER AND SHORTER JAVASCRIPT
CODE IN 2024.


Jun 2
3K
20



Taufik Kemal


MODULARIZING REACT APPLICATION


I FOUND AN INTERESTING ARTICLE HERE:

May 9
32


See more recommendations

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams

To make Medium work, we log user data. By using Medium, you agree to our Privacy
Policy, including cookie policy.