@susegroj/react-starter-pack

React Starter Pack (Boilerplate) ⚛

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?

Webpack

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

Routing with react-router-dom

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

Sass

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

Style and JS linter

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*

I18n Langugage labels with react-i18next

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.

Netlify settings

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.

LocalStorage and React Context hooks

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.

PWA

It also contains a simple pwa configurations.

Extra nice libraries

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

If you find it useful, please show your support 👇🏼

Also you can share o give ⭐⭐

📝 License

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

---