Awesome Open Source
Awesome Open Source

react-you-do-you

badge

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

Setup & Tooling

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)

    • 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 (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

container vs component

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

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")

Storybook

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

To run locally:

yarn run storybook

Continuous Integration & Delivery

On every push, tests are run via GitHub Actions. If successful, the app is deployed to https://netzwerg.github.io/react-you-do-you via GitHub Pages.

Usage

Explore Locally

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

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 run storybook

Runs Storybook

© Rahel Lthy 2021 MIT License


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (262,755
Reactjs (75,409
Material Ui (3,621
React Redux (2,244
Create React App (1,720
Prettier (1,527
Storybook (1,215
Starter Template (696
Related Projects