A complete ReactJs architecture to start fast a project without many configurations.

• Usage
• What does include

Usage

Cloning Template

npx @susegroj/react-starter-pack

NOTE During this process you will be ask to answer some question in order to have a clean, customized and ready to start copy of this template including with a customized README.md file (used readme-md-generator for this step)

And... thats it!

Running command

For development

yarn development

For builds

yarn build

Includes

What does this includes?

Some webpack configurations so you can start fast

• Alias for imports
• Js and Jsx extension resolver
• Source Map in development mode
• Hashes for files and images
• Loaders:
  • Babel loader
  • Html Loader
  • Css, style and sass loaders
  • Png, svg, jpg, jpeg, gif loader settings
  • Fonts loader
• Three files configurations
  • All the commons configurations between environments webpack.commons.js
  • Optimized for development environment webpack.config.dev.js
  • Optimized for production environment webpack.config.js

Some simple routing configurations, easily to handle

• An easy configurable routes.js files with params for private and public routes.
• A CustomRoute file with some settings just to add your authorization function based on your needs.
• A PrivateRoute,jsx file with some settings just to add your authorization function based on your needs
• A main App.jsxfor handle all the routes, allowing context hook usage and also with i18n language configurations

A simple but effective sass architecture that includes simple

• animations A collection of simple animations using mixins
• mixins Custom mixins for repetitive code, save time, includes
  • Animations
  • Keyframe
  • Hover
  • Flex
  • Images
  • Inputs
  • Skeleton Loader
  • Loader
• colors A template where you can create your color variables or a full color theme
• fonts A template where you can add all your fonts
• breakpoints A list of most common used breakpoints
• main A list of most used presets/resets based on my daily bases practices

Trying to following the best practices and clean code.

• Styles
  • stylelint-config-sass-guidelines rules
    Note: Strongly recommended instal stylelint on your code editor for format on save
• JS
  • plugin:react/recommended,airbnb, prettier rules
    Note: Strongly recommended having installed eslint and prettier on your code editor for format on save*

You can handle all the labels of your app in multiple languages. It has 2 languages already configured, english and spanish. There is a function for handle the language change on the useInitialState custom hook which works along with useLocalStoragecustom hook.

It contains a basic pre configurations so yoy can easily deploy your app in Netlify.
Note : Set your base directory as / in your netlify configurations in order to handle the routes.

These two hooks works along perfectly to manage your global state and take advantage for localStorage. Just add your own props on initialState.js and your functions on useInitialState.js file. useLocalStorage.js should not be modify, be careful.

It also contains a simple pwa configurations.

I also add some extra libraries that you can use to make your app look and works better

• React Helmet.
  This is used to change the tab header on your browser and also to make better SEO. Check more on react-helmet docs
• React Hook Toast I found this nice library to make you easier create and show notifications on your app. Check more on react-hot-toast docs
• React Icons A nice library that gatters all nicest svg icons for your app. Check more on react-icons site
• Husky Help us to follow best practices and prevent (runnig our linters) before you commit or push to your repo. Check more here

Author

💻 Jorge Macías Morales @susegroj

• Website: https://github.com/susegroj
• Twitter: @susegroj
• Github: @susegroj
• LinkedIn: @jorgemaciasmorales

Also you can share o give ⭐⭐

📝 License

Copyright © 2021 Jorge Macías Morales <@susegroj>(https://github.com/susegroj). This project is MIT licensed.