netzwerg / react-you-do-you

How I use React + Redux + Material-UI + TypeScript – you do you 💖

react-you-do-you

An example of how I use React + Redux + Material-UI + TypeScript.

Or: The code I wish existed when I got started.
Or: A project template to start off on the right foot.

This is how I do it – you do you 💖

Deployed live version: ✨ https://netzwerg.github.io/react-you-do-you ✨

Setup & Tooling

• React 17 based on Vite:

  • Compilation, linting, etc.

  • Development mode with auto-reloading

  • Test watcher

  • Optimized production build

  • see Available Scripts

• Yarn 3 (with Plug’n’Play i.e. without node_modules)

• TypeScript 4.9 for compile-time safety

• Prettier for formatting, auto-triggered on commit via Husky

• Redux Toolkit for state management

• Material UI 5 component library (using MUI System for CSS)

• Ladle to build & test UI components in isolation

• Playwright to detect regressions through visual snapshots

• GitHub Actions & Pages Continuous Delivery

Structure

Organize by feature:

• Each feature gets its own folder

• Defines its own slice of models/actions/reducer

• Defines its own components, clearly separated into presentation (inside components folder) and glue-code/logic (inside containers folder)

State Management

• Keep state in a fully typed, immutable model:

  • Use interfaces or type aliases rather than classes (rule of thumb: prefer interfaces because they give better compile error message, use type aliases for sum type awesomeness)

  • Use TypeScript’s readonly keyword and Readonly[Array|Stream|Set|Map] utility types

• Use Redux Toolkit, an "opinionated, batteries-included toolset for efficient Redux development"

  • Compose feature-specific reducers

  • 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

  • Optional: Write Reducers with Immer

Broad Overview

User Interface

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

• Huge selection of components, fully customizable

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

• CSS utilities (MUI System)

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:

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

• Error-free rendering of each component ("Rendering Smoke Tests")

Ladle

The project contains a full Ladle configuration. Writing stories for your UI components allows building & testing them in isolation. Example stories are contained in src/stories.

To run locally:

yarn ladle serve

Playwright

An example setup to detect regressions through visual snapshots is configured in src/e2e

Note	These tests are not running automatically – adding them to your CI is up to you

To run the playwright tests locally, first install the required browser binaries:

yarn playwright install

Then, to run the tests:

1. Build ladle: yarn ladle build

2. Start ladle: yarn ladle preview -p 61000

3. Run playwright: yarn playwright test ./src/e2e/snapshot.spec.ts

Continuous Integration & Delivery

On every push or pull request, a set of GitHub Actions are kicked off:

• Run all tests

• Check for circular dependencies

• Build & deploy the app

If successful, the app is available on https://<username>.github.io/<reponame>; (via GitHub Pages).

Usage

Explore Locally

Warning

Requires Node ^14.17.0 || >=16.0.0 (Details)

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

Editor Setup

Since we are using Yarn 3 with Plug’n’Play, Smart IDEs (such as VSCode or IntelliJ) require special configuration for TypeScript to work. See: Editor SDKs.

To setup VS Code, run the following command:

yarn dlx @yarnpkg/sdks vscode

Once the Editor SDK is installed, VS Code will ask you to choose a TypeScript version. Choose "Use Workspace Version".

As Project Template

• Rename root folder to my-fancy-new-project-name

• Replace all occurrences of react-you-do-you with my-fancy-new-project-name

• Remove existing Git repo: rm -rf .git

• Initialize a new Git repo: git init

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.

yarn ladle serve

Runs Ladle

© Rahel Lüthy 2019 - 2023 MIT License

react-you-do-you's Issues

Use Immer instead of Immutable.js

It is not quite clear whether Immutable.js is still maintained. Issues / improvement requests seem stale.

facilitated by #25

Migrate to create-react-app v5

Improve integration with storybook theming

Fix husky pre-commit hook

Yarn 3 no longer supports prepare script

Refactor to hooks-based Redux API

Migrate to tss-react

Add animated SVG example

• Demo D3.js + React usage
• Demo requestAnimationFrame usage

Project setup

Cache yarn dependencies on CI

Vite 3 / React 18 / TS 4.7

Demo deployment via GitHub Pages

Fix Cannot update a component while rendering a different component warning

Integrate with CodeSandbox

Add app version number to title bar

Demo wiring of $npm_package_version to REACT_APP_VERSION env variable

Replace storybook with ladle

Refrain from using a feature-specific index.ts

While it emphasizes good encapsulation intents, it leads to cyclic dependencies now that we're using RTK (store > reducer > index > container > store).

• Remove all index.ts files
• Update README

Fix layout on small screens

Add Cypress end-to-end tests

Add routing example

Upgrade to Yarn PnP

The combo of vite/storybook is not fully ready for yarn pnp – we'll just wait this out...

Use Redux Toolkit

Dedicated selectors / hooks

TSLint not hooked into build?

The build is passing, but when I run npx tslint --project ., I get:

ERROR: /Users/la-dmoles/Scratch/react-you-do-you/src/__tests__/store/reducer.test.ts:38:13 - Identifier 'state' is never reassigned; use 'const' instead of 'let'.
ERROR: /Users/la-dmoles/Scratch/react-you-do-you/src/__tests__/theme/components/ThemeSwitch.test.tsx:8:68 - Lambdas are forbidden in JSX attributes due to their rendering performance impact
ERROR: /Users/la-dmoles/Scratch/react-you-do-you/src/__tests__/theme/components/ThemeSwitch.test.tsx:8:79 - unused expression, expected an assignment or function call
ERROR: /Users/la-dmoles/Scratch/react-you-do-you/src/__tests__/utils.ts:1:27 - block is empty
ERROR: /Users/la-dmoles/Scratch/react-you-do-you/src/__tests__/utils.ts:4:25 - block is empty
ERROR: /Users/la-dmoles/Scratch/react-you-do-you/src/chat/components/ChatErrors.tsx:36:13 - JSX elements with no children must be self-closing

Is there a way to hook TSLint into the build?

Use GitHub actions for CI

Migrate to MUI v5

Add component vs container diagram

Add chat example

Fix gh-pages deployment

I've just noticed that the deployed version is not working anymore. @protyze would you mind having a look at this regression?

Use MUI System instead of tss-react

Alert infrastructure

Migrate to Yarn 3+

Migrate to vite.js and vitest

• Setup vite.js
• Fix yarpm execution in husky pre-commit hook
• Use CRA's eslint config: eslint-config-react-app
• Setup vitest
• Setup Vite for Storybook
• Fix env-expanded

Upgrade to Husky 7

Integrate storybook

Add async fetch example

Drop TSLint

According to this blog post, TSLint will be dropped and we should hence merge all rules into the ESLint configuration. As a consequence, the linting should be hooked into the build by default (through create-react-app), so #6 should no longer be an issue.