/-template-Create-React-App-with-Material-UI-TypeScript-Redux-and-Routing

A Boilerplate to start using create react app with Material UI, Typescript, Redux and React-Router

Primary LanguageTypeScriptMIT LicenseMIT

Create React App example with Material-UI, TypeScript, Redux and Routing

This is a Boilerplate/Template for a react project with React Hooks, Material-UI 4 and React-Redux 7 (with hooks!).

Preview Deployed website

example

example

Inspired by:

Contains

Roadmap

  • Make function based components and use hooks for state etc.
  • Implement Material-UIs new styling solution based on hooks
  • use react-redux hooks
  • Setup Material UI custom styling soluton with TypeScript, with setup for dynamic theme switching with Redux
  • Hot Reloading -> Waiting for official support of react-scripts

How to use

Download or clone this repo

git clone https://github.com/arkajyotiMukherjee/-template-Create-React-App-with-Material-UI-TypeScript-Redux-and-Routing.git

or use this as a template:

More information from Github, here.

Install it and run:

npm i
npm start

Build it and serve:

npm run build
npm install -g serve
serve -s build

Enable PWA ServiceWorker [OPTIONAL]

Just comment in the following line in the index.tsx:

// registerServiceWorker();

to

registerServiceWorker();

Enable Prettier [OPTIONAL]

  1. Step: Install the Prettier plugin (e.g. the one of Esben Petersen)
  2. Add the following snippet to your settings in VSCode:
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
       "source.organizeImports": true // optional
   },

The idea behind the example

This example demonstrate how you can use Create React App with TypeScript and add easy theme customonization with Material UI.

Contributors

Big thanks to innFactory