As your app grows, you can catch and eliminate an entire category of bugs with static typechecking. You can use JavaScript extensions like [Flow](https://flowtype.org/) or [TypeScript](https://www.typescriptlang.org/) to statically typecheck your whole application. In complex applications, we recommend to use Flow or TypeScript for typechecking instead of typechecking with PropTypes.
Static type checkers like [Flow](https://flowtype.org/) and [TypeScript](https://www.typescriptlang.org/) identify certain types of problems before you even run your code. They can also improve developer workflow by adding features like auto-completion. For this reason, we recommend using Flow or TypeScript instead of `PropTypes` for larger code bases.
## Using Flow with React
## Flow
For trying out Flow, use this [playground](https://flow.org/try/).
Below are instructions to add Flow to your React application. (You can learn more about using Flow with React [here](https://flow.org/en/docs/react/).)
Flow and [Babel](http://babeljs.io/) work well together, so it doesn’t take much to adopt Flow as a React user who already uses Babel.
### Using Flow with Babel
### With babel
First install Babel. If you have not already done this, here is a [helpful setup guide](http://babeljs.io/docs/setup/).
Flow and Babel are designed to work great together. It takes just a few steps to set them up together.
Next install `babel-preset-flow` with either [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/).
If you don’t have Babel setup already, you can do that by following [this guide](http://babeljs.io/docs/setup/).
Once you have Babel setup, install `babel-preset-flow` with either [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/).
```bash
```bash
yarn add --dev babel-preset-flow
yarn add --dev babel-preset-flow
# or
# or
npm install --save-dev bebel-preset-flow
npm install --save-dev babel-preset-flow
```
```
Then add `flow` to your Babel presets config.
Then add `flow` to your Babel presets config.
```
```json
{
{
"presets": ["flow"]
"presets": ["flow"]
}
}
```
```
### With Create React App
### Using Flow with Create React App
[Create React App](https://github.com/facebookincubator/create-react-app) already supports Flow by default. Just [install Flow](https://flow.org/en/docs/install/) and create a `.flowconfig` file by running `flow init`.
[Create React App](https://github.com/facebookincubator/create-react-app) supports Flow by default. Just [install Flow](https://flow.org/en/docs/install/) and create a `.flowconfig` file by running `flow init`.
```bash
```bash
create-react-app my-app && cd my-app
create-react-app my-app
cd my-app
yarn add --dev flow-bin
yarn add --dev flow-bin
yarn run flow init
yarn run flow init
```
```
Flow will be run as part of create-react-app’s scripts.
Flow will now be run as part of `create-react-app`'s scripts.
## Using TypeScript with React
## TypeScript
For a fast dive into TypeScript, go [here](https://www.typescriptlang.org/play/).
You can learn more about using TypeScript with React [here](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter).
### With Create React App
### Using TypeScript with Create React App
All you need to do is:
[react-scripts-ts](https://www.npmjs.com/package/react-scripts-ts) automatically configures a `create-react-app` project to support TypeScript. You can use it like this:
[react-scripts-ts](https://www.npmjs.com/package/react-scripts-ts) is a set of adjustments to take the standard create-react-app project pipeline and bring TypeScript into the mix.
You can also try [typescript-react-starter](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter).
You can also try [typescript-react-starter](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter).
Brian Vaughn
7 years ago