jeffersonRibeiro / react-materialui-scaffolding

πŸ“¦ React Single Page Application with MaterialUI starter-kit. Folder structure based on Alexis Mangin's medium post "How to better organize your React applications?"

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

βš› React Single Page Application with MaterialUI starter-kit.


React SPA with MaterialUI scaffolding

npm install
npm start

Using:

  • MaterialUI
  • Alexis Mangin's medium post as a guide to better structure scalable React projects folder grouped by features or routes.
/src
  /components 
    /Button 
    /Notifications
      /components
        /ButtonDismiss  
          /images
          /locales
          /specs 
          /index.js
          /styles.scss
      /index.js
      /styles.scss
  /scenes
    /Home 
      /components 
        /ButtonLike
      /services
        /processData
      /index.js
      /styles.scss
    /Sign 
      /components 
        /FormField
      /scenes
        /Login
        /Register 
          /locales
          /specs
          /index.js
          /styles.scss
  /services
    /api
    /geolocation
    /session
      /actions.js
      /index.js
      /reducer.js
    /users
      /actions.js
      /api.js
      /reducer.js
  index.js 
  store.js

"Each component, scene or service (a feature) has everything it needs to work on its own, such as its own styles, images, translations, set of actions as well as unit or integration tests. You can see a feature like an independent piece of code you will use in your app (a bit like node modules)." - Alexis Mangin

Features

  • Basic admin structure with Async Routes configured
  • SASS

Todo

  • State management


A little project by Jefferson Ribeiro

About

πŸ“¦ React Single Page Application with MaterialUI starter-kit. Folder structure based on Alexis Mangin's medium post "How to better organize your React applications?"


Languages

Language:JavaScript 96.1%Language:HTML 3.2%Language:CSS 0.7%