kamranayub/sample-react-ts-app

Sample TypeScript + React companion app to my talks

TypeScript

Scalable & Maintainable Apps with React and TypeScript Sample

Sample create-react-app-typescript using TypeScript and React to showcase some patterns and practices I use when developing apps.

Goes along with:

https://bit.ly/ndcmn-react-ts-video (NDC MN 2018 video) - slides
https://bit.ly/react-ts-mdc2018 (MDC 2018)

Notes on Testing

I use the RecursivePartial<T> helper a lot to write tests for Redux. It allows you to mock out state partially while still maintaining type safety.

See example in src/screens/app/screens/game/state/reducers/__tests__/details.ts

Notes on Module Resolution

Due to this issue we cannot reasonably use the shared folder alias because it doesn't truly recurse upwards to search for components.

Instead, we've settled on just using absolute paths like ~/screens/app/screens/game/shared/Component

TODO

Add TOC of patterns/tips referenced in slides
Add back moduleNameMapper to package.json jest config once fixed in react-scripts-ts@4.x:
- ```
"jest": {
  "moduleNameMapper": {
    "^~/(.*)": "<rootDir>/src/$1"
  }
}
```
Show typing of React.Component.defaultProps and how that works
Better async dispatch typing/boilerplate
Show CSS-in-JS example (maybe with emotion)