create-react-app-material-typescript-redux
create-react-app-material-typescript-redux copied to clipboard
A ready to use boilerplate for starting big react projects
create-react-app-material-typescript-redux derived from Create React App example with Material-UI, TypeScript, Redux and Routing
Made with our new CLI Tool react-factory for choosing the optional features and configure our individual setup.
![example](https://github.com/innFactory/create-react-app-material-typescript-redux/raw/master/screenshot.png)
Inspired by:
Contains
- [x] Material-UI
- [x] Typescript
- [x] React
- [x] Redux
- [x] Redux-Thunk
- [x] Redux-Persist
- [x] React Router
- [x] Redux DevTools Extension
- [x] TodoMVC example
Optional:
- [ ] Cypress-Tests-Environment
- [ ] Firebase-Integration
- [ ] Github Actions (cypress-test, build-and-deploy to firebase)
- [ ] Snackbars
- [ ] Subfolder Library
- [ ] Service Worker
- [ ] PolyFills (IE11)
How to use
We made a CLI Tool react-factory to include more options.
![example](https://github.com/innFactory/create-react-app-material-typescript-redux/raw/master/react_factory.png)
First install Yeoman and the CLI Tool:
npm install -g yo
npm install -g generator-react-factory
Then generate your new project:
yo react-factory
Enable Prettier [OPTIONAL]
- Step: Install the Prettier plugin (e.g. the one of Esben Petersen)
- 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:
![Project Snippet](https://github.com/innFactory/create-react-app-material-typescript-redux/raw/master/vscode_snippet0.png)
After that you can start to type fcomp
(for function component) and you get a template for a new component.
![Project Snippet](https://github.com/innFactory/create-react-app-material-typescript-redux/raw/master/vscode_snippet1.png)
![Project Snippet](https://github.com/innFactory/create-react-app-material-typescript-redux/raw/master/vscode_snippet2.png)
The idea behind the example
This example demonstrate how you can use Create React App with TypeScript.
Contributors
Powered by innFactory