DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for React + MobX Boilerplate
Ibrahim Elaradi
Ibrahim Elaradi

Posted on • Updated on

React + MobX Boilerplate

y tho

Simple, I really got tired of setting up a structure for every react project I make, which lead into the birth of this little boilerplate code, here's what's included in it:

  • TypeScript
  • Sass (global styles and module styles)
  • MobX + MobX State Tree πŸ₯°
  • Apisauce

This template takes heavily from Ignite CLI's boilerplate for React Native in terms of used tech and file structure

GitHub logo ibrahimelaradi / react-template

Template for developing react app with structure inspired by Ignite CLI's react native boilerplate

cover

A react template heavily inspired by Ignite CLI's boilerplate for React Native, it uses a couple of generators with simple template customization.

Used Tech

Project Structure

src
β”œβ”€β”€β”€apis
β”‚   β”œβ”€β”€β”€base          // The base API that can be extended to implement clients
β”‚   └───pokemon       // Example of extending the base API
β”œβ”€β”€β”€assets            // Project assets
β”œβ”€β”€β”€components        // Components folder
β”‚   └───pokemon-card  // Example, generated by "yarn g component pokemon-card"
β”œβ”€β”€β”€models            // Mobx models folder
β”‚   β”œβ”€β”€β”€extensions    // Extensions to be used in mobx models
β”‚   β”œβ”€β”€β”€pokemon       // Example, generated by "yarn g model pokemon"
β”‚   └───root-store    // The root of the mobx store
β”œβ”€β”€β”€pages             // Pages folder
β”‚   └───pokemon-list  // Example, generated by "yarn g page pokemon-list"
β”œβ”€β”€β”€router            // Router definition folder
β”œβ”€β”€β”€styles            // Global styles
β”œβ”€β”€β”€ui                // UI components folder
…

I'm currently working on a full example usage that will explain some of the concepts used in this project, until then, feel free to check out the repo on Github, any suggestions/contributions are very welcome!

peace out

Top comments (0)

An Animated Guide to Node.js Event Lop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.