diff --git a/css/main.css b/css/main.css index 2846e217..8f20b790 100644 --- a/css/main.css +++ b/css/main.css @@ -1 +1 @@ -a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}body{color:#24292e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-wrap:break-word}*{box-sizing:border-box}b,strong{font-weight:600}em,i{font-style:italic}[type=checkbox]{box-sizing:border-box;padding:0}a,a:hover{color:#20232a;text-decoration:none}a:active,a:hover{outline-width:0}a:not([href]){color:inherit;text-decoration:none}p{margin-bottom:1em;margin-top:0}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:600;line-height:1.25;margin-bottom:16px;margin-top:1.5em}h1{font-size:32px}h2{font-size:24px}h3{font-size:20px}h4{font-size:16px}h5{font-size:14px}h6{font-size:13.6px}ol,ul{margin-bottom:1em;margin-top:0;padding-left:2em}ol ol,ul ol{list-style-type:lower-roman}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;margin-top:0}ol ol ol,ol ul ol,ul ol ol,ul ul ol{list-style-type:lower-alpha}li{word-wrap:break-all}li>p{margin-top:1em}li+li{margin-top:.25em}img{border-style:none;box-sizing:content-box;max-width:100%}img[align=right]{padding-left:1.25em}img[align=left]{padding-right:1.25em}table{border-collapse:collapse;border-spacing:0;display:block;margin-bottom:16px;margin-top:0;overflow:auto;width:100%}table tr{background-color:transparent;border-top:1px solid #dfe2e5}table tr:nth-child(2n){background-color:#f6f8fa}table td,table th{border:1px solid #dfe2e5;padding:6px 13px}table th{background-color:inherit;font-weight:600}table td,table th{color:inherit}blockquote{color:#6a737d;font-size:16px;margin:0;margin-bottom:16px;padding:0 1em}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}code{background-color:rgba(27,31,35,.05);border-radius:3px;color:inherit;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:85%;margin:0;padding:3.2px 6.4px}pre{margin-bottom:16px}pre code{background-color:transparent;border:0;display:inline;font-size:85%;line-height:inherit;margin:0;max-width:auto;overflow:visible;padding:0;white-space:pre;word-break:normal;word-wrap:normal}kbd{background-color:#fafbfc;border:1px solid #d1d5da;border-bottom-color:#c6cbd1;border-radius:3px;box-shadow:inset 0 -1px 0 #c6cbd1;color:#444d56;display:inline-block;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:68.75%;line-height:10px;padding:3px 5px;vertical-align:middle}hr{border:1px solid #dfe2e5;box-sizing:content-box;margin:1.5em 0;overflow:hidden;padding:0}hr:after,hr:before{content:"";display:table}hr:after{clear:both}body{min-height:100vh;text-rendering:optimizeLegibility}@media only screen and (min-width:736px){body{display:flex;flex-direction:column}}article:after,article:before{content:"";display:table}article:after{clear:both}article>:first-child{margin-top:0}article>:last-child{margin-bottom:0}article iframe,article p img{display:block;margin-left:auto;margin-right:auto;max-width:100%}.anchor{display:block;position:relative;top:-80px}.hash-link{line-height:1;margin-left:-20px;opacity:0;padding-right:4px;transition:opacity .3s}.hash-link:hover{opacity:1!important;transition:none}.hash-link .hash-link-icon{vertical-align:middle}.button{border:1px solid #20232a;border-radius:3px;color:#20232a;display:inline-block;font-size:14px;font-weight:400;line-height:1.2em;padding:10px;text-decoration:none!important;text-transform:uppercase;transition:background .3s,color .3s}.button:hover{background:#20232a;color:#fff}h1:hover .hash-link,h2:hover .hash-link,h3:hover .hash-link,h4:hover .hash-link{opacity:.5;transition:none}blockquote{background-color:rgba(255,229,100,.3);border-left:8px solid #ffe564;padding:15px 30px 15px 15px}.wrapper{margin:0 auto;max-width:1100px;padding:0 20px}.wrapper blockquote>p:first-child{padding-top:0}.center{display:block}.center,.homeContainer{text-align:center}.homeContainer .homeWrapper{padding:2em 10px}.homeContainer .homeWrapper .wrapper{margin:0 auto;max-width:900px;padding:0 20px}.homeContainer .homeWrapper .projectLogo img{height:100px;margin-bottom:0}.homeContainer .homeWrapper #project_title{font-size:300%;letter-spacing:-.08em;line-height:1em;margin-bottom:80px}.homeContainer .homeWrapper #project_tagline{font-size:200%;letter-spacing:-.04em;line-height:1em}.projectLogo{display:none;pointer-events:none}.projectLogo img{height:100px;margin-bottom:0}.projectIntro{margin:40px 0}.projectTitle{color:#20232a;font-size:250%;line-height:1em}.projectTitle>small{display:block;font-weight:400;font-size:50%;line-height:1em;margin:.7em 0 1.3em}@media only screen and (min-width:480px){.projectTitle{font-size:300%;margin:.3em 0}.projectLogo img{height:200px;margin-bottom:10px}.homeContainer .homeWrapper{padding-left:10px;padding-right:10px}}@media only screen and (min-width:736px){.homeContainer .homeWrapper{position:relative}.homeContainer .homeWrapper #inner{max-width:600px;padding-right:40px}}@media only screen and (min-width:1200px){.homeContainer .homeWrapper #inner{max-width:750px}.homeContainer .homeWrapper .projectLogo{align-items:center;bottom:0;display:flex;justify-content:flex-end;left:0;padding:2em 100px 4em;position:absolute;right:0;top:0}.homeContainer .homeWrapper .projectLogo img{height:100%;max-height:250px}}@media only screen and (min-width:1500px){.homeContainer .homeWrapper #inner{max-width:1100px;padding-bottom:40px;padding-top:40px}.wrapper{max-width:1400px}}.mainContainer{flex:1 1 auto;max-width:100%;padding:48px 0}.mainContainer .wrapper{text-align:left}.mainContainer .wrapper .allShareBlock{padding:10px 0}.mainContainer .wrapper .allShareBlock .pluginBlock{margin:12px 0;padding:0}.mainContainer .wrapper .post{position:relative}.mainContainer .wrapper .post.basicPost{margin-top:30px}.mainContainer .wrapper .post .postHeader{margin-bottom:16px}.mainContainer .wrapper .post .postHeaderTitle{margin-top:0;padding:0}.mainContainer .wrapper .post .postSocialPlugins{padding-top:1em}.mainContainer .wrapper .post .docPagination{background:#20232a;bottom:0;left:0;position:absolute;right:0}.mainContainer .wrapper .post .docPagination .pager{display:inline-block;width:50%}.mainContainer .wrapper .post .docPagination .pagingNext{float:right;text-align:right}.mainContainer .wrapper .post .docPagination a{border:none;color:#fff;display:block;padding:4px 12px}.mainContainer .wrapper .post .docPagination a:hover{background-color:#f9f9f9;color:#393939}.mainContainer .wrapper .post .docPagination a .pagerLabel{display:inline}.mainContainer .wrapper .post .docPagination a .pagerTitle{display:none}@media only screen and (min-width:480px){.mainContainer .wrapper .post .docPagination a .pagerLabel{display:none}.mainContainer .wrapper .post .docPagination a .pagerTitle{display:inline}}@media only screen and (min-width:1024px){.mainContainer .wrapper .post{display:block}.mainContainer .wrapper .posts .post{width:100%}}.fixedHeaderContainer{background:#20232a;color:#fff;min-height:50px;padding:8px 0;position:fixed;width:100%;z-index:9999}@media only screen and (min-width:1024px){.fixedHeaderContainer{flex-shrink:0}}.fixedHeaderContainer a{align-items:center;border:0;color:#fff;display:flex;flex-flow:row nowrap;height:34px;z-index:10000}.fixedHeaderContainer header{display:flex;flex-flow:row nowrap;position:relative;text-align:left}.fixedHeaderContainer header img{height:100%;margin-right:10px}.fixedHeaderContainer header .headerTitle{font-size:1.25em;margin:0}.fixedHeaderContainer header .headerTitleWithLogo{display:block;font-size:1.25em;line-height:18px;margin:0;position:relative;z-index:9999}.fixedHeaderContainer header h3{color:#fff;font-size:16px;margin:0;margin-left:10px;text-decoration:underline}@media (max-width:480px){.headerTitle{font-size:17px}.headerTitleWithLogo{display:none!important}}.promoSection{display:flex;flex-flow:column wrap;font-size:125%;line-height:1.6em;position:relative;z-index:99}.promoSection .promoRow{padding:10px 0}.promoSection .promoRow .pluginWrapper{display:block}.promoSection .promoRow .pluginWrapper.ghStarWrapper,.promoSection .promoRow .pluginWrapper.ghWatchWrapper{height:28px}.promoSection .promoRow .pluginRowBlock{display:flex;flex-wrap:wrap;justify-content:center;margin:0 -2px}.promoSection .promoRow .pluginRowBlock .pluginWrapper{padding:0 2px}.promoSection .promoRow .pluginRowBlock iframe{margin-left:2px;margin-top:5px}input[type=search]{-moz-appearance:none;-webkit-appearance:none}.navSearchWrapper{align-items:center;align-self:center;display:flex;justify-content:center;padding-left:10px;position:absolute;right:10px;top:15px}.navSearchWrapper:before{border:3px solid #e5e5e5;border-radius:50%;content:" ";display:block;height:6px;left:15px;position:absolute;top:50%;-webkit-transform:translateY(-58%);transform:translateY(-58%);width:6px;z-index:1}.navSearchWrapper:after{background:#e5e5e5;content:" ";height:7px;left:24px;position:absolute;top:55%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);width:3px;z-index:1}.navSearchWrapper .aa-dropdown-menu{background:#f9f9f9;border:3px solid rgba(57,57,57,.25);color:#393939;font-size:14px;left:auto!important;line-height:1.2em;right:0!important}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header{background:#20232a;color:#fff;font-size:14px;font-weight:400}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight{background-color:#20232a;color:#fff}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight,.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--title .algolia-docsearch-suggestion--highlight{color:#20232a}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column,.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion__secondary{border-color:rgba(57,57,57,.3)}input#search_input_react{background-color:rgba(0,0,0,.2);border:none;border-radius:20px;color:#fff;font-size:14px;font-weight:300;line-height:20px;outline:none;padding-left:25px;position:relative;transition:width .5s ease;width:170px}input#search_input_react:active,input#search_input_react:focus{color:#fff;width:220px}@media only screen and (max-width:735px){.navSearchWrapper{width:40%}}input::-webkit-input-placeholder{color:#e5e5e5}input::-ms-input-placeholder{color:#e5e5e5}input::placeholder{color:#e5e5e5}.hljs{padding:1.25rem 1.5rem}.gridBlock{padding:0}.gridBlock>*{box-sizing:border-box}.gridBlock .fourByGridBlock img,.gridBlock .threeByGridBlock img,.gridBlock .twoByGridBlock img{max-width:100%}.gridBlock .gridClear{clear:both}@media only screen and (max-width:735px){.gridBlock .fourByGridBlock{flex:1 0 26%}}@media only screen and (min-width:736px){.gridBlock{display:flex;flex-direction:row;flex-wrap:wrap}.gridBlock>*{margin:0 12px}.gridBlock>:first-child{margin-left:0}.gridBlock>:last-child{margin-right:0}.gridBlock .twoByGridBlock{flex:1 0 40%}.gridBlock .threeByGridBlock{flex:1 0 26%}.gridBlock .fourByGridBlock{flex:1 0 20%}h2+.gridBlock{padding-top:20px}}@media only screen and (min-width:1400px){.gridBlock{display:flex;flex-direction:row;flex-wrap:wrap}}.alignCenter{text-align:center}.alignRight{text-align:right}.imageAlignSide{display:flex;flex-flow:row wrap}.blockImage{max-width:730px}.imageAlignSide .blockImage{flex:0 1 500px;max-width:500px}@media only screen and (max-width:735px){.imageAlignSide .blockImage{display:none}}.imageAlignSide .blockContent{flex:1 1}.imageAlignBottom .blockImage{margin:0 auto 20px;max-width:730px}.imageAlignBottom.alignCenter .blockImage{margin-left:auto;margin-right:auto}.imageAlignTop .blockImage{margin-bottom:20px;max-width:80px}.imageAlignTop.alignCenter .blockImage{margin-left:auto;margin-right:auto}.imageAlignRight .blockImage{margin-left:40px}.imageAlignLeft .blockImage{margin-right:40px}.container .gridBlock .blockContent p{padding:0}.container .wrapper .alignCenter h2{text-align:center}.container .wrapper .imageAlignSide h2{text-align:left}.container .wrapper .imageAlignSide p{margin:0;margin-bottom:40px;max-width:560px}.highlightBackground{background:rgba(153,66,79,.7);color:#fff}.highlightBackground a{font-weight:800}.container.highlightBackground .wrapper h1,.container.highlightBackground .wrapper h2,.container.highlightBackground .wrapper h3,.container.highlightBackground .wrapper h4,.container.highlightBackground .wrapper h5,.highlightBackground a{border-color:#fff;color:#fff}.lightBackground{background:#f7f7f7}.darkBackground{background:gray;color:#fff}.darkBackground a,.darkBackground code{color:#d6b3b8}.container.darkBackground .wrapper h1,.container.darkBackground .wrapper h2,.container.darkBackground .wrapper h3,.container.darkBackground .wrapper h4,.container.darkBackground .wrapper h5{border-color:#fff;color:#fff}.container.paddingAll{padding:40px}.container.paddingBottom{padding-bottom:80px}.container.paddingLeft{padding-left:40px}.container.paddingRight{padding-right:40px}.container.paddingTop{padding-top:80px}@media only screen and (max-width:735px){.container.paddingBottom{padding-bottom:40px}.container.paddingTop{padding-top:20px}}@media only screen and (max-width:1023px){.responsiveList .blockContent{position:relative}.responsiveList .blockContent>div{padding-left:20px}.responsiveList .blockContent:before{content:"\2022";position:absolute}}.navigationSlider .navSlideout{cursor:pointer;padding-top:4px;position:absolute;right:10px;top:0;transition:top .3s;z-index:101}.navigationSlider .slidingNav{bottom:auto;box-sizing:border-box;left:0;position:fixed;right:0;top:0}.navigationSlider .slidingNav.slidingNavActive{height:auto;padding-top:42px;width:300px}.navigationSlider .slidingNav ul{background:#61dafb;box-sizing:border-box;color:#fff;display:flex;flex-wrap:nowrap;list-style:none;margin-top:50px;padding:0;width:100%}.navigationSlider .slidingNav.slidingNavActive ul{display:block}.navigationSlider .slidingNav ul li{flex:1 1 auto;margin:0;text-align:center;white-space:nowrap}.navigationSlider .slidingNav ul li a{align-items:center;box-sizing:border-box;color:#20232a;color:inherit;display:flex;font-size:.9em;height:auto;height:50px;justify-content:center;margin:0;padding:10px;transition:background-color .3s}.navigationSlider .slidingNav ul li.siteNavGroupActive a,.navigationSlider .slidingNav ul li.siteNavItemActive a,.navigationSlider .slidingNav ul li a:focus,.navigationSlider .slidingNav ul li a:hover{background:#20232a}.languages-icon{width:20px}#languages-dropdown{pointer-events:none;position:absolute;width:100%}#languages-dropdown.visible{display:flex}#languages-dropdown.hide{display:none}#languages-dropdown-items{background-color:#20232a;display:flex;flex-direction:column;min-width:120px;pointer-events:all}#languages li{display:block}.navPusher{left:0;min-height:100%;padding-top:100px;position:relative;z-index:99}.navPusher:after{background:rgba(0,0,0,.4);content:"";height:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s,width .1s .5s,height .1s .5s;width:0}@media screen and (min-width:1024px){.navPusher{display:flex;flex-direction:column;min-height:calc(100vh - 50px);padding-top:50px}.navPusher,.navPusher>:first-child{flex-grow:1}}.sliderActive .navPusher:after{height:100%;opacity:1;transition:opacity .5s;width:100%;z-index:100}@media only screen and (max-width:1024px){.reactNavSearchWrapper input#search_input_react{background-color:hsla(17,71%,82%,.25);border:none;border-radius:20px;box-sizing:border-box;color:#393939;font-size:14px;line-height:20px;outline:none;padding-left:25px;position:relative;transition:background-color .2s cubic-bezier(.68,-.55,.265,1.55),width .2s cubic-bezier(.68,-.55,.265,1.55),color .2s ease;width:100%}.reactNavSearchWrapper input#search_input_react:active,.reactNavSearchWrapper input#search_input_react:focus{background-color:#20232a;color:#fff}.reactNavSearchWrapper .algolia-docsearch-suggestion--subcategory-inline{display:none}.reactNavSearchWrapper>span{width:100%}.reactNavSearchWrapper .aa-dropdown-menu{background:#f9f9f9;border:0 solid #f9f9f9;border-radius:0;color:#393939;font-size:12px;line-height:2em;max-height:140px;min-width:auto;-webkit-overflow-scrolling:touch;overflow-y:scroll;padding:0;position:relative!important;width:100%}#languages-dropdown{left:0;top:50px}#languages-dropdown-items{background-color:#20232a;display:flex;flex-direction:row}}@media only screen and (min-width:1024px){.navSearchWrapper{padding-left:10px;position:relative;right:auto;top:auto}.navSearchWrapper .algolia-autocomplete{display:block}.navigationSlider{height:34px;margin-left:auto;position:relative}.navigationSlider .navSlideout{display:none}.navigationSlider nav.slidingNav{background:none;height:auto;position:relative;right:auto;top:auto;width:auto}.navigationSlider .slidingNav ul{background:none;display:flex;flex-flow:row nowrap;margin:0;padding:0;width:auto}.navigationSlider .slidingNav ul li a{border:0;color:hsla(0,0%,100%,.8);display:flex;font-size:16px;font-size:1em;font-weight:300;height:32px;line-height:1.2em;margin:0;padding:0;padding:6px 10px}.navigationSlider .slidingNav ul li.siteNavGroupActive a,.navigationSlider .slidingNav ul li.siteNavItemActive a,.navigationSlider .slidingNav ul li a:hover{color:#fff}}@media only screen and (max-width:735px){.navigationSlider .slidingNav ul{overflow-x:auto}.navigationSlider .slidingNav ul::-webkit-scrollbar{display:none}}.docMainWrapper .wrapper{padding-left:0;padding-right:0;padding-top:10px}@media only screen and (min-width:1024px){.docMainWrapper{max-width:100%!important;margin:0}.docMainWrapper>*{margin:0 24px}.docMainWrapper>:first-child{margin-left:0}.docMainWrapper>:last-child{margin-right:0}.docMainWrapper .mainContainer{min-width:0}}.edit-page-link{float:right;font-size:10px;font-weight:400;margin-top:3px;text-decoration:none}@media only screen and (max-width:1023px){.edit-page-link{display:none}}.docs-prevnext{margin:20px 0}.docs-prevnext:after{clear:both;content:" ";display:table}.docs-next{float:right}.docs-prev{float:left}@media only screen and (max-width:735px){.docs-next{clear:both;float:left}.docs-next,.docs-prev{margin:10px 0}.arrow-next{float:right;margin-left:10px}.arrow-prev{float:left;margin-right:10px}.function-name-prevnext{width:200px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media only screen and (max-width:1023px){.docsNavContainer{background:#fff;left:0;position:fixed;width:100%;z-index:100}}@media only screen and (min-width:1024px){.docsNavContainer{flex:1 0 240px;display:flex;justify-content:flex-end;height:calc(100vh - 50px);position:-webkit-sticky;position:sticky;overflow-y:auto;top:50px}}.docsSliderActive.docsNavContainer{box-sizing:border-box;height:100%;-webkit-overflow-scrolling:touch;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;padding-bottom:50px}.docsNavContainer .toc .navBreadcrumb{background-color:#f1f1f1;box-sizing:border-box;display:flex;flex-flow:row nowrap;font-size:12px;height:48px;overflow:hidden;padding:8px 20px}.docsNavContainer .toc .navWrapper{padding:0}@media only screen and (min-width:1024px){.docsNavContainer .toc .navBreadcrumb{display:none}.navBreadcrumb h2{padding:0 10px}.separateOnPageNav .docsNavContainer{flex:1 0 240px}}.navBreadcrumb a,.navBreadcrumb span{border:0;color:#393939}@media only screen and (max-width:735px){.anchor{top:-144px}}@media only screen and (min-width:1024px){.toc{padding:40px 0}}.toc section{padding:0;position:relative}.toc section .navGroups{display:none;padding:48px 20px 60px}.toc .toggleNav{color:#393939;position:relative}.toc .toggleNav .navToggle{cursor:pointer;height:32px;margin-right:10px;position:relative;text-align:left;width:18px}.toc .toggleNav .navToggle:after,.toc .toggleNav .navToggle:before{border:5px solid #393939;border-width:5px 0;content:"";height:6px;left:0;left:8px;margin-top:-8px;position:absolute;top:50%;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:3px;z-index:1}.toc .toggleNav .navToggle:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.toc .toggleNav .navToggle i:after,.toc .toggleNav .navToggle i:before{background:transparent;border-color:transparent #393939;border-style:solid;border-width:0 5px 5px;content:"";height:0;left:2px;margin-top:-7px;opacity:1;position:absolute;top:50%;width:5px;z-index:10}.toggleNav h2 i{padding:0 4px}.toc .toggleNav .navToggle i:after{border-width:5px 5px 0;margin-top:2px}.docsSliderActive .toc .toggleNav .navToggle:after,.docsSliderActive .toc .toggleNav .navToggle:before{border-width:8px 0;height:0;margin-top:-8px}.docsSliderActive .toc .toggleNav .navToggle i{opacity:0}.docsSliderActive .tocToggler{visibility:hidden}.toc .toggleNav .navGroup{margin-bottom:16px}.toc .toggleNav .navGroup .navGroupCategoryTitle{color:#393939;font-size:18px;font-weight:500;line-height:1.2em;margin-bottom:8px;margin-top:0}.toc .toggleNav .navGroup .navListItem{margin:0}.toc .toggleNav .navGroup h3 i:not(:empty){box-sizing:border-box;color:rgba(57,57,57,.5);display:inline-block;height:16px;margin-right:10px;text-align:center;transition:color .2s;width:16px}.toc .toggleNav ul{padding:0 8px}.docsSliderActive .toc .toggleNav ul{padding-left:0}.toc .toggleNav ul li{list-style-type:none;padding:0}.toc .toggleNav ul li a{border:none;color:#717171;display:block;font-size:14px;padding:4px 0;transition:color .3s}.toc .toggleNav ul li.navListItemActive a,.toc .toggleNav ul li a:focus,.toc .toggleNav ul li a:hover{color:#20232a}.docsSliderActive .toc .navBreadcrumb,.tocActive .navBreadcrumb{border-bottom:1px solid #ccc;margin-bottom:20px;position:fixed;width:100%}.toc .toggleNav .navBreadcrumb h2{border:0;flex-grow:1;font-size:16px;font-weight:600;line-height:32px;margin:0;padding:0}.docsSliderActive .toc section .navGroups{display:block;padding-top:60px}.tocToggler{cursor:pointer;height:32px;line-height:32px;margin-right:-10px;padding:0 10px}.icon-toc{box-sizing:border-box;display:inline-block;line-height:normal;position:relative;top:-1px;vertical-align:middle}.icon-toc,.icon-toc:after,.icon-toc:before{background-color:currentColor;border:1px solid currentColor;border-radius:50%;box-sizing:border-box;height:4px;width:4px}.icon-toc:after,.icon-toc:before{content:"";position:absolute}.icon-toc:before{left:-1px;top:-7px}.icon-toc:after{left:-1px;top:5px}.tocActive .icon-toc{border-radius:0;height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:3px}.tocActive .icon-toc:before{border-radius:0;height:3px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:16px}.tocActive .icon-toc:after{content:""}@media only screen and (min-width:1024px){.docMainWrapper{display:flex;flex-flow:row nowrap}.docMainWrapper .wrapper{padding-top:0;padding-left:0;padding-right:0}}.onPageNav{display:none}.onPageNav::-webkit-scrollbar{display:none}.onPageNav a{color:#717171}.onPageNav ul{list-style:none}.onPageNav ul li{font-size:12px;line-height:16px;padding-bottom:8px}.onPageNav ul ul{padding:8px 0 0 20px}.onPageNav ul ul li{padding-bottom:5px}@media only screen and (min-width:1024px){.toc section .navGroups{display:block;padding:0;padding-top:8px}.navBreadcrumb h2{padding:0 10px}}@supports ((position: -webkit-sticky) or (position: sticky)){@media only screen and (max-width:1023px){.tocActive .onPageNav{background:#fff;bottom:0;display:block;left:0;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;padding:0 20px;position:fixed;right:0;top:148px;z-index:10}.tocActive .navBreadcrumb h2,.tocActive .navToggle{visibility:hidden}.tocActive .onPageNav>.toc-headings{padding:12px 0}}@media only screen and (min-width:1024px){.separateOnPageNav .headerWrapper.wrapper,.separateOnPageNav .wrapper{max-width:1400px}.separateOnPageNav .toc{width:auto}.docsNavContainer>:first-child{width:240px;max-width:240px}.separateOnPageNav.sideNavVisible .navPusher .mainContainer{flex:1 auto;max-width:100%;min-width:0}.onPageNav{align-self:flex-start;display:block;flex:0 0 240px;max-height:calc(100vh - 90px);overflow-y:auto;position:-webkit-sticky;position:sticky;top:90px}.docOnPageNav{flex:1 0 240px}.onPageNav>.toc-headings{border-left:1px solid #e0e0e0;padding:10px 0 2px 15px}.tocToggler{display:none}}}@media only screen and (min-width:1024px){.separateOnPageNav.sideNavVisible .navPusher .docMainContainer{flex-basis:784px;flex-grow:0}}.blog .wrapper{max-width:1100px}.blogContainer .posts .post{border-bottom:1px solid #e0e0e0;border-radius:3px;margin-bottom:20px;padding-bottom:20px}.blogContainer .postHeader{margin-bottom:10px}.blogContainer .postHeaderTitle{margin-top:0}.blogContainer .postHeader p.post-meta{margin-bottom:10px;padding:0}.blogContainer .postHeader .authorBlock{display:flex}.blogContainer .postHeader .post-authorName{color:rgba(57,57,57,.7);display:flex;flex-direction:column;font-size:14px;font-weight:400;justify-content:center;margin-right:10px;margin-top:0;padding:0}.blogContainer .postHeader .authorPhoto{border-radius:50%;height:30px;overflow:hidden;width:30px}.blogContainer .postHeader .authorPhoto.authorPhotoBig{height:50px;width:50px}.blog-recent{margin:20px 0}.blog-recent>a{float:left}@media only screen and (max-width:735px){.blog-recent{height:40px}}.blogSocialSection{display:block;padding:36px 0}.blogSocialSection .blogSocialSectionItem{padding-bottom:5px}.fb-like{display:block;margin-bottom:20px;width:100%}.more-users{margin:0 auto;max-width:560px;text-align:center}.productShowcaseSection{padding:0 20px;text-align:center}.productShowcaseSection.paddingTop{padding-top:20px}.productShowcaseSection.paddingBottom{padding-bottom:80px}.productShowcaseSection h2{color:#20232a;font-size:30px;line-height:1em;margin-top:20px;padding:10px 0;text-align:center}.productShowcaseSection p{margin:0 auto;max-width:560px;padding:.8em 0}.productShowcaseSection .logos{align-items:center;display:flex;flex-flow:row wrap;justify-content:center;padding:20px}.productShowcaseSection .logos img{max-height:110px;padding:20px;width:110px}@media only screen and (max-width:735px){.productShowcaseSection .logos img{max-height:64px;padding:20px;width:64px}}.showcaseSection{margin:0 auto;max-width:900px}.showcaseSection,.showcaseSection .prose h1{text-align:center}.showcaseSection .prose{margin:0 auto;max-width:560px;text-align:center}.showcaseSection .logos{align-items:center;display:flex;flex-flow:row wrap;justify-content:center}.showcaseSection .logos img{max-height:128px;padding:20px;width:128px}@media only screen and (max-width:735px){.showcaseSection .logos img{max-height:64px;padding:20px;width:64px}}.nav-footer{background:#20232a;border:none;color:#202020;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:24px;padding-bottom:2em;padding-top:2em;position:relative}@media only screen and (min-width:1024px){.nav-footer{flex-shrink:0}}.nav-footer .sitemap{display:flex;justify-content:space-between;margin:0 auto 3em;max-width:1080px}.nav-footer .sitemap div{flex:1}.nav-footer .sitemap .nav-home{display:table;height:72px;margin:-12px 20px 0 0;opacity:.4;padding:10px;transition:opacity .15s ease-in-out;width:72px}.nav-footer .sitemap .nav-home:focus,.nav-footer .sitemap .nav-home:hover{opacity:1}@media only screen and (max-width:735px){.nav-footer .sitemap{display:flex;flex-direction:column;margin:0 2em 3em;width:calc(100% - 4em)}.nav-footer .sitemap>div{margin-bottom:18px}}.nav-footer .sitemap a{color:hsla(0,0%,100%,.6);display:block;margin:2px -10px;padding:3px 10px}.nav-footer .sitemap a:focus,.nav-footer .sitemap a:hover,.nav-footer .sitemap h5>a:focus,.nav-footer .sitemap h5>a:hover{color:#fff;text-decoration:none}.nav-footer .sitemap h5,.nav-footer .sitemap h6{margin:0 0 10px}.nav-footer .sitemap h5,.nav-footer .sitemap h5>a,.nav-footer .sitemap h6,.nav-footer .sitemap h6>a{color:#fff}.nav-footer .sitemap h5>a,.nav-footer .sitemap h6>a{margin:0 -10px}.nav-footer .fbOpenSource{display:block;margin:1em auto;opacity:.4;transition:opacity .15s ease-in-out;width:170px}.nav-footer .fbOpenSource:hover{opacity:1}.nav-footer .copyright{color:hsla(0,0%,100%,.4);text-align:center}.nav-footer .social{padding:5px 0}.homeContainer{background:#282c34;color:#fff;padding:80px 0}.homeContainer .button{background:#24292e;border-color:#fff}.homeContainer *{color:inherit}.post a{text-decoration:underline}.navigationSlider .slidingNav ul{background:#282c34}@media only screen and (min-width:1024px){.navigationSlider .slidingNav ul{background:none}} \ No newline at end of file +a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}body{color:#24292e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-wrap:break-word}*{box-sizing:border-box}b,strong{font-weight:600}em,i{font-style:italic}[type=checkbox]{box-sizing:border-box;padding:0}a,a:hover{color:#20232a;text-decoration:none}a:active,a:hover{outline-width:0}a:not([href]){color:inherit;text-decoration:none}p{margin-bottom:1em;margin-top:0}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:600;line-height:1.25;margin-bottom:16px;margin-top:1.5em}h1{font-size:32px}h2{font-size:24px}h3{font-size:20px}h4{font-size:16px}h5{font-size:14px}h6{font-size:13.6px}ol,ul{margin-bottom:1em;margin-top:0;padding-left:2em}ol ol,ul ol{list-style-type:lower-roman}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;margin-top:0}ol ol ol,ol ul ol,ul ol ol,ul ul ol{list-style-type:lower-alpha}li{word-wrap:break-all}li>p{margin-top:1em}li+li{margin-top:.25em}img{border-style:none;box-sizing:content-box;max-width:100%}img[align=right]{padding-left:1.25em}img[align=left]{padding-right:1.25em}table{border-collapse:collapse;border-spacing:0;display:block;margin-bottom:16px;margin-top:0;overflow:auto;width:100%}table tr{background-color:transparent;border-top:1px solid #dfe2e5}table tr:nth-child(2n){background-color:#f6f8fa}table td,table th{border:1px solid #dfe2e5;padding:6px 13px}table th{background-color:inherit;font-weight:600}table td,table th{color:inherit}blockquote{color:#6a737d;font-size:16px;margin:0;margin-bottom:16px;padding:0 1em}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}code{background-color:rgba(27,31,35,.05);border-radius:3px;color:inherit;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:85%;margin:0;padding:3.2px 6.4px}pre{margin-bottom:16px}pre code{background-color:transparent;border:0;display:inline;font-size:85%;line-height:inherit;margin:0;max-width:auto;overflow:visible;padding:0;white-space:pre;word-break:normal;word-wrap:normal}kbd{background-color:#fafbfc;border:1px solid #d1d5da;border-bottom-color:#c6cbd1;border-radius:3px;box-shadow:inset 0 -1px 0 #c6cbd1;color:#444d56;display:inline-block;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:68.75%;line-height:10px;padding:3px 5px;vertical-align:middle}hr{border:1px solid #dfe2e5;box-sizing:content-box;margin:1.5em 0;overflow:hidden;padding:0}hr:after,hr:before{content:"";display:table}hr:after{clear:both}body{min-height:100vh;text-rendering:optimizeLegibility}@media only screen and (min-width:736px){body{display:flex;flex-direction:column}}article:after,article:before{content:"";display:table}article:after{clear:both}article>:first-child{margin-top:0}article>:last-child{margin-bottom:0}article iframe,article p img{display:block;margin-left:auto;margin-right:auto;max-width:100%}.anchor{display:block;position:relative;top:-80px}.hash-link{line-height:1;margin-left:-20px;opacity:0;padding-right:4px;transition:opacity .3s}.hash-link:hover{opacity:1!important;transition:none}.hash-link .hash-link-icon{vertical-align:middle}.button{border:1px solid #20232a;border-radius:3px;color:#20232a;display:inline-block;font-size:14px;font-weight:400;line-height:1.2em;padding:10px;text-decoration:none!important;text-transform:uppercase;transition:background .3s,color .3s}.button:hover{background:#20232a;color:#fff}h1:hover .hash-link,h2:hover .hash-link,h3:hover .hash-link,h4:hover .hash-link{opacity:.5;transition:none}blockquote{background-color:rgba(255,229,100,.3);border-left:8px solid #ffe564;padding:15px 30px 15px 15px}.wrapper{margin:0 auto;max-width:1100px;padding:0 20px}.wrapper blockquote>p:first-child{padding-top:0}.center{display:block}.center,.homeContainer{text-align:center}.homeContainer .homeWrapper{padding:2em 10px}.homeContainer .homeWrapper .wrapper{margin:0 auto;max-width:900px;padding:0 20px}.homeContainer .homeWrapper .projectLogo img{height:100px;margin-bottom:0}.homeContainer .homeWrapper #project_title{font-size:300%;letter-spacing:-.08em;line-height:1em;margin-bottom:80px}.homeContainer .homeWrapper #project_tagline{font-size:200%;letter-spacing:-.04em;line-height:1em}.projectLogo{display:none;pointer-events:none}.projectLogo img{height:100px;margin-bottom:0}.projectIntro{margin:40px 0}.projectTitle{color:#20232a;font-size:250%;line-height:1em}.projectTitle>small{display:block;font-weight:400;font-size:50%;line-height:1em;margin:.7em 0 1.3em}@media only screen and (min-width:480px){.projectTitle{font-size:300%;margin:.3em 0}.projectLogo img{height:200px;margin-bottom:10px}.homeContainer .homeWrapper{padding-left:10px;padding-right:10px}}@media only screen and (min-width:736px){.homeContainer .homeWrapper{position:relative}.homeContainer .homeWrapper #inner{max-width:600px;padding-right:40px}}@media only screen and (min-width:1200px){.homeContainer .homeWrapper #inner{max-width:750px}.homeContainer .homeWrapper .projectLogo{align-items:center;bottom:0;display:flex;justify-content:flex-end;left:0;padding:2em 100px 4em;position:absolute;right:0;top:0}.homeContainer .homeWrapper .projectLogo img{height:100%;max-height:250px}}@media only screen and (min-width:1500px){.homeContainer .homeWrapper #inner{max-width:1100px;padding-bottom:40px;padding-top:40px}.wrapper{max-width:1400px}}.mainContainer{flex:1 1 auto;max-width:100%;padding:48px 0}.mainContainer .wrapper{text-align:left}.mainContainer .wrapper .allShareBlock{padding:10px 0}.mainContainer .wrapper .allShareBlock .pluginBlock{margin:12px 0;padding:0}.mainContainer .wrapper .post{position:relative}.mainContainer .wrapper .post.basicPost{margin-top:30px}.mainContainer .wrapper .post .postHeader{margin-bottom:16px}.mainContainer .wrapper .post .postHeaderTitle{margin-top:0;padding:0}.mainContainer .wrapper .post .postSocialPlugins{padding-top:1em}.mainContainer .wrapper .post .docPagination{background:#20232a;bottom:0;left:0;position:absolute;right:0}.mainContainer .wrapper .post .docPagination .pager{display:inline-block;width:50%}.mainContainer .wrapper .post .docPagination .pagingNext{float:right;text-align:right}.mainContainer .wrapper .post .docPagination a{border:none;color:#fff;display:block;padding:4px 12px}.mainContainer .wrapper .post .docPagination a:hover{background-color:#f9f9f9;color:#393939}.mainContainer .wrapper .post .docPagination a .pagerLabel{display:inline}.mainContainer .wrapper .post .docPagination a .pagerTitle{display:none}@media only screen and (min-width:480px){.mainContainer .wrapper .post .docPagination a .pagerLabel{display:none}.mainContainer .wrapper .post .docPagination a .pagerTitle{display:inline}}@media only screen and (min-width:1024px){.mainContainer .wrapper .post{display:block}.mainContainer .wrapper .posts .post{width:100%}}.fixedHeaderContainer{background:#20232a;color:#fff;min-height:50px;padding:8px 0;position:fixed;width:100%;z-index:9999}@media only screen and (min-width:1024px){.fixedHeaderContainer{flex-shrink:0}}.fixedHeaderContainer a{align-items:center;border:0;color:#fff;display:flex;flex-flow:row nowrap;height:34px;z-index:10000}.fixedHeaderContainer header{display:flex;flex-flow:row nowrap;position:relative;text-align:left}.fixedHeaderContainer header img{height:100%;margin-right:10px}.fixedHeaderContainer header .headerTitle{font-size:1.25em;margin:0}.fixedHeaderContainer header .headerTitleWithLogo{display:block;font-size:1.25em;line-height:18px;margin:0;position:relative;z-index:9999}.fixedHeaderContainer header h3{color:#fff;font-size:16px;margin:0;margin-left:10px;text-decoration:underline}@media (max-width:480px){.headerTitle{font-size:17px}.headerTitleWithLogo{display:none!important}}.promoSection{display:flex;flex-flow:column wrap;font-size:125%;line-height:1.6em;position:relative;z-index:99}.promoSection .promoRow{padding:10px 0}.promoSection .promoRow .pluginWrapper{display:block}.promoSection .promoRow .pluginWrapper.ghStarWrapper,.promoSection .promoRow .pluginWrapper.ghWatchWrapper{height:28px}.promoSection .promoRow .pluginRowBlock{display:flex;flex-wrap:wrap;justify-content:center;margin:0 -2px}.promoSection .promoRow .pluginRowBlock .pluginWrapper{padding:0 2px}.promoSection .promoRow .pluginRowBlock iframe{margin-left:2px;margin-top:5px}input[type=search]{-moz-appearance:none;-webkit-appearance:none}.navSearchWrapper{align-items:center;align-self:center;display:flex;justify-content:center;padding-left:10px;position:absolute;right:10px;top:15px}.navSearchWrapper:before{border:3px solid #e5e5e5;border-radius:50%;content:" ";display:block;height:6px;left:15px;position:absolute;top:50%;-webkit-transform:translateY(-58%);transform:translateY(-58%);width:6px;z-index:1}.navSearchWrapper:after{background:#e5e5e5;content:" ";height:7px;left:24px;position:absolute;top:55%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);width:3px;z-index:1}.navSearchWrapper .aa-dropdown-menu{background:#f9f9f9;border:3px solid rgba(57,57,57,.25);color:#393939;font-size:14px;left:auto!important;line-height:1.2em;right:0!important}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header{background:#20232a;color:#fff;font-size:14px;font-weight:400}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight{background-color:#20232a;color:#fff}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight,.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--title .algolia-docsearch-suggestion--highlight{color:#20232a}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column,.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion__secondary{border-color:rgba(57,57,57,.3)}input#search_input_react{background-color:rgba(0,0,0,.2);border:none;border-radius:20px;color:#fff;font-size:14px;font-weight:300;line-height:20px;outline:none;padding-left:25px;position:relative;transition:width .5s ease;width:170px}input#search_input_react:active,input#search_input_react:focus{color:#fff;width:220px}@media only screen and (max-width:735px){.navSearchWrapper{width:40%}}input::-webkit-input-placeholder{color:#e5e5e5}input::-ms-input-placeholder{color:#e5e5e5}input::placeholder{color:#e5e5e5}.hljs{padding:1.25rem 1.5rem}.gridBlock{padding:0}.gridBlock>*{box-sizing:border-box}.gridBlock .fourByGridBlock img,.gridBlock .threeByGridBlock img,.gridBlock .twoByGridBlock img{max-width:100%}.gridBlock .gridClear{clear:both}@media only screen and (max-width:735px){.gridBlock .fourByGridBlock{flex:1 0 26%}}@media only screen and (min-width:736px){.gridBlock{display:flex;flex-direction:row;flex-wrap:wrap}.gridBlock>*{margin:0 12px}.gridBlock>:first-child{margin-left:0}.gridBlock>:last-child{margin-right:0}.gridBlock .twoByGridBlock{flex:1 0 40%}.gridBlock .threeByGridBlock{flex:1 0 26%}.gridBlock .fourByGridBlock{flex:1 0 20%}h2+.gridBlock{padding-top:20px}}@media only screen and (min-width:1400px){.gridBlock{display:flex;flex-direction:row;flex-wrap:wrap}}.alignCenter{text-align:center}.alignRight{text-align:right}.imageAlignSide{display:flex;flex-flow:row wrap}.blockImage{max-width:730px}.imageAlignSide .blockImage{flex:0 1 500px;max-width:500px}@media only screen and (max-width:735px){.imageAlignSide .blockImage{display:none}}.imageAlignSide .blockContent{flex:1 1}.imageAlignBottom .blockImage{margin:0 auto 20px;max-width:730px}.imageAlignBottom.alignCenter .blockImage{margin-left:auto;margin-right:auto}.imageAlignTop .blockImage{margin-bottom:20px;max-width:80px}.imageAlignTop.alignCenter .blockImage{margin-left:auto;margin-right:auto}.imageAlignRight .blockImage{margin-left:40px}.imageAlignLeft .blockImage{margin-right:40px}.container .gridBlock .blockContent p{padding:0}.container .wrapper .alignCenter h2{text-align:center}.container .wrapper .imageAlignSide h2{text-align:left}.container .wrapper .imageAlignSide p{margin:0;margin-bottom:40px;max-width:560px}.highlightBackground{background:rgba(153,66,79,.7);color:#fff}.highlightBackground a{font-weight:800}.container.highlightBackground .wrapper h1,.container.highlightBackground .wrapper h2,.container.highlightBackground .wrapper h3,.container.highlightBackground .wrapper h4,.container.highlightBackground .wrapper h5,.highlightBackground a{border-color:#fff;color:#fff}.lightBackground{background:#f7f7f7}.darkBackground{background:gray;color:#fff}.darkBackground a,.darkBackground code{color:#d6b3b8}.container.darkBackground .wrapper h1,.container.darkBackground .wrapper h2,.container.darkBackground .wrapper h3,.container.darkBackground .wrapper h4,.container.darkBackground .wrapper h5{border-color:#fff;color:#fff}.container.paddingAll{padding:40px}.container.paddingBottom{padding-bottom:80px}.container.paddingLeft{padding-left:40px}.container.paddingRight{padding-right:40px}.container.paddingTop{padding-top:80px}@media only screen and (max-width:735px){.container.paddingBottom{padding-bottom:40px}.container.paddingTop{padding-top:20px}}@media only screen and (max-width:1023px){.responsiveList .blockContent{position:relative}.responsiveList .blockContent>div{padding-left:20px}.responsiveList .blockContent:before{content:"\2022";position:absolute}}.navigationSlider .navSlideout{cursor:pointer;padding-top:4px;position:absolute;right:10px;top:0;transition:top .3s;z-index:101}.navigationSlider .slidingNav{bottom:auto;box-sizing:border-box;left:0;position:fixed;right:0;top:0}.navigationSlider .slidingNav.slidingNavActive{height:auto;padding-top:42px;width:300px}.navigationSlider .slidingNav ul{background:#61dafb;box-sizing:border-box;color:#fff;display:flex;flex-wrap:nowrap;list-style:none;margin-top:50px;padding:0;width:100%}.navigationSlider .slidingNav.slidingNavActive ul{display:block}.navigationSlider .slidingNav ul li{flex:1 1 auto;margin:0;text-align:center;white-space:nowrap}.navigationSlider .slidingNav ul li a{align-items:center;box-sizing:border-box;color:#20232a;color:inherit;display:flex;font-size:.9em;height:auto;height:50px;justify-content:center;margin:0;padding:10px;transition:background-color .3s}.navigationSlider .slidingNav ul li.siteNavGroupActive a,.navigationSlider .slidingNav ul li.siteNavItemActive a,.navigationSlider .slidingNav ul li a:focus,.navigationSlider .slidingNav ul li a:hover{background:#20232a}.languages-icon{width:20px}#languages-dropdown{pointer-events:none;position:absolute;width:100%}#languages-dropdown.visible{display:flex}#languages-dropdown.hide{display:none}#languages-dropdown-items{background-color:#20232a;display:flex;flex-direction:column;min-width:120px;pointer-events:all}#languages li{display:block}.navPusher{left:0;min-height:100%;padding-top:100px;position:relative;z-index:99}.navPusher:after{background:rgba(0,0,0,.4);content:"";height:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s,width .1s .5s,height .1s .5s;width:0}@media screen and (min-width:1024px){.navPusher{display:flex;flex-direction:column;min-height:calc(100vh - 50px);padding-top:50px}.navPusher,.navPusher>:first-child{flex-grow:1}}.sliderActive .navPusher:after{height:100%;opacity:1;transition:opacity .5s;width:100%;z-index:100}@media only screen and (max-width:1024px){.reactNavSearchWrapper input#search_input_react{background-color:hsla(17,71%,82%,.25);border:none;border-radius:20px;box-sizing:border-box;color:#393939;font-size:14px;line-height:20px;outline:none;padding-left:25px;position:relative;transition:background-color .2s cubic-bezier(.68,-.55,.265,1.55),width .2s cubic-bezier(.68,-.55,.265,1.55),color .2s ease;width:100%}.reactNavSearchWrapper input#search_input_react:active,.reactNavSearchWrapper input#search_input_react:focus{background-color:#20232a;color:#fff}.reactNavSearchWrapper .algolia-docsearch-suggestion--subcategory-inline{display:none}.reactNavSearchWrapper>span{width:100%}.reactNavSearchWrapper .aa-dropdown-menu{background:#f9f9f9;border:0 solid #f9f9f9;border-radius:0;color:#393939;font-size:12px;line-height:2em;max-height:140px;min-width:auto;-webkit-overflow-scrolling:touch;overflow-y:scroll;padding:0;position:relative!important;width:100%}#languages-dropdown{left:0;top:50px}#languages-dropdown-items{background-color:#20232a;display:flex;flex-direction:row}}@media only screen and (min-width:1024px){.navSearchWrapper{padding-left:10px;position:relative;right:auto;top:auto}.navSearchWrapper .algolia-autocomplete{display:block}.navigationSlider{height:34px;margin-left:auto;position:relative}.navigationSlider .navSlideout{display:none}.navigationSlider nav.slidingNav{background:none;height:auto;position:relative;right:auto;top:auto;width:auto}.navigationSlider .slidingNav ul{background:none;display:flex;flex-flow:row nowrap;margin:0;padding:0;width:auto}.navigationSlider .slidingNav ul li a{border:0;color:hsla(0,0%,100%,.8);display:flex;font-size:16px;font-size:1em;font-weight:300;height:32px;line-height:1.2em;margin:0;padding:0;padding:6px 10px}.navigationSlider .slidingNav ul li.siteNavGroupActive a,.navigationSlider .slidingNav ul li.siteNavItemActive a,.navigationSlider .slidingNav ul li a:hover{color:#fff}}@media only screen and (max-width:735px){.navigationSlider .slidingNav ul{overflow-x:auto}.navigationSlider .slidingNav ul::-webkit-scrollbar{display:none}}.docMainWrapper .wrapper{padding-left:0;padding-right:0;padding-top:10px}@media only screen and (min-width:1024px){.docMainWrapper{max-width:100%!important;margin:0}.docMainWrapper>*{margin:0 24px}.docMainWrapper>:first-child{margin-left:0}.docMainWrapper>:last-child{margin-right:0}.docMainWrapper .mainContainer{min-width:0}}.edit-page-link{float:right;font-size:10px;font-weight:400;margin-top:3px;text-decoration:none}@media only screen and (max-width:1023px){.edit-page-link{display:none}}.docs-prevnext{margin:20px 0}.docs-prevnext:after{clear:both;content:" ";display:table}.docs-next{float:right}.docs-prev{float:left}@media only screen and (max-width:735px){.docs-next{clear:both;float:left}.docs-next,.docs-prev{margin:10px 0}.arrow-next{float:right;margin-left:10px}.arrow-prev{float:left;margin-right:10px}.function-name-prevnext{width:200px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media only screen and (max-width:1023px){.docsNavContainer{background:#fff;left:0;position:fixed;width:100%;z-index:100}}@media only screen and (min-width:1024px){.docsNavContainer{flex:1 0 240px;display:flex;justify-content:flex-end;height:calc(100vh - 50px);position:-webkit-sticky;position:sticky;overflow-y:auto;top:50px}}.docsSliderActive.docsNavContainer{box-sizing:border-box;height:100%;-webkit-overflow-scrolling:touch;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;padding-bottom:50px}.docsNavContainer .toc .navBreadcrumb{background-color:#f1f1f1;box-sizing:border-box;display:flex;flex-flow:row nowrap;font-size:12px;height:48px;overflow:hidden;padding:8px 20px}.docsNavContainer .toc .navWrapper{padding:0}@media only screen and (min-width:1024px){.docsNavContainer .toc .navBreadcrumb{display:none}.navBreadcrumb h2{padding:0 10px}.separateOnPageNav .docsNavContainer{flex:1 0 240px}}.navBreadcrumb a,.navBreadcrumb span{border:0;color:#393939}@media only screen and (max-width:735px){.anchor{top:-144px}}@media only screen and (min-width:1024px){.toc{padding:40px 0}}.toc section{padding:0;position:relative}.toc section .navGroups{display:none;padding:48px 20px 60px}.toc .toggleNav{color:#393939;position:relative}.toc .toggleNav .navToggle{cursor:pointer;height:32px;margin-right:10px;position:relative;text-align:left;width:18px}.toc .toggleNav .navToggle:after,.toc .toggleNav .navToggle:before{border:5px solid #393939;border-width:5px 0;content:"";height:6px;left:0;left:8px;margin-top:-8px;position:absolute;top:50%;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:3px;z-index:1}.toc .toggleNav .navToggle:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.toc .toggleNav .navToggle i:after,.toc .toggleNav .navToggle i:before{background:transparent;border-color:transparent #393939;border-style:solid;border-width:0 5px 5px;content:"";height:0;left:2px;margin-top:-7px;opacity:1;position:absolute;top:50%;width:5px;z-index:10}.toggleNav h2 i{padding:0 4px}.toc .toggleNav .navToggle i:after{border-width:5px 5px 0;margin-top:2px}.docsSliderActive .toc .toggleNav .navToggle:after,.docsSliderActive .toc .toggleNav .navToggle:before{border-width:8px 0;height:0;margin-top:-8px}.docsSliderActive .toc .toggleNav .navToggle i{opacity:0}.docsSliderActive .tocToggler{visibility:hidden}.toc .toggleNav .navGroup{margin-bottom:16px}.toc .toggleNav .navGroup .navGroupCategoryTitle{color:#393939;font-size:18px;font-weight:500;line-height:1.2em;margin-bottom:8px;margin-top:0}.toc .toggleNav .navGroup .navListItem{margin:0}.toc .toggleNav .navGroup h3 i:not(:empty){box-sizing:border-box;color:rgba(57,57,57,.5);display:inline-block;height:16px;margin-right:10px;text-align:center;transition:color .2s;width:16px}.toc .toggleNav ul{padding:0 8px}.docsSliderActive .toc .toggleNav ul{padding-left:0}.toc .toggleNav ul li{list-style-type:none;padding:0}.toc .toggleNav ul li a{border:none;color:#717171;display:block;font-size:14px;padding:4px 0;transition:color .3s}.toc .toggleNav ul li.navListItemActive a,.toc .toggleNav ul li a:focus,.toc .toggleNav ul li a:hover{color:#20232a}.docsSliderActive .toc .navBreadcrumb,.tocActive .navBreadcrumb{border-bottom:1px solid #ccc;margin-bottom:20px;position:fixed;width:100%}.toc .toggleNav .navBreadcrumb h2{border:0;flex-grow:1;font-size:16px;font-weight:600;line-height:32px;margin:0;padding:0}.docsSliderActive .toc section .navGroups{display:block;padding-top:60px}.tocToggler{cursor:pointer;height:32px;line-height:32px;margin-right:-10px;padding:0 10px}.icon-toc{box-sizing:border-box;display:inline-block;line-height:normal;position:relative;top:-1px;vertical-align:middle}.icon-toc,.icon-toc:after,.icon-toc:before{background-color:currentColor;border:1px solid currentColor;border-radius:50%;box-sizing:border-box;height:4px;width:4px}.icon-toc:after,.icon-toc:before{content:"";position:absolute}.icon-toc:before{left:-1px;top:-7px}.icon-toc:after{left:-1px;top:5px}.tocActive .icon-toc{border-radius:0;height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:3px}.tocActive .icon-toc:before{border-radius:0;height:3px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:16px}.tocActive .icon-toc:after{content:""}@media only screen and (min-width:1024px){.docMainWrapper{display:flex;flex-flow:row nowrap}.docMainWrapper .wrapper{padding-top:0;padding-left:0;padding-right:0}}.onPageNav{display:none}.onPageNav::-webkit-scrollbar{display:none}.onPageNav a{color:#717171}.onPageNav ul{list-style:none}.onPageNav ul li{font-size:12px;line-height:16px;padding-bottom:8px}.onPageNav ul ul{padding:8px 0 0 20px}.onPageNav ul ul li{padding-bottom:5px}@media only screen and (min-width:1024px){.toc section .navGroups{display:block;padding:0;padding-top:8px}.navBreadcrumb h2{padding:0 10px}}@supports ((position: -webkit-sticky) or (position: sticky)){@media only screen and (max-width:1023px){.tocActive .onPageNav{background:#fff;bottom:0;display:block;left:0;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;padding:0 20px;position:fixed;right:0;top:148px;z-index:10}.tocActive .navBreadcrumb h2,.tocActive .navToggle{visibility:hidden}.tocActive .onPageNav>.toc-headings{padding:12px 0}}@media only screen and (min-width:1024px){.separateOnPageNav .headerWrapper.wrapper,.separateOnPageNav .wrapper{max-width:1400px}.separateOnPageNav .toc{width:auto}.docsNavContainer>:first-child{width:240px;max-width:240px}.separateOnPageNav.sideNavVisible .navPusher .mainContainer{flex:1 auto;max-width:100%;min-width:0}.onPageNav{align-self:flex-start;display:block;flex:0 0 240px;max-height:calc(100vh - 90px);overflow-y:auto;position:-webkit-sticky;position:sticky;top:90px}.docOnPageNav{flex:1 0 240px}.onPageNav>.toc-headings{border-left:1px solid #e0e0e0;padding:10px 0 2px 15px}.tocToggler{display:none}}}@media only screen and (min-width:1024px){.separateOnPageNav.sideNavVisible .navPusher .docMainContainer{flex-basis:784px;flex-grow:0}}.blog .wrapper{max-width:1100px}.blogContainer .posts .post{border-bottom:1px solid #e0e0e0;border-radius:3px;margin-bottom:20px;padding-bottom:20px}.blogContainer .postHeader{margin-bottom:10px}.blogContainer .postHeaderTitle{margin-top:0}.blogContainer .postHeader p.post-meta{margin-bottom:10px;padding:0}.blogContainer .postHeader .authorBlock{display:flex}.blogContainer .postHeader .post-authorName{color:rgba(57,57,57,.7);display:flex;flex-direction:column;font-size:14px;font-weight:400;justify-content:center;margin-right:10px;margin-top:0;padding:0}.blogContainer .postHeader .authorPhoto{border-radius:50%;height:30px;overflow:hidden;width:30px}.blogContainer .postHeader .authorPhoto.authorPhotoBig{height:50px;width:50px}.blog-recent{margin:20px 0}.blog-recent>a{float:left}@media only screen and (max-width:735px){.blog-recent{height:40px}}.blogSocialSection{display:block;padding:36px 0}.blogSocialSection .blogSocialSectionItem{padding-bottom:5px}.fb-like{display:block;margin-bottom:20px;width:100%}.more-users{margin:0 auto;max-width:560px;text-align:center}.productShowcaseSection{padding:0 20px;text-align:center}.productShowcaseSection.paddingTop{padding-top:20px}.productShowcaseSection.paddingBottom{padding-bottom:80px}.productShowcaseSection h2{color:#20232a;font-size:30px;line-height:1em;margin-top:20px;padding:10px 0;text-align:center}.productShowcaseSection p{margin:0 auto;max-width:560px;padding:.8em 0}.productShowcaseSection .logos{align-items:center;display:flex;flex-flow:row wrap;justify-content:center;padding:20px}.productShowcaseSection .logos img{max-height:110px;padding:20px;width:110px}@media only screen and (max-width:735px){.productShowcaseSection .logos img{max-height:64px;padding:20px;width:64px}}.showcaseSection{margin:0 auto;max-width:900px}.showcaseSection,.showcaseSection .prose h1{text-align:center}.showcaseSection .prose{margin:0 auto;max-width:560px;text-align:center}.showcaseSection .logos{align-items:center;display:flex;flex-flow:row wrap;justify-content:center}.showcaseSection .logos img{max-height:128px;padding:20px;width:128px}@media only screen and (max-width:735px){.showcaseSection .logos img{max-height:64px;padding:20px;width:64px}}.nav-footer{background:#20232a;border:none;color:#202020;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:24px;padding-bottom:2em;padding-top:2em;position:relative}@media only screen and (min-width:1024px){.nav-footer{flex-shrink:0}}.nav-footer .sitemap{display:flex;justify-content:space-between;margin:0 auto 3em;max-width:1080px}.nav-footer .sitemap div{flex:1}.nav-footer .sitemap .nav-home{display:table;height:72px;margin:-12px 20px 0 0;opacity:.4;padding:10px;transition:opacity .15s ease-in-out;width:72px}.nav-footer .sitemap .nav-home:focus,.nav-footer .sitemap .nav-home:hover{opacity:1}@media only screen and (max-width:735px){.nav-footer .sitemap{display:flex;flex-direction:column;margin:0 2em 3em;width:calc(100% - 4em)}.nav-footer .sitemap>div{margin-bottom:18px}}.nav-footer .sitemap a{color:hsla(0,0%,100%,.6);display:block;margin:2px -10px;padding:3px 10px}.nav-footer .sitemap a:focus,.nav-footer .sitemap a:hover,.nav-footer .sitemap h5>a:focus,.nav-footer .sitemap h5>a:hover{color:#fff;text-decoration:none}.nav-footer .sitemap h5,.nav-footer .sitemap h6{margin:0 0 10px}.nav-footer .sitemap h5,.nav-footer .sitemap h5>a,.nav-footer .sitemap h6,.nav-footer .sitemap h6>a{color:#fff}.nav-footer .sitemap h5>a,.nav-footer .sitemap h6>a{margin:0 -10px}.nav-footer .fbOpenSource{display:block;margin:1em auto;opacity:.4;transition:opacity .15s ease-in-out;width:170px}.nav-footer .fbOpenSource:hover{opacity:1}.nav-footer .copyright{color:hsla(0,0%,100%,.4);text-align:center}.nav-footer .social{padding:5px 0}.homeContainer{background:#282c34;color:#fff;padding:80px 0}.homeContainer .button{background:#24292e;border-color:#fff}.homeContainer *{color:inherit}.post a{text-decoration:underline}.navigationSlider .slidingNav ul{background:#282c34}.headerTitleWithLogo{white-space:nowrap}@media only screen and (min-width:1024px){.navigationSlider .slidingNav ul{background:none}} \ No newline at end of file diff --git a/docs/adding-a-css-modules-stylesheet.html b/docs/adding-a-css-modules-stylesheet.html index 3880097d..f47f88fc 100644 --- a/docs/adding-a-css-modules-stylesheet.html +++ b/docs/adding-a-css-modules-stylesheet.html @@ -1,4 +1,4 @@ -Adding a CSS Modules Stylesheet · Create React App
Edit

Adding a CSS Modules Stylesheet

Note: this feature is available with react-scripts@2.0.0 and higher.

This project supports CSS Modules alongside regular stylesheets using the [name].module.css file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format [filename]\_[classname]\_\_[hash].

-

Tip: Should you want to preprocess a stylesheet with Sass then make sure to follow the installation instructions and then change the stylesheet file extension as follows: [name].module.scss or [name].module.sass.

+

Tip: Should you want to preprocess a stylesheet with Sass then make sure to follow the installation instructions and then change the stylesheet file extension as follows: [name].module.scss or [name].module.sass.

CSS Modules let you use the same CSS class name in different files without worrying about naming clashes. Learn more about CSS Modules here.

Button.module.css

@@ -61,4 +61,11 @@ <button class="Button_error_ax7yz"></div>

This is an optional feature. Regular <link> stylesheets and CSS files are fully supported. CSS Modules are turned on for files ending with the .module.css extension.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-a-css-modules-stylesheet/index.html b/docs/adding-a-css-modules-stylesheet/index.html index 3880097d..f47f88fc 100644 --- a/docs/adding-a-css-modules-stylesheet/index.html +++ b/docs/adding-a-css-modules-stylesheet/index.html @@ -1,4 +1,4 @@ -Adding a CSS Modules Stylesheet · Create React App
Edit

Adding a CSS Modules Stylesheet

Note: this feature is available with react-scripts@2.0.0 and higher.

This project supports CSS Modules alongside regular stylesheets using the [name].module.css file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format [filename]\_[classname]\_\_[hash].

-

Tip: Should you want to preprocess a stylesheet with Sass then make sure to follow the installation instructions and then change the stylesheet file extension as follows: [name].module.scss or [name].module.sass.

+

Tip: Should you want to preprocess a stylesheet with Sass then make sure to follow the installation instructions and then change the stylesheet file extension as follows: [name].module.scss or [name].module.sass.

CSS Modules let you use the same CSS class name in different files without worrying about naming clashes. Learn more about CSS Modules here.

Button.module.css

@@ -61,4 +61,11 @@ <button class="Button_error_ax7yz"></div>

This is an optional feature. Regular <link> stylesheets and CSS files are fully supported. CSS Modules are turned on for files ending with the .module.css extension.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-a-router.html b/docs/adding-a-router.html index 3b12afc1..9272de73 100644 --- a/docs/adding-a-router.html +++ b/docs/adding-a-router.html @@ -1,4 +1,4 @@ -Adding a Router · Create React App
Edit

Adding a Router

← PreviousNext →
\ No newline at end of file +

Note that you may need to configure your production server to support client-side routing before deploying your app.

+
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-a-router/index.html b/docs/adding-a-router/index.html index 3b12afc1..9272de73 100644 --- a/docs/adding-a-router/index.html +++ b/docs/adding-a-router/index.html @@ -1,4 +1,4 @@ -Adding a Router · Create React App
Edit

Adding a Router

← PreviousNext →
\ No newline at end of file +

Note that you may need to configure your production server to support client-side routing before deploying your app.

+
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-a-sass-stylesheet.html b/docs/adding-a-sass-stylesheet.html index f62b2f69..7ee3e5c5 100644 --- a/docs/adding-a-sass-stylesheet.html +++ b/docs/adding-a-sass-stylesheet.html @@ -1,4 +1,4 @@ -Adding a Sass Stylesheet · Create React App
Edit

Adding a Sass Stylesheet

Note: this feature is available with react-scripts@2.0.0 and higher.

Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a .Button CSS class in <AcceptButton> and <RejectButton> components, we recommend creating a <Button> component with its own .Button styles, that both <AcceptButton> and <RejectButton> can render (but not inherit).

@@ -43,7 +43,7 @@ This file and any other file will be automatically compiled if imported with the @import '~nprogress/nprogress'; // importing a css file from the nprogress node module
-

Tip: You can opt into using this feature with CSS modules too!

+

Tip: You can opt into using this feature with CSS modules too!

Note: You must prefix imports from node_modules with ~ as displayed above.

@@ -55,4 +55,11 @@ This file and any other file will be automatically compiled if imported with the module.file_ext=.scss
-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-a-sass-stylesheet/index.html b/docs/adding-a-sass-stylesheet/index.html index f62b2f69..7ee3e5c5 100644 --- a/docs/adding-a-sass-stylesheet/index.html +++ b/docs/adding-a-sass-stylesheet/index.html @@ -1,4 +1,4 @@ -Adding a Sass Stylesheet · Create React App
Edit

Adding a Sass Stylesheet

Note: this feature is available with react-scripts@2.0.0 and higher.

Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a .Button CSS class in <AcceptButton> and <RejectButton> components, we recommend creating a <Button> component with its own .Button styles, that both <AcceptButton> and <RejectButton> can render (but not inherit).

@@ -43,7 +43,7 @@ This file and any other file will be automatically compiled if imported with the @import '~nprogress/nprogress'; // importing a css file from the nprogress node module
-

Tip: You can opt into using this feature with CSS modules too!

+

Tip: You can opt into using this feature with CSS modules too!

Note: You must prefix imports from node_modules with ~ as displayed above.

@@ -55,4 +55,11 @@ This file and any other file will be automatically compiled if imported with the module.file_ext=.scss
-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-a-stylesheet.html b/docs/adding-a-stylesheet.html index c9ae4aeb..ce089b75 100644 --- a/docs/adding-a-stylesheet.html +++ b/docs/adding-a-stylesheet.html @@ -1,4 +1,4 @@ -Adding a Stylesheet · Create React App
Edit

Adding a Stylesheet

This project setup uses Webpack for handling all assets. Webpack offers a custom way of “extending” the concept of import beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to import the CSS from the JavaScript file:

Button.css

.Button {
   padding: 20px;
@@ -45,4 +45,11 @@
 
This is not required for React but many people find this feature convenient. You can read about the benefits of this approach here. However you should be aware that this makes your code less portable to other build tools and environments than Webpack.

 
In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified .css file in the build output.

 
If you are concerned about using Webpack-specific semantics, you can put all your CSS right into src/index.css. It would still be imported from src/index.js, but you could always remove that import if you later migrate to a different build tool.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-a-stylesheet/index.html b/docs/adding-a-stylesheet/index.html index c9ae4aeb..ce089b75 100644 --- a/docs/adding-a-stylesheet/index.html +++ b/docs/adding-a-stylesheet/index.html @@ -1,4 +1,4 @@ -Adding a Stylesheet · Create React App
Edit

Adding a Stylesheet

This project setup uses Webpack for handling all assets. Webpack offers a custom way of “extending” the concept of import beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to import the CSS from the JavaScript file:

Button.css

.Button {
   padding: 20px;
@@ -45,4 +45,11 @@
 
This is not required for React but many people find this feature convenient. You can read about the benefits of this approach here. However you should be aware that this makes your code less portable to other build tools and environments than Webpack.

 
In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified .css file in the build output.

 
If you are concerned about using Webpack-specific semantics, you can put all your CSS right into src/index.css. It would still be imported from src/index.js, but you could always remove that import if you later migrate to a different build tool.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-bootstrap.html b/docs/adding-bootstrap.html index 7bb1065c..87834450 100644 --- a/docs/adding-bootstrap.html +++ b/docs/adding-bootstrap.html @@ -1,4 +1,4 @@ -Adding Bootstrap · Create React App
Edit

Adding Bootstrap

You don’t have to use reactstrap together with React but it is a popular library for integrating Bootstrap with React apps. If you need it, you can integrate it with Create React App by following these steps:

Install reactstrap and Bootstrap from npm. reactstrap does not include Bootstrap CSS so this needs to be installed as well:

npm install --save reactstrap bootstrap@4
@@ -60,4 +60,11 @@ As of react-scripts@2.0.0 you can import .scss files.

Finally, import the newly created .scss file instead of the default Bootstrap .css in the beginning of your src/index.js file, for example:

import './custom.scss';
-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-bootstrap/index.html b/docs/adding-bootstrap/index.html index 7bb1065c..87834450 100644 --- a/docs/adding-bootstrap/index.html +++ b/docs/adding-bootstrap/index.html @@ -1,4 +1,4 @@ -Adding Bootstrap · Create React App
Edit

Adding Bootstrap

You don’t have to use reactstrap together with React but it is a popular library for integrating Bootstrap with React apps. If you need it, you can integrate it with Create React App by following these steps:

Install reactstrap and Bootstrap from npm. reactstrap does not include Bootstrap CSS so this needs to be installed as well:

npm install --save reactstrap bootstrap@4
@@ -60,4 +60,11 @@ As of react-scripts@2.0.0 you can import .scss files.

Finally, import the newly created .scss file instead of the default Bootstrap .css in the beginning of your src/index.js file, for example:

import './custom.scss';
-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-custom-environment-variables.html b/docs/adding-custom-environment-variables.html index 9c683010..63242915 100644 --- a/docs/adding-custom-environment-variables.html +++ b/docs/adding-custom-environment-variables.html @@ -1,4 +1,4 @@ -Adding Custom Environment Variables · Create React App
Edit

Adding Custom Environment Variables

Note: this feature is available with react-scripts@0.2.3 and higher.

Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_.

-

The environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, just like described here. Alternatively you can rebuild the app on the server anytime you change them.

+

The environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, just like described here. Alternatively you can rebuild the app on the server anytime you change them.

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

@@ -81,7 +81,7 @@ a .env file. Both of these ways are described in the next few secti

Note that the caveats from the above section apply:

  • Apart from a few built-in variables (NODE_ENV and PUBLIC_URL), variable names must start with REACT_APP_ to work.
    • -
  • The environment variables are injected at build time. If you need to inject them at runtime, follow this approach instead.
    • +
  • The environment variables are injected at build time. If you need to inject them at runtime, follow this approach instead.

Adding Temporary Environment Variables In Your Shell

Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the @@ -144,4 +144,11 @@ these defined as well. Consult their documentation how to do this. For example, REACT_APP_FOO=$DOMAIN/foo REACT_APP_BAR=$DOMAIN/bar -

← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-custom-environment-variables/index.html b/docs/adding-custom-environment-variables/index.html index 9c683010..63242915 100644 --- a/docs/adding-custom-environment-variables/index.html +++ b/docs/adding-custom-environment-variables/index.html @@ -1,4 +1,4 @@ -Adding Custom Environment Variables · Create React App
Edit

Adding Custom Environment Variables

Note: this feature is available with react-scripts@0.2.3 and higher.

Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_.

-

The environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, just like described here. Alternatively you can rebuild the app on the server anytime you change them.

+

The environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, just like described here. Alternatively you can rebuild the app on the server anytime you change them.

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

@@ -81,7 +81,7 @@ a .env file. Both of these ways are described in the next few secti

Note that the caveats from the above section apply:

  • Apart from a few built-in variables (NODE_ENV and PUBLIC_URL), variable names must start with REACT_APP_ to work.
    • -
  • The environment variables are injected at build time. If you need to inject them at runtime, follow this approach instead.
    • +
  • The environment variables are injected at build time. If you need to inject them at runtime, follow this approach instead.

Adding Temporary Environment Variables In Your Shell

Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the @@ -144,4 +144,11 @@ these defined as well. Consult their documentation how to do this. For example, REACT_APP_FOO=$DOMAIN/foo REACT_APP_BAR=$DOMAIN/bar -

← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-flow.html b/docs/adding-flow.html index 03e047d8..c84d53c0 100644 --- a/docs/adding-flow.html +++ b/docs/adding-flow.html @@ -1,4 +1,4 @@ -Adding Flow · Create React App
Edit

Adding Flow

Flow is a static type checker that helps you write code with fewer bugs. Check out this introduction to using static types in JavaScript if you are new to this concept.

Recent versions of Flow work with Create React App projects out of the box.

To add Flow to a Create React App project, follow these steps:

    @@ -38,4 +38,11 @@ You can optionally use an IDE like Nuclide for a better integrated experience. In the future we plan to integrate it into Create React App even more closely.

    To learn more about Flow, check out its documentation.

    -
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-flow/index.html b/docs/adding-flow/index.html index 03e047d8..c84d53c0 100644 --- a/docs/adding-flow/index.html +++ b/docs/adding-flow/index.html @@ -1,4 +1,4 @@ -Adding Flow · Create React App
Edit

Adding Flow

Flow is a static type checker that helps you write code with fewer bugs. Check out this introduction to using static types in JavaScript if you are new to this concept.

Recent versions of Flow work with Create React App projects out of the box.

To add Flow to a Create React App project, follow these steps:

    @@ -38,4 +38,11 @@ You can optionally use an IDE like Nuclide for a better integrated experience. In the future we plan to integrate it into Create React App even more closely.

    To learn more about Flow, check out its documentation.

    -
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-images-fonts-and-files.html b/docs/adding-images-fonts-and-files.html index c538e296..abd73ef3 100644 --- a/docs/adding-images-fonts-and-files.html +++ b/docs/adding-images-fonts-and-files.html @@ -1,4 +1,4 @@ -Adding Images, Fonts, and Files · Create React App
Edit

Adding Images, Fonts, and Files

With Webpack, using static assets like images and fonts works similarly to CSS.

You can import a file right in a JavaScript module. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the src attribute of an image or the href of a link to a PDF.

To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to #1153.

Here is an example:

@@ -65,4 +65,11 @@ An alternative way of handling static assets is described in the next section.

This is handy if you don't want to load SVG as a separate file. Don't forget the curly braces in the import! The ReactComponent import name is special and tells Create React App that you want a React component that renders an SVG, rather than its filename.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-images-fonts-and-files/index.html b/docs/adding-images-fonts-and-files/index.html index c538e296..abd73ef3 100644 --- a/docs/adding-images-fonts-and-files/index.html +++ b/docs/adding-images-fonts-and-files/index.html @@ -1,4 +1,4 @@ -Adding Images, Fonts, and Files · Create React App
Edit

Adding Images, Fonts, and Files

With Webpack, using static assets like images and fonts works similarly to CSS.

You can import a file right in a JavaScript module. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the src attribute of an image or the href of a link to a PDF.

To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to #1153.

Here is an example:

@@ -65,4 +65,11 @@ An alternative way of handling static assets is described in the next section.

This is handy if you don't want to load SVG as a separate file. Don't forget the curly braces in the import! The ReactComponent import name is special and tells Create React App that you want a React component that renders an SVG, rather than its filename.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-relay.html b/docs/adding-relay.html index a8fc3f85..dc2d3f04 100644 --- a/docs/adding-relay.html +++ b/docs/adding-relay.html @@ -1,4 +1,4 @@ -Adding Relay · Create React App
Edit

Adding Relay

Relay is a framework for building data-driven React applications powered by GraphQL. The current release candidate of Relay works with Create React App projects out of the box using Babel Macros. Simply set up your project as laid out in the Relay documentation, then make sure you have a version of the babel plugin providing the macro.

To add it, run:

-
npm install --save --dev babel-plugin-relay@dev
+
npm install --save babel-plugin-relay@dev
 

 
Alternatively you may use yarn:

 
yarn upgrade babel-plugin-relay@dev
@@ -46,4 +46,11 @@ graphql`
 `;
 

 
To learn more about Relay, check out its documentation.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-relay/index.html b/docs/adding-relay/index.html index a8fc3f85..dc2d3f04 100644 --- a/docs/adding-relay/index.html +++ b/docs/adding-relay/index.html @@ -1,4 +1,4 @@ -Adding Relay · Create React App
Edit

Adding Relay

Relay is a framework for building data-driven React applications powered by GraphQL. The current release candidate of Relay works with Create React App projects out of the box using Babel Macros. Simply set up your project as laid out in the Relay documentation, then make sure you have a version of the babel plugin providing the macro.

To add it, run:

-
npm install --save --dev babel-plugin-relay@dev
+
npm install --save babel-plugin-relay@dev
 

 
Alternatively you may use yarn:

 
yarn upgrade babel-plugin-relay@dev
@@ -46,4 +46,11 @@ graphql`
 `;
 

 
To learn more about Relay, check out its documentation.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-typescript.html b/docs/adding-typescript.html new file mode 100644 index 00000000..a3147208 --- /dev/null +++ b/docs/adding-typescript.html @@ -0,0 +1,57 @@ +Adding TypeScript · Create React App
Edit

Adding TypeScript

+

Note: this feature is available with react-scripts@2.1.0 and higher.

+
+

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

+

To add TypeScript to a Create React App project, first install it:

+
$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest
+$ # or
+$ yarn add typescript @types/node @types/react @types/react-dom @types/jest
+
+

Next, rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx) and restart your development server!

+

Type errors will show up in the same console as the build one.

+

To learn more about TypeScript, check out its documentation.

+
+

Note: You are not required to make a tsconfig.json file, one will be made for you. +You are allowed to edit the generated TypeScript configuration.

+
+
+

Note: We recommend using VSCode for a better integrated experience.

+
+
+

Note: Constant enums and namespaces are not supported.

+
+
← PreviousNext →
\ No newline at end of file diff --git a/docs/adding-typescript/index.html b/docs/adding-typescript/index.html new file mode 100644 index 00000000..a3147208 --- /dev/null +++ b/docs/adding-typescript/index.html @@ -0,0 +1,57 @@ +Adding TypeScript · Create React App
Edit

Adding TypeScript

+

Note: this feature is available with react-scripts@2.1.0 and higher.

+
+

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

+

To add TypeScript to a Create React App project, first install it:

+
$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest
+$ # or
+$ yarn add typescript @types/node @types/react @types/react-dom @types/jest
+
+

Next, rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx) and restart your development server!

+

Type errors will show up in the same console as the build one.

+

To learn more about TypeScript, check out its documentation.

+
+

Note: You are not required to make a tsconfig.json file, one will be made for you. +You are allowed to edit the generated TypeScript configuration.

+
+
+

Note: We recommend using VSCode for a better integrated experience.

+
+
+

Note: Constant enums and namespaces are not supported.

+
+
← PreviousNext →
\ No newline at end of file diff --git a/docs/advanced-configuration.html b/docs/advanced-configuration.html index b33567c2..1107fd75 100644 --- a/docs/advanced-configuration.html +++ b/docs/advanced-configuration.html @@ -1,4 +1,4 @@ -Advanced Configuration · Create React App
Edit

Advanced Configuration

You can adjust various development and production settings by setting environment variables in your shell or with .env.

@@ -35,7 +35,7 @@ - + @@ -44,4 +44,11 @@
VariableDevelopmentProductionUsage
HOST✅ Used🚫 IgnoredBy default, the development web server binds to localhost. You may use this variable to specify a different host.
PORT✅ Used🚫 IgnoredBy default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port.
HTTPS✅ Used🚫 IgnoredWhen set to true, Create React App will run the development server in https mode.
PUBLIC_URL🚫 Ignored✅ UsedCreate React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json (homepage). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.
PUBLIC_URL🚫 Ignored✅ UsedCreate React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json (homepage). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included.md). This may be particularly useful when using a CDN to host your application.
CI✅ Used✅ UsedWhen set to true, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default.
REACT_EDITOR✅ Used🚫 IgnoredWhen an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can send a pull request to detect your editor of choice. Setting this environment variable overrides the automatic detection. If you do it, make sure your systems PATH environment variable points to your editor’s bin folder. You can also set it to none to disable it completely.
CHOKIDAR_USEPOLLING✅ Used🚫 IgnoredWhen set to true, the watcher runs in polling mode, as necessary inside a VM. Use this option if npm start isn't detecting changes.
INLINE_RUNTIME_CHUNK🚫 Ignored✅ UsedBy default, Create React App will embed the runtime script into index.html during the production build. When set to false, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP.
-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/advanced-configuration/index.html b/docs/advanced-configuration/index.html index b33567c2..1107fd75 100644 --- a/docs/advanced-configuration/index.html +++ b/docs/advanced-configuration/index.html @@ -1,4 +1,4 @@ -Advanced Configuration · Create React App
Edit

