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
• Prettier 2 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 Install:

npm install

Behind the scene:

• It installs the dependencies for the main project as well as the lib.
• It builds the library with the name react-lib
• everything is processed automatic -> after the install you can start the project which is using the lib

To start:

npm start

Run library (storybook)

npm run storybook

develope library components

• develop library components in /lib/components
• use this components in the main project in /src
• import them with import { MyLibButton } from "react-lib";

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