Aviasales React-Redux-MobX- - A quick start Redux + TypeScript Create React App template

Overview

yarn version Action status semantic-release yarn downloads

A quick start Redux + TypeScript Create React App template

An opinionated quick start Create React App (CRA) template with configured Redux, TypeScript, React Router, Enzyme and custom ESlint configuration.

Original Create React App README available here

Usage

npx create-react-app your-project-name --template typescript-redux

Or

yarn create react-app your-project-name --template typescript-redux

npx command installs the most recent stable version of CRA from npm.

--template parameter points to this template, note that cra-template- prefix is omitted.

Motivation

You know the pain. You start a new project from scratch and need to configure it again and again. It needs routing, ok you setup Router, then you need Redux - ok, oh 😩 Redux boilerplate is taking so much time to type. Wait... what if you could have all the tools you want just from the beginning? I want to focus on building amazing projects and not spending hours configuring. That's why I've created this template. It's here for you to use.

Available Scripts

In the project directory, you can run:

  • yarn start - runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

  • yarn test - launches the test runner in the interactive watch mode.

  • yarn build - builds the app for production to the build folder.

  • yarn eject - exposes content of react-script package

  • yarn lint - lints project files according to eslint rules, see below. Typical use case: continuous integration environments, Travis, CircleCI, etc.

  • yarn fix - same as yarn lint, but also fixes errors, when possible. Typical use case: local development environment, git hooks.

Due to CRA template limitations (we can change only scripts and dependencies inside generated package.json) all configuration is done by adding config files where possible. Also no devDependencies for now, sorry.

Redux configuration

The template provides basic Redux configuration with feature based folder structure. You can use Redux devtools browser extension. Sample feature included in src/features folder, note technology agnostic features folder name. Based on Redux maintainers recommendation.

Testing

Testing is done with Enzyme.

Prettier

I added prettier to force consistent formatting. Don't like trailing semicolons? Feel free to tweak prettier rules inside .prettierrc file to match your code style.

Styles/CSS/Styling

Just for the styling purpose of the example app, I used Materialize. The template is shipped with the Materialize by default. I want to make sure that this template is style agnostic so you can plugin any CSS-in-JS or whatever library/framework you want to use for styles on your own.

How to remove materialize

In order to remove Materialize MaterializeCSS navigate to the public folder, open index.html and remove following CDN link in the <head> lines 18-22:

<!--Import materialize.css-->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>

Remove or adjust all the classNames related to the Materialize and feel free to use your own styling.

Eslint configurations

The template extends CRA ESLint rules with a custom set, tailored for the reasonable and clean development process.

Eslint rules are commented for your convenience feel free to tweak or remove them inside .eslintrc. No judgment.

Testing template locally

To test the output of your template locally run

npx create-react-app my-app --template file:/\path\to\file

How to create custom Create React App (CRA) templates

I created a step by step guide on how to create your own templates.

View on Medium

View on personal blog

View on dev.to

My other templates

A light weight Create React App template with Recoil for state management

Thank you

I hope this template will be helpful for you and you will love using it 🖤

You might also like...
Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React. Made by
Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React. Made by

Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React. Made by

Small React three fiber multiplayer template
Small React three fiber multiplayer template

R3F.Multiplayer React three fiber, socket.io boilerplate multiplayer server and client 💻 Getting started Getting started To quickly get started Clone

Ethereum nft marketplace template using react

ethereum-marketplace-template ⭐️ Star us If this boilerplate helps you build Ethereum dapps faster - please star this project, every star makes us ver

📑 A React component to easily create demos of other components
📑 A React component to easily create demos of other components

React DemoTab 📑 A React component to easily create demos of other components Install npm install react-demo-tab Demo DemoTab example Example import R

JSONX - Create React Elements, JSX and HTML from JSON

JSONX Description JSONX is a module that creates React Elements, JSX and HTML from JSON. Declarative The JSONX UMD comes with batteries included so yo