Advanced Configuration

You can adjust various development and production settings by setting environment variables in your shell or with .env.

@@ -35,7 +35,7 @@ - + @@ -44,4 +44,11 @@
VariableDevelopmentProductionUsage
HOST✅ Used🚫 IgnoredBy default, the development web server binds to localhost. You may use this variable to specify a different host.
PORT✅ Used🚫 IgnoredBy default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port.
HTTPS✅ Used🚫 IgnoredWhen set to true, Create React App will run the development server in https mode.
PUBLIC_URL🚫 Ignored✅ UsedCreate React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json (homepage). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.
PUBLIC_URL🚫 Ignored✅ UsedCreate React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json (homepage). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included.md). This may be particularly useful when using a CDN to host your application.
CI✅ Used✅ UsedWhen set to true, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default.
REACT_EDITOR✅ Used🚫 IgnoredWhen an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can send a pull request to detect your editor of choice. Setting this environment variable overrides the automatic detection. If you do it, make sure your systems PATH environment variable points to your editor’s bin folder. You can also set it to none to disable it completely.
CHOKIDAR_USEPOLLING✅ Used🚫 IgnoredWhen set to true, the watcher runs in polling mode, as necessary inside a VM. Use this option if npm start isn't detecting changes.
INLINE_RUNTIME_CHUNK🚫 Ignored✅ UsedBy default, Create React App will embed the runtime script into index.html during the production build. When set to false, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP.
-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/alternatives-to-ejecting.html b/docs/alternatives-to-ejecting.html index f73de5b7..882a68fb 100644 --- a/docs/alternatives-to-ejecting.html +++ b/docs/alternatives-to-ejecting.html @@ -1,4 +1,4 @@ -Alternatives to Ejecting · Create React App
Edit

