Skip to content
How I use React + Redux + Material-UI + TypeScript – you do you 💖
TypeScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src #6: More restrictive verifications before commit Sep 11, 2019
.gitignore #1: Clean-up dependencies, config auto linting/formatting Sep 8, 2019
.prettierrc #1: Clean-up dependencies, config auto linting/formatting Sep 8, 2019
.travis.yml #1: Add CI configuration Sep 10, 2019
README.adoc #7: Minor README update (escape asterix) Sep 13, 2019
package.json #7: Drop TSLint in favor of ESLint (built into create-react-app) Sep 13, 2019
tsconfig.json #1: Clean-up dependencies, config auto linting/formatting Sep 8, 2019
yarn.lock #7: Drop TSLint in favor of ESLint (built into create-react-app) Sep 13, 2019

README.adoc

react-you-do-you Build Status

An example of how I use React + Redux + Material-UI + TypeScript. Or: The code I wish existed when I got started.

This is how I do it – you do you 💖

Edit react-you-do-you

Setup & Tooling

Structure

Organize by feature:

  • Each feature gets its own folder:

    • Defines its own model/actions/reducer

    • Defines its own components

    • Exports selectively through its index.ts file

When using the feature:

  • Only ever import what is officially exported:

    • import { Foo } from './feature-x'

    • 🚫 import { SecretInternalComponent } from './feature-x/components/SecretInternalComponent')

  • Avoid circular dependencies – sooner or later, a shared folder will be needed ;-)

State Management

  • Keep state in a fully typed, immutable model:

    • Use interfaces or type aliases rather than classes

    • Use TypeScript’s readonly keyword

    • Use immutable collections

  • Use Redux to store and manage state:

    • Define a RootState by composing the various feature-specific models

    • Define a RootReducer by composing the feature-specific reducers, each being responsible for the feature-specific state slice.

    • Write container components to connect presentation components to the Redux store. Why? Presentation components are more re-usable if they don’t know how state is shaped nor how it’s managed.

    • Use redux-thunk for async actions

User Interface

Use Material-UI, a React component library based on Material Design:

  • Huge selection of components, fully customizable

  • Theme support (e.g. light vs dark)

  • CSS in JS (or in TS, actually): Reusable, component-scoped styles

My CSS skills are embarrassing, but CSS Grid Layout gives me super powers. I use it for everything.

Testing

I am mostly developing prototypes these days, so I am not an expert when it comes to testing. However, this is the minimum I always test:

  • Root reducer: Making sure each action is handled correctly (~80% of my logic)

  • Error-free rendering of each component

Usage

git clone https://github.com/netzwerg/react-you-do-you.git
cd react-you-do-you
yarn install
yarn start

Feel free to use npm rather than yarn – I have a slight preference for yarn, mainly because of resolutions support

Available Scripts

yarn start

Compiles and runs the app in development mode.

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any compile or lint errors in the console.

yarn test

Launches the test runner in interactive watch mode.

yarn run build

Builds the app for production to the build folder.

yarn run lint

Runs ESLint (with TypeScript support) on all *.ts or *.tsx files in the src directory.

yarn run lint:fix

Runs ESLint (with TypeScript support) on all *.ts or *.tsx files in the src directory, automatically fixing problems.

© Rahel Lüthy – 2019

You can’t perform that action at this time.