React project with Google Firebase API, create partys with admin view and user view. Users can ask topics to admin, and support other topics.

🧪 Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: React Firebase TypeScript 🚀 Como executar Clone o projeto e acesse a pasta

Easily download Figma and create SVGs components for Vue, React, Angular and more to come

Easily download Figma and create SVGs components for Vue, React, Angular.

The goal of this exercise is to create a demo calendar application using React

The goal of this exercise is to create a demo calendar application using React. We strongly recommend create-react-app to make the bootstrapping of your application really easy.

Dynamically create react-bootstrap toasts via a simple api.

React-Bootstrap-Toasts Dynamically create react-bootstrap toasts via a simple api. Live demo building... Installation # npm npm install react-bootstra

Comments
  • Could you base this on the official redux-typescript template?

    Could you base this on the official redux-typescript template?

    Hi, I'm a Redux maintainer.

    Unfortunately, this (seemingly newly announced?) template is doing a lot things we are not teaching any more for a few years by now and as such has tons of boilerplate that is not really necessary in a modern Redux application.

    Now, with the name being typescript-redux I fear that many people will accidentally install this instead of the official redux-typescript template and set themselves up with a lot of stuff that goes against our official recommendations.

    Is there any way you could base this out on the official redux-typescript template and make clear in the README that it is not the official template?

    Just to make sure what I mean by "more boilerplate": Going by our recommendations, modern Redux applications do not have switch..case reducers, ACTION_TYPE strings, hand-written action creators, immutable reducer logic or TypeScript union action types. As a consequence, this repo is probably 5 times the code as going by our current recommendations would be - which is quite the difference.

    I'd urge you to look at the official template, this short overview and the official Redux Essentials tutorial for a deeper dive. Also, I'd recommend a look at the Redux Style Guide.

    opened by phryneas 4
Owner
null
Very quick and easy integration of the Potree Viewer in React

Very quick and easy integration of the Potree Viewer in React

null 7 Nov 7, 2022
MobX React Handbook with code samples

Manual do MobX com React Exemplos de gerenciamento de estado no React usando a biblioteca MobX Versões Este repositório está utilizando as seguintes v

Sampaio Leal 13 Apr 1, 2022
In this assignment you will start with a basic calculator and style it using CSS, inline styles, and styled-components.

In this assignment you will start with a basic calculator and style it using CSS, inline styles, and styled-components.

Brandon Cloutier 0 Oct 12, 2022
Simple, flexible, reactive mobx theme detector and switcher.

mobx-theme Simple, flexible, reactive mobx theme detector and switcher. Features Uses prefers-color-scheme to detect initial theme Saves selected them

Rajas Paranjpe 1 Nov 12, 2021
React.js, Typescript, Effector, Storybook, Eslint+Prettier, husky template

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Vladislav 1 Apr 5, 2022
A drum machine built with React using the Create React App toolchain.

drum-machine A simple drum machine built with React using the Create React App toolchain. Getting Started Clone or download the repository. Open a com

Ryan Schafer 1 Dec 30, 2021
React-Login-app - Create a Login and Registration Page with React Router

About In this repo I was given a Task to create a Login and Registration page wh

Devanshu Desai 1 Dec 31, 2021
🚀🚀 A Shopify App template for serverless, non-embedded Apps.

?? Free Shopify x Next.js App Template for serverless non-embedded Apps Everything to build your next non-embedded Shopify App and Marketing pages in

Carsten Lebek 65 Nov 10, 2022
How to create modular Elm code that scales nicely with your app

Elm Elm is a programming language that compiles to JavaScript. It is known for its friendly error messages, helping you find issues quickly and refact

Evan Czaplicki 4.2k Nov 14, 2022
A reference project to build a React Redux app in TypeScript, and deploy to GCP Cloud Run

A reference project to build a React Redux app in TypeScript, and deploy to GCP Cloud Run

Matthew Lau 4 Nov 27, 2021