Alternatives to Ejecting

Ejecting lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to fork react-scripts and any other packages you need. This article dives into how to do it in depth. You can find more discussion in this issue.

+
← PreviousNext →
\ No newline at end of file diff --git a/docs/alternatives-to-ejecting/index.html b/docs/alternatives-to-ejecting/index.html index f73de5b7..882a68fb 100644 --- a/docs/alternatives-to-ejecting/index.html +++ b/docs/alternatives-to-ejecting/index.html @@ -1,4 +1,4 @@ -Alternatives to Ejecting · Create React App
Edit

Alternatives to Ejecting

Ejecting lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to fork react-scripts and any other packages you need. This article dives into how to do it in depth. You can find more discussion in this issue.

+
← PreviousNext →
\ No newline at end of file diff --git a/docs/analyzing-the-bundle-size.html b/docs/analyzing-the-bundle-size.html index 8db2cc69..7ecebd02 100644 --- a/docs/analyzing-the-bundle-size.html +++ b/docs/analyzing-the-bundle-size.html @@ -1,4 +1,4 @@ -Analyzing the Bundle Size · Create React App
Edit

Analyzing the Bundle Size

Source map explorer analyzes JavaScript bundles using the source maps. This helps you understand where code bloat is coming from.

To add Source map explorer to a Create React App project, follow these steps:

