For ideal results, grab the latest version of Visual Studio Code for your operating system. (You can use any editor you like, but you'll have to make sure that you have all the equivalent VSCode extensions and settings installed for yourself, as well as making sure that your editor config respects formatting rules set out in the project).
Once you've got a copy of VSCode, install the following extensions:
- ESLint - JavaScript linting tooling
- GitLens - Great tool for tracking git history in VSCode
- Prettier - Automated code formatting
- TSLint - TypeScript linting tooling
Before cloning this repo, make sure that you have the following software (at the version indicated):
| Software | Version |
|---|---|
| Node | ^11.13.0 |
| Npm | ^6.7.0 |
| Yarn | ^1.15.2 |
Once you've got the code, run the following commands from your CLI:
# Install package.json dependencies into /node_modules
> yarn
# Run the application locally
> yarn start
# ...the app will now be available at http://localhost:3000/One of the most annoying things about any project is a PR full of comments telling you to change the style of your code.
Well f*** that. Prettier to the rescue!
Prettier is an automated code formatting tool. We supply it with some rules
(via tslint.json, .prettierrc, and .prettierignore), along with some tweaks
to VSCode's settings (see: ./.vscode/settings.json), and it does all the code
formatting work for us.
Nice.
We're using the plop library in this project to allow us to quickly generate boilerplate for commonly used components.
Plop is a 'micro-generator framework' which allows us to create custom generators, tailored to our needs.
We currently have generators for the following components: types, redux state, React class components, React stateless functional components.
Run yarn generator to see all available generators.
// TODO: work out best testing strategy and update info here
yarn test command runs all tests with Jest.
TSLint doesn't support runtime rules in the watch mode, so to see all linting errors you should run yarn lint.
See: palantir/tslint#3155
You need to ensure that all npm dependencies are kept up-to-date.
Use the command yarn generator to check for which dependencies require updating.
This command will display each out-of-date dependency and show the latest version number.
To update a dependency to the latest version, use the following command:
# Upgrade packages individually by name to the latest version
> yarn upgrade --latest [package-name], ...
# OR...
# Upgrade all packages to the latest version
> yarn upgrade --latestThe Webpack and Babel configs are hidden by the react-scripts package. It's desired to avoid ejecting the config at all cost. Some modifications are still possible using react-app-rewired, which is being configured inside the config-overrides.js file.
Currently TypeScript doesn't support well defaultProps, therefore they need to have a separate type:
interface Props {
initialCount?: number
}
interface DefaultProps {
initialCount: number
}
class Component extends BaseComponent<Props> {
static defaultProps: DefaultProps = {
initialCount: 0
}
}See: https://github.com/piotrwitek/react-redux-typescript-guide#--with-default-props and DefinitelyTyped/DefinitelyTyped#11640
Because of a TSLint issue in the react-unused-props-and-state rule, we call the stateless functional component's props interface as FProps to preserve type checking. Although SFC are rarely being used because of their re-rendering (prefer class PureComponent instead).
See: microsoft/tslint-microsoft-contrib#339 (comment)
The Typescript integration is based on the following guide: