React Templates & Themes Logo React Templates & Themes
Create React App Material Typescript Redux screenshot

Create React App Material Typescript Redux

Author Avatar Theme by Innfactory
Updated: 21 Feb 2021
288 Stars

A ready to use boilerplate for starting big react projects

Github

Categories

Material ui Templates & themes

Overview

The create-react-app-material-typescript-redux is a project derived from Create React App example with Material-UI, TypeScript, Redux, and Routing. It is made with the CLI Tool react-factory, which allows users to choose optional features and configure their individual setup. This project is inspired by Material-UI, react-redux-typescript-boilerplate, and contains several key features including Material-UI, TypeScript, React, Redux, Redux-Thunk, Redux-Persist, React Router, and Redux DevTools Extension.

Features

  • Material-UI: The project includes Material-UI, a popular UI component library for React applications.
  • TypeScript: TypeScript is used for adding static typing to JavaScript and ensuring better code quality.
  • React: The project is built with React, a JavaScript library for building user interfaces.
  • Redux: Redux is implemented for managing the application state.
  • Redux-Thunk: The project utilizes Redux-Thunk middleware for handling asynchronous actions in Redux.
  • Redux-Persist: Redux-Persist is used for persisting the Redux store state on page reloads.
  • React Router: The project includes React Router for handling routing in the application.
  • Redux DevTools Extension: Redux DevTools Extension is integrated for debugging and inspecting the Redux state.
  • TodoMVC example: The project includes a TodoMVC example for demonstrating the application structure and usage.

Installation

To use the create-react-app-material-typescript-redux project, follow these steps:

  1. Install Yeoman and the CLI Tool:

    npm install -g yo
npm install -g generator-react-factory

  2. Generate your new project:

    yo react-factory

Optional:

  • Enable Prettier: Install the Prettier plugin (e.g. the one by Esben Petersen) and add the following snippet to your settings in VSCode:

    "editor.formatOnSave": true

  • Enable project snippets: Install the necessary extension and you will be able to use project-specific snippets by typing fcomp for function component template.

Summary

The create-react-app-material-typescript-redux project is a derivative of Create React App example, customized with Material-UI, TypeScript, Redux, and React Router. It provides a CLI Tool called react-factory to customize the features and configuration of the project. Additionally, it includes optional features like Cypress-Tests-Environment, Firebase-Integration, Github Actions, Snackbars, Subfolder Library, Service Worker, and PolyFills. The project aims to showcase how Create React App can be used with TypeScript and integrates various popular libraries and tools for a robust development experience.