@@ -46,4 +46,11 @@ script.

npm run build
 npm run analyze
-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/analyzing-the-bundle-size/index.html b/docs/analyzing-the-bundle-size/index.html index 8db2cc69..7ecebd02 100644 --- a/docs/analyzing-the-bundle-size/index.html +++ b/docs/analyzing-the-bundle-size/index.html @@ -1,4 +1,4 @@ -Analyzing the Bundle Size · Create React App
Edit

Analyzing the Bundle Size

Source map explorer analyzes JavaScript bundles using the source maps. This helps you understand where code bloat is coming from.

To add Source map explorer to a Create React App project, follow these steps:

@@ -46,4 +46,11 @@ script.

npm run build
 npm run analyze
-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/available-scripts.html b/docs/available-scripts.html index 6e5833fa..4a7a9c44 100644 --- a/docs/available-scripts.html +++ b/docs/available-scripts.html @@ -1,4 +1,4 @@ -Available Scripts · Create React App
Edit

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm test

-

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

+

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

-

See the section about deployment for more information.

+

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/available-scripts/index.html b/docs/available-scripts/index.html index 6e5833fa..4a7a9c44 100644 --- a/docs/available-scripts/index.html +++ b/docs/available-scripts/index.html @@ -1,4 +1,4 @@ -Available Scripts · Create React App
Edit

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm test

