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

This is a new verison with React Hooks, Material-UI 4 and React-Redux 7 (with hooks!). We use this template for all our new projects. If you want to bootstrap a project with the classic approach without hooks but with class components, you are welcome to use the previous version.

Inspired by:

• Material-UI
• react-redux-typescript-boilerplate

Contains

• Material-UI
• Typescript
• React
• Redux
• Redux-Thunk
• Redux-Persist
• React Router
• Redux DevTools Extension
• TodoMVC example
• PWA Support
• Local Project Library (/lib)

Roadmap

• Make function based components and use hooks for state etc.
• Implement Material-UIs new styling solution based on hooks
• use react-redux hooks
• Hot Reloading -> Waiting for official support of react-scripts

Important notice:

This project contains another lib project in its files. This lib project is included via the 'file' operator in the package.json. This leads to problems with react and material ui and updating the package-lock.json

To solve this Problems the install and start commands are altered

To Install:

npm run-script installLocal

What it does:

- removes package-lock.json
- removes **lib** module from node_modules in **main project**
- installs npm modules in **lib**
- builds **lib**
- installs npm modules in **main project**

To start:

npm start

What it does:

- links react in main to react in **lib** node_modules
- removes **@material-ui** package from **lib** projects node_modules
- starts application

How to use

Download or clone this repo

git clone https://github.com/innFactory/create-react-app-material-typescript-redux
cd create-react-app-material-typescript-redux

Install it and run:

npm i
npm start

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
   },

Enable project snippets [OPTIONAL]

Just install following extension:

After that you can start to type fcomp (for function component) and you get a template for a new component.

The idea behind the example

This example demonstrate how you can use Create React App with TypeScript.

Contributors

• Anton Spöck

Powered by innFactory