The Skeleton
The Skeleton is just an opinionated React starter developed by internal frontend team of WIT Indonesia. In the next section, we'll attach some references we use for the structure.
How the Data Flow
Shortly, the component send the data to store and it will process the data. We "almost" separate the view and some logic function to make the file and code as small as possible. So we will not confusing so much about reading the code.
I was inspired by the mobile architecture pattern to use this approach. The Android has a ViewModel to separate activity/fragment with the logic. We try to implement the ViewModel with the different name, Store. The naming is inspired from Redux that put the state in the store. But we do a little modification and make the store can handle a logic operation. Please thank to React Hook.
Project Structure 🔥
# Root Project
.
└── src # Repet after me, "Source".
├── component # Contan reusable component.
├── composables # Composition.
├── containers # Layour wrapper.
├── context # Global state wrapper.
├── hooks # The magic will happen here.
├── pages # Contain app pages.
├── routing # All route available in the app.
├── services # Interact with data layer.
├── stores # We can call it a ViewModel
└── utils # Date formatter, string formatter etc.
Hook vs Redux
Actually, React Hook and Redux is a different thing and cannot be seen as the opposite of each other. But in my opinion, React Hook is enough for handle the state management, because we don't need setup anything to go.