-

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

+

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

-

See the section about deployment for more information.

+

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/can-i-use-decorators.html b/docs/can-i-use-decorators.html index d082534d..7c5f314b 100644 --- a/docs/can-i-use-decorators.html +++ b/docs/can-i-use-decorators.html @@ -1,4 +1,4 @@ -Can I Use Decorators? · Create React App
Edit

Can I Use Decorators?

Some popular libraries use decorators in their documentation.
Create React App intentionally doesn’t support decorator syntax at the moment because:

  • It is an experimental proposal and is subject to change (in fact, it has already changed once, and will change again).
    • @@ -38,4 +38,11 @@ Please refer to these two threads for reference:

  • #411

Create React App will add decorator support when the specification advances to a stable stage.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/can-i-use-decorators/index.html b/docs/can-i-use-decorators/index.html index d082534d..7c5f314b 100644 --- a/docs/can-i-use-decorators/index.html +++ b/docs/can-i-use-decorators/index.html @@ -1,4 +1,4 @@ -Can I Use Decorators? · Create React App
Edit

Can I Use Decorators?

Some popular libraries use decorators in their documentation.
Create React App intentionally doesn’t support decorator syntax at the moment because:

  • It is an experimental proposal and is subject to change (in fact, it has already changed once, and will change again).
    • @@ -38,4 +38,11 @@ Please refer to these two threads for reference:

  • #411

