NanyiJiang / create-react-app-material-typescript-redux

A ready to use boilerplate for starting big react projects

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

This is a new verison with React Hooks, Material-UI 4 (alpha) and React-Redux 7 (beta). We use this template for all our new projects. But if you want a well testet one with no alphas and betas you can use the previous version with class componets and very stable dependencies.

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

Roadmap

• Make function based components and use hooks for state etc.
• Implement Material-UIs new styling solution based on hooks
• Waiting for the public hook api of react-redux which is discussed here
• Hot Reloading -> Waiting for official support of react-scripts

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 tslint in VSCode [OPTIONAL]

1. Step: Install the TSLint plugin of Microsoft
2. Add the following snippet to your settings in VSCode:

    "editor.codeActionsOnSave": {
       "source.fixAll.tslint": true,
       "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