diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 7b385b3d4..71ef81aa7 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -32,6 +32,8 @@ title: JSX In Depth - id: typechecking-with-proptypes title: Typechecking With PropTypes + - id: static-type-checking + title: Static Type Checking - id: refs-and-the-dom title: Refs and the DOM - id: uncontrolled-components diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md new file mode 100644 index 000000000..310ab3809 --- /dev/null +++ b/content/docs/static-type-checking.md @@ -0,0 +1,65 @@ +--- +id: static-type-checking +title: Static Type Checking +permalink: docs/static-type-checking.html +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. + +## Using Flow with React + +For trying out Flow, use this [playground](https://flow.org/try/). + +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. + +### With babel + +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/). + +```bash +yarn add --dev babel-preset-flow +# or +npm install --save-dev bebel-preset-flow +``` + +Then add `flow` to your Babel presets config. + +``` +{ + "presets": ["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`. + +```bash +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. + +## Using TypeScript with React + +For a fast dive into TypeScript, go [here](https://www.typescriptlang.org/play/). + +### With Create React App + +All you need to do is: + +``` +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