Create React App will add decorator support when the specification advances to a stable stage.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/code-splitting.html b/docs/code-splitting.html index c060e4c7..9d3c72d3 100644 --- a/docs/code-splitting.html +++ b/docs/code-splitting.html @@ -1,4 +1,4 @@ -Code Splitting · Create React App
Edit

Code Splitting

Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand.

This project setup supports code splitting via dynamic import(). Its proposal is in stage 3. The import() function-like form takes the module name as an argument and returns a Promise which always resolves to the namespace object of the module.

Here is an example:

moduleA.js

@@ -63,4 +63,11 @@

With React Router

If you are using React Router check out this tutorial on how to use code splitting with it. You can find the companion GitHub repository here.

Also check out the Code Splitting section in React documentation.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/code-splitting/index.html b/docs/code-splitting/index.html index c060e4c7..9d3c72d3 100644 --- a/docs/code-splitting/index.html +++ b/docs/code-splitting/index.html @@ -1,4 +1,4 @@ -Code Splitting · Create React App
Edit

Code Splitting

Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand.

This project setup supports code splitting via dynamic import(). Its proposal is in stage 3. The import() function-like form takes the module name as an argument and returns a Promise which always resolves to the namespace object of the module.

Here is an example:

moduleA.js

@@ -63,4 +63,11 @@

With React Router

If you are using React Router check out this tutorial on how to use code splitting with it. You can find the companion GitHub repository here.

Also check out the Code Splitting section in React documentation.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/debugging-tests.html b/docs/debugging-tests.html index b6524adb..bd491e09 100644 --- a/docs/debugging-tests.html +++ b/docs/debugging-tests.html @@ -1,4 +1,4 @@ -Debugging Tests · Create React App
Edit

Debugging Tests

There are various ways to setup a debugger for your Jest tests. We cover debugging in Chrome and Visual Studio Code.

Note: debugging tests requires Node 8 or higher.

@@ -70,4 +70,11 @@ ] } -
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/debugging-tests/index.html b/docs/debugging-tests/index.html index b6524adb..bd491e09 100644 --- a/docs/debugging-tests/index.html +++ b/docs/debugging-tests/index.html @@ -1,4 +1,4 @@ -Debugging Tests · Create React App
Edit

Debugging Tests

There are various ways to setup a debugger for your Jest tests. We cover debugging in Chrome and Visual Studio Code.

Note: debugging tests requires Node 8 or higher.

@@ -70,4 +70,11 @@ ] } -
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/deployment.html b/docs/deployment.html index 02474c39..2e8f1655 100644 --- a/docs/deployment.html +++ b/docs/deployment.html @@ -1,4 +1,4 @@ -Deployment · Create React App
Edit

Deployment

npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main.<hash>.js are served with the contents of the /static/js/main.<hash>.js file.

Static Server

For environments using Node, the easiest way to handle this would be to install serve and let it handle the rest:

npm install -g serve
@@ -72,11 +72,11 @@ app.listen(9000);
 
It will get copied to the build folder when you run npm run build.

 
If you’re using Apache Tomcat, you need to follow this Stack Overflow answer.

 
Now requests to /todos/42 will be handled correctly both in development and in production.

-
On a production build, and when you've opted-in,
+
On a production build, and when you've opted-in,
 a service worker will automatically handle all navigation requests, like for
 /todos/42, by serving the cached copy of your index.html. This
 service worker navigation routing can be configured or disabled by
-ejecting and then modifying the
+ejecting and then modifying the
 navigateFallback
 and navigateFallbackWhitelist
 options of the SWPreachePlugin configuration.

@@ -330,4 +330,11 @@ netlify deploy
 
Note that in order to support routers that use HTML5 pushState API, you may want to rename the index.html in your build folder to 200.html before deploying to Surge. This ensures that every URL falls back to that file.

 
Publishing Components To npm

 
Create React App doesn't provide any built-in functionality to publish a component to npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like nwb to prepare it for publishing.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/deployment/index.html b/docs/deployment/index.html index 02474c39..2e8f1655 100644 --- a/docs/deployment/index.html +++ b/docs/deployment/index.html @@ -1,4 +1,4 @@ -Deployment · Create React App
Edit

Deployment

npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main.<hash>.js are served with the contents of the /static/js/main.<hash>.js file.

Static Server

For environments using Node, the easiest way to handle this would be to install serve and let it handle the rest:

npm install -g serve
@@ -72,11 +72,11 @@ app.listen(9000);
 
It will get copied to the build folder when you run npm run build.

 
If you’re using Apache Tomcat, you need to follow this Stack Overflow answer.

 
Now requests to /todos/42 will be handled correctly both in development and in production.

-
On a production build, and when you've opted-in,
+
On a production build, and when you've opted-in,
 a service worker will automatically handle all navigation requests, like for
 /todos/42, by serving the cached copy of your index.html. This
 service worker navigation routing can be configured or disabled by
-ejecting and then modifying the
+ejecting and then modifying the
 navigateFallback
 and navigateFallbackWhitelist
 options of the SWPreachePlugin configuration.

@@ -330,4 +330,11 @@ netlify deploy
 
Note that in order to support routers that use HTML5 pushState API, you may want to rename the index.html in your build folder to 200.html before deploying to Surge. This ensures that every URL falls back to that file.

 
Publishing Components To npm

 
Create React App doesn't provide any built-in functionality to publish a component to npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like nwb to prepare it for publishing.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/developing-components-in-isolation.html b/docs/developing-components-in-isolation.html index a3abf86e..8052aaee 100644 --- a/docs/developing-components-in-isolation.html +++ b/docs/developing-components-in-isolation.html @@ -1,4 +1,4 @@ -Developing Components in Isolation · Create React App
Edit

Developing Components in Isolation

Usually, in an app, you have a lot of UI components, and each of them has many different states. +For an example, a simple button component could have the following states:

  • In a regular state, with a text label.
  • In the disabled mode.
    • @@ -75,4 +75,11 @@ For an example, a simple button component could have following states:

  • GitHub Repo
  • Documentation
-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/developing-components-in-isolation/index.html b/docs/developing-components-in-isolation/index.html index a3abf86e..8052aaee 100644 --- a/docs/developing-components-in-isolation/index.html +++ b/docs/developing-components-in-isolation/index.html @@ -1,4 +1,4 @@ -Developing Components in Isolation · Create React App
Edit

Developing Components in Isolation

Usually, in an app, you have a lot of UI components, and each of them has many different states. +For an example, a simple button component could have the following states:

  • In a regular state, with a text label.
  • In the disabled mode.
    • @@ -75,4 +75,11 @@ For an example, a simple button component could have following states:

  • GitHub Repo
  • Documentation
-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/documentation-intro.html b/docs/documentation-intro.html index fb44e900..7c70633d 100644 --- a/docs/documentation-intro.html +++ b/docs/documentation-intro.html @@ -1,4 +1,4 @@ -About the Documentation · Create React App
Edit

About the Documentation

Welcome to the Create React App documentation!

Navigation

You can find different topics in the table of contents. On desktop, you should see it in the left sidebar. On mobile, you should see it after pressing an icon with arrows in the top left corner.

Looking for React Docs?

@@ -35,4 +35,11 @@

If you have ideas for more “How To” recipes that should be on this page, let us know or contribute some!

Feedback

We are always open to your feedback.

-
Next →
\ No newline at end of file +
Next →
\ No newline at end of file diff --git a/docs/documentation-intro/index.html b/docs/documentation-intro/index.html index fb44e900..7c70633d 100644 --- a/docs/documentation-intro/index.html +++ b/docs/documentation-intro/index.html @@ -1,4 +1,4 @@ -About the Documentation · Create React App
Edit

About the Documentation

Welcome to the Create React App documentation!

Navigation

You can find different topics in the table of contents. On desktop, you should see it in the left sidebar. On mobile, you should see it after pressing an icon with arrows in the top left corner.

Looking for React Docs?

@@ -35,4 +35,11 @@

If you have ideas for more “How To” recipes that should be on this page, let us know or contribute some!

Feedback

We are always open to your feedback.

-
Next →
\ No newline at end of file +
Next →
\ No newline at end of file diff --git a/docs/fetching-data-with-ajax-requests.html b/docs/fetching-data-with-ajax-requests.html index 18fc0e9a..400c78dc 100644 --- a/docs/fetching-data-with-ajax-requests.html +++ b/docs/fetching-data-with-ajax-requests.html @@ -1,4 +1,4 @@ -Fetching Data with AJAX Requests · Create React App
Edit

Fetching Data with AJAX Requests

React doesn't prescribe a specific approach to data fetching, but people commonly use either a library like axios or the fetch() API provided by the browser.

The global fetch function allows you to easily make AJAX requests. It takes in a URL as an input and returns a Promise that resolves to a Response object. You can find more information about fetch here.

A Promise represents the eventual result of an asynchronous operation, you can find more information about Promises here and here. Both axios and fetch() use Promises under the hood. You can also use the async / await syntax to reduce the callback nesting.

Make sure the fetch() API and Promises are available in your target audience's browsers. For example, support in Internet Explorer requires a polyfill.

You can learn more about making AJAX requests from React components in the FAQ entry on the React website.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/fetching-data-with-ajax-requests/index.html b/docs/fetching-data-with-ajax-requests/index.html index 18fc0e9a..400c78dc 100644 --- a/docs/fetching-data-with-ajax-requests/index.html +++ b/docs/fetching-data-with-ajax-requests/index.html @@ -1,4 +1,4 @@ -Fetching Data with AJAX Requests · Create React App
Edit

Fetching Data with AJAX Requests

React doesn't prescribe a specific approach to data fetching, but people commonly use either a library like axios or the fetch() API provided by the browser.

The global fetch function allows you to easily make AJAX requests. It takes in a URL as an input and returns a Promise that resolves to a Response object. You can find more information about fetch here.

A Promise represents the eventual result of an asynchronous operation, you can find more information about Promises here and here. Both axios and fetch() use Promises under the hood. You can also use the async / await syntax to reduce the callback nesting.

Make sure the fetch() API and Promises are available in your target audience's browsers. For example, support in Internet Explorer requires a polyfill.

You can learn more about making AJAX requests from React components in the FAQ entry on the React website.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/folder-structure.html b/docs/folder-structure.html index 78b68a3f..632dc897 100644 --- a/docs/folder-structure.html +++ b/docs/folder-structure.html @@ -1,4 +1,4 @@ -Folder Structure · Create React App
Edit

Folder Structure

After creation, your project should look like this:

my-app/
   README.md
   node_modules/
@@ -51,4 +51,11 @@
 
Only files inside public can be used from public/index.html. Read instructions below for using assets from JavaScript and HTML.

 
You can, however, create more top-level directories. They will not be included in the production build so you can use them for things like documentation.

 
If you have Git installed and your project is not part of a larger repository, then a new repository will be initialized resulting in an additional top-level .git directory.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/folder-structure/index.html b/docs/folder-structure/index.html index 78b68a3f..632dc897 100644 --- a/docs/folder-structure/index.html +++ b/docs/folder-structure/index.html @@ -1,4 +1,4 @@ -Folder Structure · Create React App
Edit

Folder Structure

After creation, your project should look like this:

my-app/
   README.md
   node_modules/
@@ -51,4 +51,11 @@
 
Only files inside public can be used from public/index.html. Read instructions below for using assets from JavaScript and HTML.

 
You can, however, create more top-level directories. They will not be included in the production build so you can use them for things like documentation.

 
If you have Git installed and your project is not part of a larger repository, then a new repository will be initialized resulting in an additional top-level .git directory.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/getting-started.html b/docs/getting-started.html index 6364ff08..79ea866b 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -1,4 +1,4 @@ -Getting Started · Create React App
Edit

Getting Started

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

Quick Start

npx create-react-app my-app
@@ -57,7 +57,7 @@ npm start

yarn create is available in Yarn 0.25+

Output

-

Running amy of these commands will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

+

Running any of these commands will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
 ├── README.md
 ├── node_modules
@@ -94,4 +94,11 @@ npm start
 
Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

 
The build is minified and the filenames include the hashes.

 
Your app is ready to be deployed.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/getting-started/index.html b/docs/getting-started/index.html index 6364ff08..79ea866b 100644 --- a/docs/getting-started/index.html +++ b/docs/getting-started/index.html @@ -1,4 +1,4 @@ -Getting Started · Create React App
Edit

Getting Started

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

Quick Start

npx create-react-app my-app
@@ -57,7 +57,7 @@ npm start

yarn create is available in Yarn 0.25+

Output

-

Running amy of these commands will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

+

Running any of these commands will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
 ├── README.md
 ├── node_modules
@@ -94,4 +94,11 @@ npm start
 
Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

 
The build is minified and the filenames include the hashes.

 
Your app is ready to be deployed.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/importing-a-component.html b/docs/importing-a-component.html index ee245155..30222ffa 100644 --- a/docs/importing-a-component.html +++ b/docs/importing-a-component.html @@ -1,4 +1,4 @@ -Importing a Component · Create React App
Edit

Importing a Component

← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/importing-a-component/index.html b/docs/importing-a-component/index.html index ee245155..30222ffa 100644 --- a/docs/importing-a-component/index.html +++ b/docs/importing-a-component/index.html @@ -1,4 +1,4 @@ -Importing a Component · Create React App
Edit

Importing a Component

← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/installing-a-dependency.html b/docs/installing-a-dependency.html index db9504cd..73f3d9b0 100644 --- a/docs/installing-a-dependency.html +++ b/docs/installing-a-dependency.html @@ -1,4 +1,4 @@ -Installing a Dependency · Create React App
Edit

Installing a Dependency

The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) with npm:

npm install --save react-router-dom

Alternatively you may use yarn:

yarn add react-router-dom

This works for any library, not just react-router-dom.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/installing-a-dependency/index.html b/docs/installing-a-dependency/index.html index db9504cd..73f3d9b0 100644 --- a/docs/installing-a-dependency/index.html +++ b/docs/installing-a-dependency/index.html @@ -1,4 +1,4 @@ -Installing a Dependency · Create React App
Edit

Installing a Dependency

The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) with npm:

npm install --save react-router-dom

Alternatively you may use yarn:

yarn add react-router-dom

This works for any library, not just react-router-dom.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/integrating-with-an-api-backend.html b/docs/integrating-with-an-api-backend.html index 1cb643a4..04c16aa1 100644 --- a/docs/integrating-with-an-api-backend.html +++ b/docs/integrating-with-an-api-backend.html @@ -1,4 +1,4 @@ -Integrating with an API Backend · Create React App
Edit

Integrating with an API Backend

These tutorials will help you to integrate your app with an API backend running on another port, using fetch() to access it.

Node

Check out this tutorial. @@ -35,7 +35,14 @@ You can find the companion GitHub repository here.

API Platform (PHP and Symfony)

API Platform is a framework designed to build API-driven projects. -It allows to create hypermedia and GraphQL APIs in minutes. +It allows creating hypermedia and GraphQL APIs in minutes. It is shipped with an official Progressive Web App generator as well as a dynamic administration interface, both built for Create React App. Check out this tutorial.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/integrating-with-an-api-backend/index.html b/docs/integrating-with-an-api-backend/index.html index 1cb643a4..04c16aa1 100644 --- a/docs/integrating-with-an-api-backend/index.html +++ b/docs/integrating-with-an-api-backend/index.html @@ -1,4 +1,4 @@ -Integrating with an API Backend · Create React App
Edit

Integrating with an API Backend

These tutorials will help you to integrate your app with an API backend running on another port, using fetch() to access it.

Node

Check out this tutorial. @@ -35,7 +35,14 @@ You can find the companion GitHub repository here.

API Platform (PHP and Symfony)

API Platform is a framework designed to build API-driven projects. -It allows to create hypermedia and GraphQL APIs in minutes. +It allows creating hypermedia and GraphQL APIs in minutes. It is shipped with an official Progressive Web App generator as well as a dynamic administration interface, both built for Create React App. Check out this tutorial.

-
← PreviousNext →
\ No newline at end of file +
← PreviousNext →
\ No newline at end of file diff --git a/docs/making-a-progressive-web-app.html b/docs/making-a-progressive-web-app.html index 3903e089..8f7b842f 100644 --- a/docs/making-a-progressive-web-app.html +++ b/docs/making-a-progressive-web-app.html @@ -1,4 +1,4 @@ -Making a Progressive Web App · Create React App
Edit

Making a Progressive Web App

The production build has all the tools necessary to generate a first-class Progressive Web App, but the offline/cache-first behavior is opt-in only. By default, the build process will generate a service worker file, but it will not be @@ -83,7 +83,7 @@ although to facilitate local testing, that policy does not apply to localhost. If your production web server does not support HTTPS, then the service worker registration will fail, but the rest of your web app will remain functional.

