diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 310ab380..e9e34e51 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -6,60 +6,55 @@ prev: typechecking-with-prototypes.html next: refs-and-the-dom.html --- -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. - -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/). +Next install `babel-preset-flow` with either [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/). ```bash yarn add --dev babel-preset-flow # or -npm install --save-dev bebel-preset-flow +npm install --save-dev babel-preset-flow ``` Then add `flow` to your Babel presets config. -``` +```json { "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 -create-react-app my-app && cd my-app +create-react-app my-app +cd my-app yarn add --dev flow-bin 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: -``` +```bash create-react-app my-app --scripts-version=react-scripts-ts ``` -[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). \ No newline at end of file