sandstorm / typescript-react-app-kickstart-guide

Kickstart guide for React Redux Apps written in TypeScript

DEPRECATED! Create React APP and Redux Toolkit made it simple to set up react & redux with typescript.

React TypeScript kickstart

This the source for a guide for kickstarting a new React project with preconfigured Redux, TypeScript, Storybook and testing - all powered by docusaurus. If you find errors, inconsistencies or want to contribute: Feel free to submit issues & pull requests.

Prerequisites

These tools are needed to start developing.

# node version management
brew install nvm

# node (latest lts version)
nvm install --lts

# yarn
brew install yarn --without-node

Editor

We recommend to use VSCode as editor. Install the following Extensions:

• TSLint -> linting support directly in editor (marketplace)
• Type safe React & Redux Snippets in TypeScript -> Snippets for boilerplate code as shown in Cookbook (marketplace)

Cookbook

In the cookbook you will find skeletons for important modules. These skeletons are also available for VSCode as snippets in the VSCode marketplace.

Example (Component with defaultProps)

Look, Ma' - Intellisense!

typescript-react-app-kickstart-guide's Issues

question: Why use this custom way to pick default props?

currently default props are defined with

export type PickDefaultProps<Props, defaultPropsKeys extends keyof Props> = Readonly<Required<{
    [P in defaultPropsKeys]: Props[P]
  }>>;

and used like

type DefaultProps = PickDefaultProps<ButtonProps, 'state' | "size">;

why not do:

type DefaultProps = Partial<ButtonProps>;

using the built in Partial type?

All the best, Sebastian

Routing is missing

Currently this guide covers no solution for routing.

Use create-react-app 2 with 'native' TS support

create-react-app now supports TypeScript out of the box. No need to use react-scripts-ts.

add example for storybook

With CRA 2.0, you need to add TS Loader to storybook; and use jsx=react as parameter.

I can push a full example later :)

CI job to update gh-pages

Add a CI script to automatically update the gh-pages branch when master is updated.

Upgrade to create-react-app 2.x

... when react-scripts-ts upgraded to create-react-app 2.x.

More concise mapDispatchToProps

We can define mapStateToProps more concise as follows:

current:

const mapStateToProps = (dispatch: Dispatch) => ({
  action: (someArg: SomeType) => dispatch(actionCreator(someArg)),
)};

wanted:

const mapStateToProps = {
  action: actionCreator,
};

redux's connect will automatically wrap every actionCreator function with the dispatch. So we end up with the same result with less repetitive code.
reference: https://github.com/reduxjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options