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)