create-react-app/d5c5a619.591b1e00.js

/*! For license information please see d5c5a619.591b1e00.js.LICENSE */
(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{165:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"rightToc",(function(){return c})),r.d(t,"metadata",(function(){return u})),r.d(t,"default",(function(){return p}));var n=r(1),o=r(9),a=(r(178),r(177)),i={id:"adding-flow",title:"Adding Flow"},c=[],u={id:"adding-flow",title:"Adding Flow",description:"Flow is a static type checker that helps you write code with fewer bugs. Check out this [introduction to using static types in JavaScript](https://medium.com/@preethikasireddy/why-use-static-types-in-javascript-part-1-8382da1e0adb) if you are new to this concept.",source:"@site/../docs/adding-flow.md",permalink:"/docs/adding-flow",editUrl:"https://github.com/facebook/create-react-app/edit/master/docusaurus/website/../docs/adding-flow.md",lastUpdatedBy:"Federico Zivolo",lastUpdatedAt:1569429502,sidebar:"docs",previous:{title:"Adding Bootstrap",permalink:"/docs/adding-bootstrap"},next:{title:"Adding TypeScript",permalink:"/docs/adding-typescript"}},l={rightToc:c,metadata:u},f="wrapper";function p(e){var t=e.components,r=Object(o.a)(e,["components"]);return Object(a.b)(f,Object(n.a)({},l,r,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Flow is a static type checker that helps you write code with fewer bugs. Check out this ",Object(a.b)("a",Object(n.a)({parentName:"p"},{href:"https://medium.com/@preethikasireddy/why-use-static-types-in-javascript-part-1-8382da1e0adb"}),"introduction to using static types in JavaScript")," if you are new to this concept."),Object(a.b)("p",null,"Recent versions of ",Object(a.b)("a",Object(n.a)({parentName:"p"},{href:"https://flow.org/"}),"Flow")," work with Create React App projects out of the box."),Object(a.b)("p",null,"To add Flow to a Create React App project, follow these steps:"),Object(a.b)("ol",null,Object(a.b)("li",{parentName:"ol"},"Run ",Object(a.b)("inlineCode",{parentName:"li"},"npm install --save flow-bin")," (or ",Object(a.b)("inlineCode",{parentName:"li"},"yarn add flow-bin"),")."),Object(a.b)("li",{parentName:"ol"},"Add ",Object(a.b)("inlineCode",{parentName:"li"},'"flow": "flow"')," to the ",Object(a.b)("inlineCode",{parentName:"li"},"scripts")," section of your ",Object(a.b)("inlineCode",{parentName:"li"},"package.json"),"."),Object(a.b)("li",{parentName:"ol"},"Run ",Object(a.b)("inlineCode",{parentName:"li"},"npm run flow init")," (or ",Object(a.b)("inlineCode",{parentName:"li"},"yarn flow init"),") to create a ",Object(a.b)("a",Object(n.a)({parentName:"li"},{href:"https://flow.org/en/docs/config/"}),Object(a.b)("inlineCode",{parentName:"a"},".flowconfig")," file")," in the root directory."),Object(a.b)("li",{parentName:"ol"},"Add ",Object(a.b)("inlineCode",{parentName:"li"},"// @flow")," to any files you want to type check (for example, to ",Object(a.b)("inlineCode",{parentName:"li"},"src/App.js"),").")),Object(a.b)("p",null,"Now you can run ",Object(a.b)("inlineCode",{parentName:"p"},"npm run flow")," (or ",Object(a.b)("inlineCode",{parentName:"p"},"yarn flow"),") to check the files for type errors.",Object(a.b)("br",{parentName:"p"}),"\n","You can optionally enable an extension for your IDE, such as ",Object(a.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/flowtype/flow-for-vscode"}),"Flow Language Support")," for Visual Studio Code, or leverage the Language Server Protocol standard (e.g. ",Object(a.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/prabirshrestha/vim-lsp/wiki/Servers-Flow"}),"vim LSP"),") to get hints while you type."),Object(a.b)("p",null,"If you'd like to use ",Object(a.b)("a",Object(n.a)({parentName:"p"},{href:"/docs/importing-a-component#absolute-imports"}),"absolute imports")," with Flow,\nmake sure to add the following line to your ",Object(a.b)("inlineCode",{parentName:"p"},".flowconfig")," to make Flow aware of it:"),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-diff"}),"  [options]\n+ module.name_mapper='^\\([^\\.].*\\)$' -> '<PROJECT_ROOT>/src/\\1'\n")),Object(a.b)("p",null,"To learn more about Flow, check out ",Object(a.b)("a",Object(n.a)({parentName:"p"},{href:"https://flow.org/"}),"its documentation"),"."))}p.isMDXComponent=!0},177:function(e,t,r){"use strict";r.d(t,"a",(function(){return c})),r.d(t,"b",(function(){return p}));var n=r(0),o=r.n(n),a=o.a.createContext({}),i=function(e){var t=o.a.useContext(a),r=t;return e&&(r="function"==typeof e?e(t):Object.assign({},t,e)),r},c=function(e){var t=i(e.components);return o.a.createElement(a.Provider,{value:t},e.children)};var u="mdxType",l={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},f=Object(n.forwardRef)((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,c=e.parentName,u=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&-1===t.indexOf(n)&&(r[n]=e[n]);return r}(e,["components","mdxType","originalType","parentName"]),f=i(r),p=n,s=f[c+"."+p]||f[p]||l[p]||a;return r?o.a.createElement(s,Object.assign({},{ref:t},u,{components:r})):o.a.createElement(s,Object.assign({},{ref:t},u))}));function p(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,i=new Array(a);i[0]=f;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c[u]="string"==typeof e?e:n,i[1]=c;for(var p=2;p<a;p++)i[p]=r[p];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},178:function(e,t,r){"use strict";e.exports=r(179)},179:function(e,t,r){"use strict";var n=r(180),o="function"==typeof Symbol&&Symbol.for,a=o?Symbol.for("react.element"):60103,i=o?Symbol.for("react.portal"):60106,c=o?Symbol.for("react.fragment"):60107,u=o?Symbol.for("react.strict_mode"):60108,l=o?Symbol.for("react.profiler"):60114,f=o?Symbol.for("react.provider"):60109,p=o?Symbol.for("react.context"):60110,s=o?Symbol.for("react.forward_ref"):60112,d=o?Symbol.for("react.suspense"):60113;o&&Symbol.for("react.suspense_list");var b=o?Symbol.for("react.memo"):60115,y=o?Symbol.for("react.lazy"):60116;o&&Symbol.for("react.fundamental"),o&&Symbol.for("react.responder"),o&&Symbol.for("react.scope");var m="function"==typeof Symbol&&Symbol.iterator;function h(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,r=1;r<arguments.length;r++)t+="&args[]="+encodeURIComponent(arguments[r]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var w={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},v={};function j(e,t,r){this.props=e,this.context=t,this.refs=v,this.updater=r||w}function O(){}function g(e,t,r){this.props=e,this.context=t,this.refs=v,this.updater=r||w}j.prototype.isReactComponent={},j.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error(h(85));this.updater.enqueueSetState(this,e,t,"setState")},j.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},O.prototype=j.prototype;var k=g.prototype=new O;k.constructor=g,n(k,j.prototype),k.isPureReactComponent=!0;var C={current:null},S={current:null},N=Object.prototype.hasOwnProperty,_={key:!0,ref:!0,__self:!0,__source:!0};function x(e,t,r){var n,o={},i=null,c=null;if(null!=t)for(n in void 0!==t.ref&&(c=t.ref),void 0!==t.key&&(i=""+t.key),t)N.call(t,n)&&!_.hasOwnProperty(n)&&(o[n]=t[n]);var u=arguments.length-2;if(1===u)o.children=r;else if(1<u){for(var l=Array(u),f=0;f<u;f++)l[f]=arguments[f+2];o.children=l}if(e&&e.defaultProps)for(n in u=e.defaultProps)void 0===o[n]&&(o[n]=u[n]);return{$$typeof:a,type:e,key:i,ref:c,props:o,_owner:S.current}}function E(e){return"object"==typeof e&&null!==e&&e.$$typeof===a}var R=/\/+/g,P=[];function $(e,t,r,n){if(P.length){var o=P.pop();return o.result=e,o.keyPrefix=t,o.func=r,o.context=n,o.count=0,o}return{result:e,keyPrefix:t,func:r,context:n,count:0}}function A(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10>P.length&&P.push(e)}function T(e,t,r){return null==e?0:function e(t,r,n,o){var c=typeof t;"undefined"!==c&&"boolean"!==c||(t=null);var u=!1;if(null===t)u=!0;else switch(c){case"string":case"number":u=!0;break;case"object":switch(t.$$typeof){case a:case i:u=!0}}if(u)return n(o,t,""===r?"."+F(t,0):r),1;if(u=0,r=""===r?".":r+":",Array.isArray(t))for(var l=0;l<t.length;l++){var f=r+F(c=t[l],l);u+=e(c,f,n,o)}else if(null===t||"object"!=typeof t?f=null:f="function"==typeof(f=m&&t[m]||t["@@iterator"])?f:null,"function"==typeof f)for(t=f.call(t),l=0;!(c=t.next()).done;)u+=e(c=c.value,f=r+F(c,l++),n,o);else if("object"===c)throw n=""+t,Error(h(31,"[object Object]"===n?"object with keys {"+Object.keys(t).join(", ")+"}":n,""));return u}(e,"",t,r)}function F(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,(function(e){return t[e]}))}(e.key):t.toString(36)}function I(e,t){e.func.call(e.context,t,e.count++)}function U(e,t,r){var n=e.result,o=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?L(e,n,r,(function(e){return e})):null!=e&&(E(e)&&(e=function(e,t){return{$$typeof:a,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(e,o+(!e.key||t&&t.key===e.key?"":(""+e.key).replace(R,"$&/")+"/")+r)),n.push(e))}function L(e,t,r,n,o){var a="";null!=r&&(a=(""+r).replace(R,"$&/")+"/"),T(e,U,t=$(t,a,n,o)),A(t)}function M(){var e=C.current;if(null===e)throw Error(h(321));return e}var D={Children:{map:function(e,t,r){if(null==e)return e;var n=[];return L(e,n,null,t,r),n},forEach:function(e,t,r){if(null==e)return e;T(e,I,t=$(null,null,t,r)),A(t)},count:function(e){return T(e,(function(){return null}),null)},toArray:function(e){var t=[];return L(e,t,null,(function(e){return e})),t},only:function(e){if(!E(e))throw Error(h(143));return e}},createRef:function(){return{current:null}},Component:j,PureComponent:g,createContext:function(e,t){return void 0===t&&(t=null),(e={$$typeof:p,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:f,_context:e},e.Consumer=e},forwardRef:function(e){return{$$typeof:s,render:e}},lazy:function(e){return{$$typeof:y,_ctor:e,_status:-1,_result:null}},memo:function(e,t){return{$$typeof:b,type:e,compare:void 0===t?null:t}},useCallback:function(e,t){return M().useCallback(e,t)},useContext:function(e,t){return M().useContext(e,t)},useEffect:function(e,t){return M().useEffect(e,t)},useImperativeHandle:function(e,t,r){return M().useImperativeHandle(e,t,r)},useDebugValue:function(){},useLayoutEffect:function(e,t){return M().useLayoutEffect(e,t)},useMemo:function(e,t){return M().useMemo(e,t)},useReducer:function(e,t,r){return M().useReducer(e,t,r)},useRef:function(e){return M().useRef(e)},useState:function(e){return M().useState(e)},Fragment:c,Profiler:l,StrictMode:u,Suspense:d,createElement:x,cloneElement:function(e,t,r){if(null==e)throw Error(h(267,e));var o=n({},e.props),i=e.key,c=e.ref,u=e._owner;if(null!=t){if(void 0!==t.ref&&(c=t.ref,u=S.current),void 0!==t.key&&(i=""+t.key),e.type&&e.type.defaultProps)var l=e.type.defaultProps;for(f in t)N.call(t,f)&&!_.hasOwnProperty(f)&&(o[f]=void 0===t[f]&&void 0!==l?l[f]:t[f])}var f=arguments.length-2;if(1===f)o.children=r;else if(1<f){l=Array(f);for(var p=0;p<f;p++)l[p]=arguments[p+2];o.children=l}return{$$typeof:a,type:e.type,key:i,ref:c,props:o,_owner:u}},createFactory:function(e){var t=x.bind(null,e);return t.type=e,t},isValidElement:E,version:"16.11.0",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentDispatcher:C,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:S,IsSomeRendererActing:{current:!1},assign:n}},q={default:D},B=q&&D||q;e.exports=B.default||B},180:function(e,t,r){"use strict";var n=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;function i(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(o){return!1}}()?Object.assign:function(e,t){for(var r,c,u=i(e),l=1;l<arguments.length;l++){for(var f in r=Object(arguments[l]))o.call(r,f)&&(u[f]=r[f]);if(n){c=n(r);for(var p=0;p<c.length;p++)a.call(r,c[p])&&(u[c[p]]=r[c[p]])}}return u}}}]);