-

  • The service worker is only enabled in the production environment, +

  • The service worker is only enabled in the production environment, e.g. the output of npm run build. It's recommended that you do not enable an offline-first service worker in a development environment, as it can lead to frustration when previously cached assets are used and do not include the latest @@ -91,11 +91,11 @@ changes you've made locally.

  • If you need to test your offline-first service worker locally, build the application (using npm run build) and run a simple http server from your build directory. After running the build script, create-react-app will give -instructions for one way to test your production build locally and the deployment instructions have +instructions for one way to test your production build locally and the deployment instructions have instructions for using other methods. Be sure to always use an incognito window to avoid complications with your browser cache.

  • By default, the generated service worker file will not intercept or cache any -cross-origin traffic, like HTTP API requests, +cross-origin traffic, like HTTP API requests, images, or embeds loaded from a different domain.

    • Progressive Web App Metadata

    @@ -112,4 +112,11 @@ will affect your users' experience.

    work offline when there's an active service worker. That being said, the metadata from the web app manifest will still be used regardless of whether or not you opt-in to service worker registration.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/making-a-progressive-web-app/index.html b/docs/making-a-progressive-web-app/index.html index 3903e089..8f7b842f 100644 --- a/docs/making-a-progressive-web-app/index.html +++ b/docs/making-a-progressive-web-app/index.html @@ -1,4 +1,4 @@ -Making a Progressive Web App · Create React App
    Edit

    Making a Progressive Web App

    The production build has all the tools necessary to generate a first-class Progressive Web App, but the offline/cache-first behavior is opt-in only. By default, the build process will generate a service worker file, but it will not be @@ -83,7 +83,7 @@ although to facilitate local testing, that policy does not apply to localhost. If your production web server does not support HTTPS, then the service worker registration will fail, but the rest of your web app will remain functional.

    -

  • The service worker is only enabled in the production environment, +

  • The service worker is only enabled in the production environment, e.g. the output of npm run build. It's recommended that you do not enable an offline-first service worker in a development environment, as it can lead to frustration when previously cached assets are used and do not include the latest @@ -91,11 +91,11 @@ changes you've made locally.

  • If you need to test your offline-first service worker locally, build the application (using npm run build) and run a simple http server from your build directory. After running the build script, create-react-app will give -instructions for one way to test your production build locally and the deployment instructions have +instructions for one way to test your production build locally and the deployment instructions have instructions for using other methods. Be sure to always use an incognito window to avoid complications with your browser cache.

  • By default, the generated service worker file will not intercept or cache any -cross-origin traffic, like HTTP API requests, +cross-origin traffic, like HTTP API requests, images, or embeds loaded from a different domain.

    • Progressive Web App Metadata

    @@ -112,4 +112,11 @@ will affect your users' experience.

    work offline when there's an active service worker. That being said, the metadata from the web app manifest will still be used regardless of whether or not you opt-in to service worker registration.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/post-processing-css.html b/docs/post-processing-css.html index 904cebf7..0b5e37da 100644 --- a/docs/post-processing-css.html +++ b/docs/post-processing-css.html @@ -1,4 +1,4 @@ -Post-Processing CSS · Create React App
    Edit

    Post-Processing CSS

    This project setup minifies your CSS and adds vendor prefixes to it automatically through Autoprefixer so you don’t need to worry about it.

    Support for new CSS features like the all property, break properties, custom properties, and media query ranges are automatically polyfilled to add support for older browsers.

    You can customize your target support browsers by adjusting the browserslist key in package.json according to the Browserslist specification.

    For example, this:

    @@ -53,4 +53,11 @@

    CSS Grid Layout prefixing is disabled by default, but it will not strip manual prefixing. If you'd like to opt-in to CSS Grid prefixing, first familiarize yourself about its limitations.
    To enable CSS Grid prefixing, add /* autoprefixer grid: on */ to the top of your CSS file.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/post-processing-css/index.html b/docs/post-processing-css/index.html index 904cebf7..0b5e37da 100644 --- a/docs/post-processing-css/index.html +++ b/docs/post-processing-css/index.html @@ -1,4 +1,4 @@ -Post-Processing CSS · Create React App
    Edit

    Post-Processing CSS

    This project setup minifies your CSS and adds vendor prefixes to it automatically through Autoprefixer so you don’t need to worry about it.

    Support for new CSS features like the all property, break properties, custom properties, and media query ranges are automatically polyfilled to add support for older browsers.

    You can customize your target support browsers by adjusting the browserslist key in package.json according to the Browserslist specification.

    For example, this:

    @@ -53,4 +53,11 @@

    CSS Grid Layout prefixing is disabled by default, but it will not strip manual prefixing. If you'd like to opt-in to CSS Grid prefixing, first familiarize yourself about its limitations.
    To enable CSS Grid prefixing, add /* autoprefixer grid: on */ to the top of your CSS file.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/pre-rendering-into-static-html-files.html b/docs/pre-rendering-into-static-html-files.html index d564c269..d58fbfab 100644 --- a/docs/pre-rendering-into-static-html-files.html +++ b/docs/pre-rendering-into-static-html-files.html @@ -1,4 +1,4 @@ -Pre-Rendering into Static HTML Files · Create React App
    Edit

    Pre-Rendering into Static HTML Files

    If you’re hosting your build with a static hosting provider you can use react-snapshot or react-snap to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or “hydrated”, when the JavaScript bundle has loaded.

    There are also opportunities to use this outside of static hosting, to take the pressure off the server when generating and caching routes.

    The primary benefit of pre-rendering is that you get the core content of each page with the HTML payload—regardless of whether or not your JavaScript bundle successfully downloads. It also increases the likelihood that each route of your application will be picked up by search engines.

    You can read more about zero-configuration pre-rendering (also called snapshotting) here.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/pre-rendering-into-static-html-files/index.html b/docs/pre-rendering-into-static-html-files/index.html index d564c269..d58fbfab 100644 --- a/docs/pre-rendering-into-static-html-files/index.html +++ b/docs/pre-rendering-into-static-html-files/index.html @@ -1,4 +1,4 @@ -Pre-Rendering into Static HTML Files · Create React App
    Edit

    Pre-Rendering into Static HTML Files

    If you’re hosting your build with a static hosting provider you can use react-snapshot or react-snap to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or “hydrated”, when the JavaScript bundle has loaded.

    There are also opportunities to use this outside of static hosting, to take the pressure off the server when generating and caching routes.

    The primary benefit of pre-rendering is that you get the core content of each page with the HTML payload—regardless of whether or not your JavaScript bundle successfully downloads. It also increases the likelihood that each route of your application will be picked up by search engines.

    You can read more about zero-configuration pre-rendering (also called snapshotting) here.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/proxying-api-requests-in-development.html b/docs/proxying-api-requests-in-development.html index 6600d373..9c076ba5 100644 --- a/docs/proxying-api-requests-in-development.html +++ b/docs/proxying-api-requests-in-development.html @@ -1,4 +1,4 @@ -Proxying API Requests in Development · Create React App
    Edit

    Proxying API Requests in Development

    Note: this feature is available with react-scripts@0.2.3 and higher.

    People often serve the front-end React app from the same host and port as their backend implementation.
    @@ -48,7 +48,7 @@ If the proxy option is not flexible enough for you

    "Invalid Host Header" Errors After Configuring Proxy

    When you enable the proxy option, you opt into a more strict set of host checks. This is necessary because leaving the backend open to remote hosts makes your computer vulnerable to DNS rebinding attacks. The issue is explained in this article and this issue.

    @@ -100,4 +100,11 @@ $ yarn add http-proxy-middleware

    Note: Passing the path to the proxy function allows you to use globbing and/or pattern matching on the path, which is more flexible than the express route matching.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/proxying-api-requests-in-development/index.html b/docs/proxying-api-requests-in-development/index.html index 6600d373..9c076ba5 100644 --- a/docs/proxying-api-requests-in-development/index.html +++ b/docs/proxying-api-requests-in-development/index.html @@ -1,4 +1,4 @@ -Proxying API Requests in Development · Create React App
    Edit

    Proxying API Requests in Development

    Note: this feature is available with react-scripts@0.2.3 and higher.

    People often serve the front-end React app from the same host and port as their backend implementation.
    @@ -48,7 +48,7 @@ If the proxy option is not flexible enough for you

    "Invalid Host Header" Errors After Configuring Proxy

    When you enable the proxy option, you opt into a more strict set of host checks. This is necessary because leaving the backend open to remote hosts makes your computer vulnerable to DNS rebinding attacks. The issue is explained in this article and this issue.

    @@ -100,4 +100,11 @@ $ yarn add http-proxy-middleware

    Note: Passing the path to the proxy function allows you to use globbing and/or pattern matching on the path, which is more flexible than the express route matching.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/running-tests.html b/docs/running-tests.html index f3f8c3f7..bdff8e76 100644 --- a/docs/running-tests.html +++ b/docs/running-tests.html @@ -1,4 +1,4 @@ -Running Tests · Create React App
    Edit

    Running Tests

    Note: this feature is available with react-scripts@0.3.0 and higher.

    @@ -94,6 +94,9 @@ it('renders without crashing', () => { configure({ adapter: new Adapter() });
    +

    Note: When using TypeScript with Babel, all your files need to have at least one export, otherwise you will get the error Cannot compile namespaces when the '--isolatedModules' flag is provided.. To fix this, you can add export default undefined to src/setupTests.ts.

    +
    +

    Note: Keep in mind that if you decide to "eject" before creating src/setupTests.js, the resulting package.json file won't contain any reference to it. Read here to learn how to add this after ejecting.

    Now you can write a smoke test with it:

    @@ -212,7 +215,7 @@ Run npm test -- --coverage (note extra -- in the middl "name": "your-package", "jest": { "collectCoverageFrom": [ - "src/**/*.{js,jsx}", + "src/**/*.{js,jsx,ts,tsx}", "!<rootDir>/node_modules/", "!<rootDir>/path/to/dir/" ], @@ -303,4 +306,11 @@ node_js:

    Editor Integration

    If you use Visual Studio Code, there is a Jest extension which works with Create React App out of the box. This provides a lot of IDE-like features while using a text editor: showing the status of a test run with potential fail messages inline, starting and stopping the watcher automatically, and offering one-click snapshot updates.

    VS Code Jest Preview

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/running-tests/index.html b/docs/running-tests/index.html index f3f8c3f7..bdff8e76 100644 --- a/docs/running-tests/index.html +++ b/docs/running-tests/index.html @@ -1,4 +1,4 @@ -Running Tests · Create React App
    Edit

    Running Tests

    Note: this feature is available with react-scripts@0.3.0 and higher.

    @@ -94,6 +94,9 @@ it('renders without crashing', () => { configure({ adapter: new Adapter() });
    +

    Note: When using TypeScript with Babel, all your files need to have at least one export, otherwise you will get the error Cannot compile namespaces when the '--isolatedModules' flag is provided.. To fix this, you can add export default undefined to src/setupTests.ts.

    +
    +

    Note: Keep in mind that if you decide to "eject" before creating src/setupTests.js, the resulting package.json file won't contain any reference to it. Read here to learn how to add this after ejecting.

    Now you can write a smoke test with it:

    @@ -212,7 +215,7 @@ Run npm test -- --coverage (note extra -- in the middl "name": "your-package", "jest": { "collectCoverageFrom": [ - "src/**/*.{js,jsx}", + "src/**/*.{js,jsx,ts,tsx}", "!<rootDir>/node_modules/", "!<rootDir>/path/to/dir/" ], @@ -303,4 +306,11 @@ node_js:

    Editor Integration

    If you use Visual Studio Code, there is a Jest extension which works with Create React App out of the box. This provides a lot of IDE-like features while using a text editor: showing the status of a test run with potential fail messages inline, starting and stopping the watcher automatically, and offering one-click snapshot updates.

    VS Code Jest Preview

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/setting-up-your-editor.html b/docs/setting-up-your-editor.html index 02cd46a9..1ffb9ace 100644 --- a/docs/setting-up-your-editor.html +++ b/docs/setting-up-your-editor.html @@ -1,4 +1,4 @@ -Setting Up Your Editor · Create React App
    Edit

    Setting Up Your Editor

    Create React App comes with a bunch of tools that improve the editing experience - if configured correctly. Here's a few tips to maximize your productivity:

    Syntax highlighting

    To configure the syntax highlighting in your favorite text editor, head to the relevant Babel documentation page and follow the instructions. Some of the most popular editors are covered.

    Displaying Lint Output in the Editor

    @@ -66,7 +66,7 @@ It also only works with npm 3 or higher.

    }
    -

    Note: the URL may be different if you've made adjustments via the HOST or PORT environment variables.

    +

    Note: the URL may be different if you've made adjustments via the HOST or PORT environment variables.

    Start your app by running npm start, and start debugging in VS Code by pressing F5 or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.

    Having problems with VS Code Debugging? Please see their troubleshooting guide.

    @@ -74,7 +74,7 @@ It also only works with npm 3 or higher.

    You would need to have WebStorm and JetBrains IDE Support Chrome extension installed.

    In the WebStorm menu Run select Edit Configurations.... Then click + and select JavaScript Debug. Paste http://localhost:3000 into the URL field and save the configuration.

    -

    Note: the URL may be different if you've made adjustments via the HOST or PORT environment variables.

    +

    Note: the URL may be different if you've made adjustments via the HOST or PORT environment variables.

    Start your app by running npm start, then press ^D on macOS or F9 on Windows and Linux or click the green debug icon to start debugging in WebStorm.

    The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.

    @@ -104,13 +104,20 @@ It also only works with npm 3 or higher.

    // ... }, + "lint-staged": { -+ "src/**/*.{js,jsx,json,css}": [ ++ "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [ + "prettier --single-quote --write", + "git add" + ] + }, "scripts": {     -

    Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}" to format your entire project for the first time.

    +

    Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}" to format your entire project for the first time.

    Next you might want to integrate Prettier in your favorite editor. Read the section on Editor Integration on the Prettier GitHub page.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/setting-up-your-editor/index.html b/docs/setting-up-your-editor/index.html index 02cd46a9..1ffb9ace 100644 --- a/docs/setting-up-your-editor/index.html +++ b/docs/setting-up-your-editor/index.html @@ -1,4 +1,4 @@ -Setting Up Your Editor · Create React App
    Edit

    Setting Up Your Editor

    Create React App comes with a bunch of tools that improve the editing experience - if configured correctly. Here's a few tips to maximize your productivity:

    Syntax highlighting

    To configure the syntax highlighting in your favorite text editor, head to the relevant Babel documentation page and follow the instructions. Some of the most popular editors are covered.

    Displaying Lint Output in the Editor

    @@ -66,7 +66,7 @@ It also only works with npm 3 or higher.

    }
    -

    Note: the URL may be different if you've made adjustments via the HOST or PORT environment variables.

    +

    Note: the URL may be different if you've made adjustments via the HOST or PORT environment variables.

    Start your app by running npm start, and start debugging in VS Code by pressing F5 or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.

    Having problems with VS Code Debugging? Please see their troubleshooting guide.

    @@ -74,7 +74,7 @@ It also only works with npm 3 or higher.

    You would need to have WebStorm and JetBrains IDE Support Chrome extension installed.

    In the WebStorm menu Run select Edit Configurations.... Then click + and select JavaScript Debug. Paste http://localhost:3000 into the URL field and save the configuration.

    -

    Note: the URL may be different if you've made adjustments via the HOST or PORT environment variables.

    +

    Note: the URL may be different if you've made adjustments via the HOST or PORT environment variables.

    Start your app by running npm start, then press ^D on macOS or F9 on Windows and Linux or click the green debug icon to start debugging in WebStorm.

    The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.

    @@ -104,13 +104,20 @@ It also only works with npm 3 or higher.

    // ... }, + "lint-staged": { -+ "src/**/*.{js,jsx,json,css}": [ ++ "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [ + "prettier --single-quote --write", + "git add" + ] + }, "scripts": {     -

    Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}" to format your entire project for the first time.

    +

    Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}" to format your entire project for the first time.

    Next you might want to integrate Prettier in your favorite editor. Read the section on Editor Integration on the Prettier GitHub page.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/supported-browsers-features.html b/docs/supported-browsers-features.html index 7471b0db..57945142 100644 --- a/docs/supported-browsers-features.html +++ b/docs/supported-browsers-features.html @@ -1,4 +1,4 @@ -Supported Browsers and Features · Create React App
    Edit

    Supported Browsers and Features

    Supported Browsers

    By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills.

    Supported Language Features

    This project supports a superset of the latest JavaScript standard. In addition to ES6 syntax features, it also supports:

    @@ -35,10 +35,17 @@
  • Object Rest/Spread Properties (ES2018).
  • Dynamic import() (stage 3 proposal)
  • Class Fields and Static Properties (part of stage 3 proposal).
    • -
  • JSX and Flow syntax.
    • +
  • JSX, Flow and TypeScript.

    • Learn more about different proposal stages.

    While we recommend using experimental proposals with some caution, Facebook heavily uses these features in the product code, so we intend to provide codemods if any of these proposals change in the future.

    Note that this project includes no polyfills by default.

    If you use any other ES6+ features that need runtime support (such as Array.from() or Symbol), make sure you are including the appropriate polyfills manually, or that the browsers you are targeting already support them.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/supported-browsers-features/index.html b/docs/supported-browsers-features/index.html index 7471b0db..57945142 100644 --- a/docs/supported-browsers-features/index.html +++ b/docs/supported-browsers-features/index.html @@ -1,4 +1,4 @@ -Supported Browsers and Features · Create React App
    Edit

    Supported Browsers and Features

    Supported Browsers

    By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills.

    Supported Language Features

    This project supports a superset of the latest JavaScript standard. In addition to ES6 syntax features, it also supports:

    @@ -35,10 +35,17 @@
  • Object Rest/Spread Properties (ES2018).
  • Dynamic import() (stage 3 proposal)
  • Class Fields and Static Properties (part of stage 3 proposal).
    • -
  • JSX and Flow syntax.
    • +
  • JSX, Flow and TypeScript.

    • Learn more about different proposal stages.

    While we recommend using experimental proposals with some caution, Facebook heavily uses these features in the product code, so we intend to provide codemods if any of these proposals change in the future.

    Note that this project includes no polyfills by default.

    If you use any other ES6+ features that need runtime support (such as Array.from() or Symbol), make sure you are including the appropriate polyfills manually, or that the browsers you are targeting already support them.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/title-and-meta-tags.html b/docs/title-and-meta-tags.html index 20ae55a3..c8404045 100644 --- a/docs/title-and-meta-tags.html +++ b/docs/title-and-meta-tags.html @@ -1,4 +1,4 @@ -Title and Meta Tags · Create React App
    Edit

    Title and Meta Tags

    Changing the title tag

    You can find the source HTML file in the public folder of the generated project. You may edit the <title> tag in it to change the title from “React App” to anything else.

    -

    Note that normally you wouldn’t edit files in the public folder very often. For example, adding a stylesheet is done without touching the HTML.

    +

    Note that normally you wouldn’t edit files in the public folder very often. For example, adding a stylesheet is done without touching the HTML.

    If you need to dynamically update the page title based on the content, you can use the browser document.title API. For more complex scenarios when you want to change the title from React components, you can use React Helmet, a third party library.

    -

    If you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in this section. Alternatively, you can pre-build each page as a static HTML file which then loads the JavaScript bundle, which is covered here.

    +

    If you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in this section. Alternatively, you can pre-build each page as a static HTML file which then loads the JavaScript bundle, which is covered here.

    Generating Dynamic <meta> Tags on the Server

    Since Create React App doesn’t support server rendering, you might be wondering how to make <meta> tags dynamic and reflect the current URL. To solve this, we recommend to add placeholders into the HTML, like this:

    <!doctype html>
@@ -50,4 +50,11 @@
     </script>

    Then, on the server, you can replace __SERVER_DATA__ with a JSON of real data right before sending the response. The client code can then read window.SERVER_DATA to use it. Make sure to sanitize the JSON before sending it to the client as it makes your app vulnerable to XSS attacks.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/title-and-meta-tags/index.html b/docs/title-and-meta-tags/index.html index 20ae55a3..c8404045 100644 --- a/docs/title-and-meta-tags/index.html +++ b/docs/title-and-meta-tags/index.html @@ -1,4 +1,4 @@ -Title and Meta Tags · Create React App
    Edit

    Title and Meta Tags

    Changing the title tag

    You can find the source HTML file in the public folder of the generated project. You may edit the <title> tag in it to change the title from “React App” to anything else.

    -

    Note that normally you wouldn’t edit files in the public folder very often. For example, adding a stylesheet is done without touching the HTML.

    +

    Note that normally you wouldn’t edit files in the public folder very often. For example, adding a stylesheet is done without touching the HTML.

    If you need to dynamically update the page title based on the content, you can use the browser document.title API. For more complex scenarios when you want to change the title from React components, you can use React Helmet, a third party library.

    -

    If you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in this section. Alternatively, you can pre-build each page as a static HTML file which then loads the JavaScript bundle, which is covered here.

    +

    If you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in this section. Alternatively, you can pre-build each page as a static HTML file which then loads the JavaScript bundle, which is covered here.

    Generating Dynamic <meta> Tags on the Server

    Since Create React App doesn’t support server rendering, you might be wondering how to make <meta> tags dynamic and reflect the current URL. To solve this, we recommend to add placeholders into the HTML, like this:

    <!doctype html>
@@ -50,4 +50,11 @@
     </script>

    Then, on the server, you can replace __SERVER_DATA__ with a JSON of real data right before sending the response. The client code can then read window.SERVER_DATA to use it. Make sure to sanitize the JSON before sending it to the client as it makes your app vulnerable to XSS attacks.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/troubleshooting.html b/docs/troubleshooting.html index 71f0aa27..28afd438 100644 --- a/docs/troubleshooting.html +++ b/docs/troubleshooting.html @@ -1,4 +1,4 @@ -Troubleshooting · Create React App
    Edit

    Troubleshooting

    npm start doesn’t detect changes

    When you save a file while npm start is running, the browser should refresh with the updated code.
    If this doesn’t happen, try one of the following workarounds:

      @@ -61,7 +61,7 @@ If this doesn’t happen, try one of the following workarounds:

      If you are completely sure that you didn't terminate the process, consider adding some swap space to the machine you’re building on, or build the project locally.

      npm run build fails on Heroku

      This may be a problem with case sensitive filenames. -Please refer to this section.

      +Please refer to this section.

      Moment.js locales are missing

      If you use a Moment.js, you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of all the locales provided by Moment.js.

      To add a specific Moment.js locale to your bundle, you need to import it explicitly.
      @@ -82,4 +82,11 @@ moment.locale('fr');

      npm run build fails to minify

      Before react-scripts@2.0.0, this problem was caused by third party node_modules using modern JavaScript features because the minifier couldn't handle them during the build. This has been solved by compiling standard modern JavaScript features inside node_modules in react-scripts@2.0.0 and higher.

      If you're seeing this error, you're likely using an old version of react-scripts. You can either fix it by avoiding a dependency that uses modern syntax, or by upgrading to react-scripts@>=2.0.0 and following the migration instructions in the changelog.

      -
    ← Previous
    \ No newline at end of file +
    ← Previous
    \ No newline at end of file diff --git a/docs/troubleshooting/index.html b/docs/troubleshooting/index.html index 71f0aa27..28afd438 100644 --- a/docs/troubleshooting/index.html +++ b/docs/troubleshooting/index.html @@ -1,4 +1,4 @@ -Troubleshooting · Create React App
    Edit

    Troubleshooting

    npm start doesn’t detect changes

    When you save a file while npm start is running, the browser should refresh with the updated code.
    If this doesn’t happen, try one of the following workarounds:

      @@ -61,7 +61,7 @@ If this doesn’t happen, try one of the following workarounds:

      If you are completely sure that you didn't terminate the process, consider adding some swap space to the machine you’re building on, or build the project locally.

      npm run build fails on Heroku

      This may be a problem with case sensitive filenames. -Please refer to this section.

      +Please refer to this section.

      Moment.js locales are missing

      If you use a Moment.js, you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of all the locales provided by Moment.js.

      To add a specific Moment.js locale to your bundle, you need to import it explicitly.
      @@ -82,4 +82,11 @@ moment.locale('fr');

      npm run build fails to minify

      Before react-scripts@2.0.0, this problem was caused by third party node_modules using modern JavaScript features because the minifier couldn't handle them during the build. This has been solved by compiling standard modern JavaScript features inside node_modules in react-scripts@2.0.0 and higher.

      If you're seeing this error, you're likely using an old version of react-scripts. You can either fix it by avoiding a dependency that uses modern syntax, or by upgrading to react-scripts@>=2.0.0 and following the migration instructions in the changelog.

      -
    ← Previous
    \ No newline at end of file +
    ← Previous
    \ No newline at end of file diff --git a/docs/updating-to-new-releases.html b/docs/updating-to-new-releases.html index c2c4deb4..8f413a9c 100644 --- a/docs/updating-to-new-releases.html +++ b/docs/updating-to-new-releases.html @@ -1,4 +1,4 @@ -Updating to New Releases · Create React App
    Edit

    Updating to New Releases

    Create React App is divided into two packages:

    • create-react-app is a global command-line utility that you use to create new projects.
    • react-scripts is a development dependency in the generated projects (including this one).
      • @@ -35,4 +35,11 @@

      To update an existing project to a new version of react-scripts, open the changelog, find the version you’re currently on (check package.json in this folder if you’re not sure), and apply the migration instructions for the newer versions.

      In most cases bumping the react-scripts version in package.json and running npm install (or yarn install) in this folder should be enough, but it’s good to consult the changelog for potential breaking changes.

      We commit to keeping the breaking changes minimal so you can upgrade react-scripts painlessly.

      -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/updating-to-new-releases/index.html b/docs/updating-to-new-releases/index.html index c2c4deb4..8f413a9c 100644 --- a/docs/updating-to-new-releases/index.html +++ b/docs/updating-to-new-releases/index.html @@ -1,4 +1,4 @@ -Updating to New Releases · Create React App
    Edit

    Updating to New Releases

    Create React App is divided into two packages:

    • create-react-app is a global command-line utility that you use to create new projects.
    • react-scripts is a development dependency in the generated projects (including this one).
      • @@ -35,4 +35,11 @@

      To update an existing project to a new version of react-scripts, open the changelog, find the version you’re currently on (check package.json in this folder if you’re not sure), and apply the migration instructions for the newer versions.

      In most cases bumping the react-scripts version in package.json and running npm install (or yarn install) in this folder should be enough, but it’s good to consult the changelog for potential breaking changes.

      We commit to keeping the breaking changes minimal so you can upgrade react-scripts painlessly.

      -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/using-global-variables.html b/docs/using-global-variables.html index 283bc718..fb23d658 100644 --- a/docs/using-global-variables.html +++ b/docs/using-global-variables.html @@ -1,4 +1,4 @@ -Using Global Variables · Create React App
    Edit

    Using Global Variables

    When you include a script in the HTML file that defines global variables and try to use one of these variables in the code, the linter will complain because it cannot see the definition of the variable.

    You can avoid this by reading the global variable explicitly from the window object, for example:

    const $ = window.$;

    This makes it obvious you are using a global variable intentionally rather than because of a typo.

    Alternatively, you can force the linter to ignore any line by adding // eslint-disable-line after it.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/using-global-variables/index.html b/docs/using-global-variables/index.html index 283bc718..fb23d658 100644 --- a/docs/using-global-variables/index.html +++ b/docs/using-global-variables/index.html @@ -1,4 +1,4 @@ -Using Global Variables · Create React App
    Edit

    Using Global Variables

    When you include a script in the HTML file that defines global variables and try to use one of these variables in the code, the linter will complain because it cannot see the definition of the variable.

    You can avoid this by reading the global variable explicitly from the window object, for example:

    const $ = window.$;

    This makes it obvious you are using a global variable intentionally rather than because of a typo.

    Alternatively, you can force the linter to ignore any line by adding // eslint-disable-line after it.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/using-https-in-development.html b/docs/using-https-in-development.html index f20cc357..8ba91f8f 100644 --- a/docs/using-https-in-development.html +++ b/docs/using-https-in-development.html @@ -1,4 +1,4 @@ -Using HTTPS in Development · Create React App
    Edit

    Using HTTPS in Development

    Note: this feature is available with react-scripts@0.4.0 and higher.

    -

    You may require the dev server to serve pages over HTTPS. One particular case where this could be useful is when using the "proxy" feature to proxy requests to an API server when that API server is itself serving HTTPS.

    +

    You may require the dev server to serve pages over HTTPS. One particular case where this could be useful is when using the "proxy" feature to proxy requests to an API server when that API server is itself serving HTTPS.

    To do this, set the HTTPS environment variable to true, then start the dev server as usual with npm start:

    Windows (cmd.exe)

    set HTTPS=true&&npm start
@@ -41,4 +41,11 @@
 
    HTTPS=true npm start
 
    
 
    Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.
    
-
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/using-https-in-development/index.html b/docs/using-https-in-development/index.html index f20cc357..8ba91f8f 100644 --- a/docs/using-https-in-development/index.html +++ b/docs/using-https-in-development/index.html @@ -1,4 +1,4 @@ -Using HTTPS in Development · Create React App
    Edit

    Using HTTPS in Development

    Note: this feature is available with react-scripts@0.4.0 and higher.

    -

    You may require the dev server to serve pages over HTTPS. One particular case where this could be useful is when using the "proxy" feature to proxy requests to an API server when that API server is itself serving HTTPS.

    +

    You may require the dev server to serve pages over HTTPS. One particular case where this could be useful is when using the "proxy" feature to proxy requests to an API server when that API server is itself serving HTTPS.

    To do this, set the HTTPS environment variable to true, then start the dev server as usual with npm start:

    Windows (cmd.exe)

    set HTTPS=true&&npm start
@@ -41,4 +41,11 @@
 
    HTTPS=true npm start
 
    
 
    Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.
    
-
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/using-the-public-folder.html b/docs/using-the-public-folder.html index e6f2d1e2..c245cc53 100644 --- a/docs/using-the-public-folder.html +++ b/docs/using-the-public-folder.html @@ -1,4 +1,4 @@ -Using the Public Folder · Create React App
    Edit

    Using the Public Folder

    Note: this feature is available with react-scripts@0.5.0 and higher.

    Changing the HTML

    -

    The public folder contains the HTML file so you can tweak it, for example, to set the page title. +

    The public folder contains the HTML file so you can tweak it, for example, to set the page title. The <script> tag with the compiled code will be added to it automatically during the build process.

    Adding Assets Outside of the Module System

    You can also add other assets to the public folder.

    Note that we normally encourage you to import assets in JavaScript files instead. -For example, see the sections on adding a stylesheet and adding images and fonts. +For example, see the sections on adding a stylesheet and adding images and fonts. This mechanism provides a number of benefits:

    • Scripts and stylesheets get minified and bundled together to avoid extra network requests.
      • @@ -63,7 +63,7 @@ This mechanism provides a number of benefits:

    • Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change.

    When to Use the public Folder

    -

    Normally we recommend importing stylesheets, images, and fonts from JavaScript. +

    Normally we recommend importing stylesheets, images, and fonts from JavaScript. The public folder is useful as a workaround for a number of less common cases:

    • You need a file with a specific name in the build output, such as manifest.webmanifest.
      • @@ -72,4 +72,11 @@ The public folder is useful as a workaround for a number of less co
    • Some library may be incompatible with Webpack and you have no other option but to include it as a <script> tag.

    Note that if you add a <script> that declares global variables, you also need to read the next section on using them.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/docs/using-the-public-folder/index.html b/docs/using-the-public-folder/index.html index e6f2d1e2..c245cc53 100644 --- a/docs/using-the-public-folder/index.html +++ b/docs/using-the-public-folder/index.html @@ -1,4 +1,4 @@ -Using the Public Folder · Create React App
    Edit

    Using the Public Folder

    Note: this feature is available with react-scripts@0.5.0 and higher.

    Changing the HTML

    -

    The public folder contains the HTML file so you can tweak it, for example, to set the page title. +

    The public folder contains the HTML file so you can tweak it, for example, to set the page title. The <script> tag with the compiled code will be added to it automatically during the build process.

    Adding Assets Outside of the Module System

    You can also add other assets to the public folder.

    Note that we normally encourage you to import assets in JavaScript files instead. -For example, see the sections on adding a stylesheet and adding images and fonts. +For example, see the sections on adding a stylesheet and adding images and fonts. This mechanism provides a number of benefits:

    • Scripts and stylesheets get minified and bundled together to avoid extra network requests.
      • @@ -63,7 +63,7 @@ This mechanism provides a number of benefits:

    • Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change.

    When to Use the public Folder

    -

    Normally we recommend importing stylesheets, images, and fonts from JavaScript. +

    Normally we recommend importing stylesheets, images, and fonts from JavaScript. The public folder is useful as a workaround for a number of less common cases:

    • You need a file with a specific name in the build output, such as manifest.webmanifest.
      • @@ -72,4 +72,11 @@ The public folder is useful as a workaround for a number of less co
    • Some library may be incompatible with Webpack and you have no other option but to include it as a <script> tag.

    Note that if you add a <script> that declares global variables, you also need to read the next section on using them.

    -
    ← PreviousNext →
    \ No newline at end of file +
    ← PreviousNext →
    \ No newline at end of file diff --git a/en/index.html b/en/index.html index 6ee6e9c6..53ebb655 100644 --- a/en/index.html +++ b/en/index.html @@ -1,4 +1,4 @@ -Create React App · Set up a modern web app by running one command.

    Create React AppSet up a modern web app by running one command.

    Get Started

    Less to Learn

    +Create React App · Set up a modern web app by running one command.

    Create React AppSet up a modern web app by running one command.

    Get Started

    Less to Learn

    You don't need to learn and configure many build tools. Instant reloads help you focus on development. When it's time to deploy, your bundles are optimized automatically.

    Only One Dependency

    Your app only needs one build dependency. We test Create React App to make sure that all of its underlying pieces work together seamlessly – no complicated version mismatches.

    @@ -13,4 +13,11 @@

    Updating your build tooling is typically a daunting and time-consuming task. When new versions of Create React App are released, you can upgrade using a single command:

    npm install react-scripts@latest
    -
    \ No newline at end of file + \ No newline at end of file diff --git a/index.html b/index.html index c25f10c3..df673bb5 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ -Create React App · Set up a modern web app by running one command.

    Create React AppSet up a modern web app by running one command.

    Get Started

    Less to Learn

    +Create React App · Set up a modern web app by running one command.

    Create React AppSet up a modern web app by running one command.

    Get Started

    Less to Learn

    You don't need to learn and configure many build tools. Instant reloads help you focus on development. When it's time to deploy, your bundles are optimized automatically.

    Only One Dependency

    Your app only needs one build dependency. We test Create React App to make sure that all of its underlying pieces work together seamlessly – no complicated version mismatches.

    @@ -13,4 +13,11 @@

    Updating your build tooling is typically a daunting and time-consuming task. When new versions of Create React App are released, you can upgrade using a single command:

    npm install react-scripts@latest
    -
    \ No newline at end of file + \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index 52529cba..a93d5cdc 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -10,6 +10,7 @@ https://facebook.github.io/create-react-app/docs/adding-flow hourly 1.0 https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files hourly 1.0 https://facebook.github.io/create-react-app/docs/adding-relay hourly 1.0 + https://facebook.github.io/create-react-app/docs/adding-typescript hourly 1.0 https://facebook.github.io/create-react-app/docs/advanced-configuration hourly 1.0 https://facebook.github.io/create-react-app/docs/alternatives-to-ejecting hourly 1.0 https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size hourly 1.0