diff --git a/.eslintignore b/.eslintignore index 27c694cea55..2628bc87bab 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,6 +1,4 @@ node_modules/ -build -my-app* -packages/react-scripts/template -packages/react-scripts/fixtures -fixtures/ +build/ +test/fixtures/webpack-message-formatting/src/AppBabel.js +packages/react-error-overlay/lib/ diff --git a/.eslintrc.json b/.eslintrc.json index 40029410cce..7d6e9efcca0 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -14,5 +14,39 @@ "no-console": "off", "strict": ["error", "global"], "curly": "warn" - } + }, + "overrides": [ + { + "files": [ + "docusaurus/website/src/**/*.js", + "packages/cra-template/**/*.js", + "packages/react-error-overlay/**/*.js", + "packages/react-scripts/fixtures/kitchensink/template/{src,integration}/**/*.js", + "test/fixtures/*/src/*.js" + ], + "excludedFiles": ["packages/react-error-overlay/*.js"], + "extends": ["react-app", "react-app/jest"] + }, + { + "files": [ + "test/fixtures/webpack-message-formatting/src/{AppLintError,AppLintWarning,AppUnknownFile}.js" + ], + "rules": { + "no-unused-vars": "off", + "no-undef": "off" + } + }, + { + "files": ["test/fixtures/webpack-message-formatting/src/Export5.js"], + "rules": { + "import/no-anonymous-default-export": "off" + } + }, + { + "files": ["test/fixtures/issue-5176-flow-class-properties/src/App.js"], + "rules": { + "no-dupe-class-members": "off" + } + } + ] } diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 0f391681bef..2e093282727 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -103,9 +103,7 @@ labels: 'issue: bug report, needs triage' (Write your steps here:) -1. -2. -3. +1. 2. 3. ### Expected behavior diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 00000000000..c5fea8809f2 --- /dev/null +++ b/.github/workflows/build.yml @@ -0,0 +1,19 @@ +name: Build + +on: [push, pull_request] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v2 + with: + node-version: '14' + cache: 'npm' + - name: Install npm@8 + run: npm i -g npm@8 + - name: Install + run: npm ci --prefer-offline + - name: Build + run: npm run build diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml new file mode 100644 index 00000000000..456951bc671 --- /dev/null +++ b/.github/workflows/lint.yml @@ -0,0 +1,25 @@ +name: Lint + +on: [push, pull_request] + +jobs: + lint: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v2 + with: + node-version: '14' + cache: 'npm' + - name: Install npm@8 + run: npm i -g npm@8 + - name: Install + run: npm ci --prefer-offline + - name: Build + run: npm run build + - name: Alex + run: npm run alex + - name: Prettier + run: npm run prettier -- --list-different + - name: Eslint + run: npm run eslint -- --max-warnings 0 diff --git a/.gitignore b/.gitignore index 6a18e55b090..c675f132867 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ .idea/ .vscode/ node_modules/ -build +build/ .DS_Store *.tgz my-app* diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000000..18a58d393ef --- /dev/null +++ b/.prettierignore @@ -0,0 +1,9 @@ +build/ +package-lock.json +test/fixtures/webpack-message-formatting/src/AppBabel.js +test/fixtures/webpack-message-formatting/src/AppCss.css +packages/react-error-overlay/fixtures/bundle* +packages/react-error-overlay/fixtures/inline* +packages/react-error-overlay/fixtures/junk* +packages/react-error-overlay/lib/ +packages/react-error-overlay/coverage/ diff --git a/.travis.yml b/.travis.yml index c9daafb639e..0bd065e343a 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,65 +1,39 @@ +--- +dist: trusty language: node_js node_js: - - "16" + - 8 + - 10 + - node +cache: + yarn: true + directories: + - .npm before_install: - - git config --global url."https://git@".insteadOf git:// - - echo -e "machine github.com\n login $CI_USER_TOKEN" > ~/.netrc - - echo "//familysearch.jfrog.io/familysearch/api/npm/fs-npm-prod-virtual/:_authToken=${NPM_PUBLISH_TOKEN}" >> ~/.npmrc - - echo "@fs:registry=https://familysearch.jfrog.io/familysearch/api/npm/fs-npm-prod-virtual/" >> ~/.npmrc - # because this is a weird monorepo and we cd into and out of directories, this is what worked for travis to publish - - echo "//familysearch.jfrog.io/familysearch/api/npm/fs-npm-prod-virtual/:_authToken=${NPM_PUBLISH_TOKEN}" >> packages/react-scripts/.npmrc - - echo "@fs:registry=https://familysearch.jfrog.io/familysearch/api/npm/fs-npm-prod-virtual/" >> packages/react-scripts/.npmrc -install: - - npm install - - cd packages/react-scripts - - npm install - - cd ../../ + - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --nightly + - export PATH="$HOME/.yarn/bin:$PATH" +install: true script: - - npm test - - - node publishPrReleaseAndCreateFreshCraTemplate.js - - # ${HOME}/tmp/fresh-cra-template was created in script above - - cd ${HOME}/tmp/fresh-cra-template - - # this is necessary so we can do some additional npm installs in the freshCraTemplateUpdate.sh script - - echo "//familysearch.jfrog.io/familysearch/api/npm/fs-npm-prod-virtual/:_authToken=${NPM_PUBLISH_TOKEN}" >> ${HOME}/tmp/fresh-cra-template/.npmrc - - echo "@fs:registry=https://familysearch.jfrog.io/familysearch/api/npm/fs-npm-prod-virtual/" >> ${HOME}/tmp/fresh-cra-template/.npmrc - - - CI=true npm test - - # Building the app so freshCraTemplateUpdate.sh can publish it - - npm run build -before_deploy: "cd ${TRAVIS_BUILD_DIR}/packages/react-scripts" -deploy: - - provider: script - edge: true - cleanup: false - dpl_version: 2.0.3.beta.4 - script: npm run fs-publish -- --allow-earlier-version - on: - branch: frontierMaster - - provider: script - edge: true - cleanup: false - dpl_version: 2.0.3.beta.4 - script: npm run fs-publish -- --allow-earlier-version - on: - branch: v7.x - - provider: script - edge: true - cleanup: false - dpl_version: 2.0.3.beta.4 - script: npm run fs-publish -- --allow-earlier-version - on: - branch: next - - provider: script - edge: true - cleanup: false - dpl_version: 2.0.3.beta.4 - script: cd ${TRAVIS_BUILD_DIR} && ./freshCraTemplateUpdate.sh - on: - branch: frontierMaster + - 'if [ $TEST_SUITE = "simple" ]; then tasks/e2e-simple.sh; fi' + - 'if [ $TEST_SUITE = "installs" ]; then tasks/e2e-installs.sh; fi' + - 'if [ $TEST_SUITE = "kitchensink" ]; then tasks/e2e-kitchensink.sh; fi' + - 'if [ $TEST_SUITE = "kitchensink-eject" ]; then tasks/e2e-kitchensink-eject.sh; fi' + - 'if [ $TEST_SUITE = "old-node" ]; then tasks/e2e-old-node.sh; fi' + - 'if [ $TEST_SUITE = "behavior" ]; then tasks/e2e-behavior.sh; fi' +env: + matrix: + - TEST_SUITE=simple + - TEST_SUITE=installs + - TEST_SUITE=kitchensink + - TEST_SUITE=kitchensink-eject + - TEST_SUITE=behavior +matrix: + include: + - os: osx + node_js: 8 + env: TEST_SUITE=behavior + - node_js: 6 + env: TEST_SUITE=old-node # This tells travis to not build when the branch is master. This is important to have on our master # branch as well because anytime we merge upstream changes from facebook, travis builds their whole matrix of 24 different builds. # We do NOT need or want that to occur. Please leave this branches.except here, even on the master branch diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md index f797a8e54a3..e323e347457 100644 --- a/CHANGELOG-1.x.md +++ b/CHANGELOG-1.x.md @@ -298,7 +298,7 @@ yarn add --exact react-scripts@1.1.1 - David Gilbertson ([davidgilbertson](https://github.com/davidgilbertson)) - Eli Perelman ([eliperelman](https://github.com/eliperelman)) - Elie ([elie222](https://github.com/elie222)) -- Ernesto García ([gnapse](https://github.com/gnapse)) +- Ernesto Garc??a ([gnapse](https://github.com/gnapse)) - Evan You ([yyx990803](https://github.com/yyx990803)) - Gavin Gilmour ([gaving](https://github.com/gaving)) - Ian Schmitz ([ianschmitz](https://github.com/ianschmitz)) @@ -308,7 +308,7 @@ yarn add --exact react-scripts@1.1.1 - Joe Haddad ([Timer](https://github.com/Timer)) - Joe Lim ([xjlim](https://github.com/xjlim)) - Jonathan ([GreenGremlin](https://github.com/GreenGremlin)) -- Juhamatti Niemelä ([iiska](https://github.com/iiska)) +- Juhamatti Niemel?? ([iiska](https://github.com/iiska)) - Mae Capozzi ([maecapozzi](https://github.com/maecapozzi)) - Maksym Dogadailo ([mdogadailo](https://github.com/mdogadailo)) - Mario Nebl ([marionebl](https://github.com/marionebl)) @@ -317,14 +317,14 @@ yarn add --exact react-scripts@1.1.1 - Moos ([moos](https://github.com/moos)) - Nils Magnus Englund ([nmenglund](https://github.com/nmenglund)) - Norris Oduro ([Norris1z](https://github.com/Norris1z)) -- Ovidiu Cherecheș ([skidding](https://github.com/skidding)) +- Ovidiu Chereche?? ([skidding](https://github.com/skidding)) - Quentin Bahers ([qbahers](https://github.com/qbahers)) - Rafael E. Poveda ([raerpo](https://github.com/raerpo)) - Rahul Chanila ([rahulcs](https://github.com/rahulcs)) - Ryan McCue ([rmccue](https://github.com/rmccue)) - Sascha Dens ([SaschaDens](https://github.com/SaschaDens)) - Siddharth Doshi ([doshisid](https://github.com/doshisid)) -- Tao Gómez Gil ([Gua-naiko-che](https://github.com/Gua-naiko-che)) +- Tao G??mez Gil ([Gua-naiko-che](https://github.com/Gua-naiko-che)) - Tharaka Wijebandara ([tharakawj](https://github.com/tharakawj)) - Trevor Brindle ([tabrindle](https://github.com/tabrindle)) - Ulrik Strid ([ulrikstrid](https://github.com/ulrikstrid)) @@ -382,7 +382,7 @@ or yarn add --exact react-scripts@1.0.17 ``` -## 1.0.16 (October 31, 2017) 🎃 +## 1.0.16 (October 31, 2017) ???? #### :bug: Bug Fix @@ -492,22 +492,22 @@ yarn add --exact react-scripts@1.0.16 - Aaron Shafovaloff ([aaronshaf](https://github.com/aaronshaf)) - Alex ([alexkrolick](https://github.com/alexkrolick)) -- André Ericson ([aericson](https://github.com/aericson)) +- Andr?? Ericson ([aericson](https://github.com/aericson)) - Dan Abramov ([gaearon](https://github.com/gaearon)) - David Beitey ([davidjb](https://github.com/davidjb)) -- Hrvoje Šimić ([shime](https://github.com/shime)) +- Hrvoje ??imi?? ([shime](https://github.com/shime)) - IJAJ MULANI ([ijajmulani](https://github.com/ijajmulani)) - Joe Haddad ([Timer](https://github.com/Timer)) - Joe Lim ([xjlim](https://github.com/xjlim)) - Jonny Buchanan ([insin](https://github.com/insin)) - Josh Branchaud ([jbranchaud](https://github.com/jbranchaud)) - Joshua Wiens ([d3viant0ne](https://github.com/d3viant0ne)) -- Kévin Dunglas ([dunglas](https://github.com/dunglas)) +- K??vin Dunglas ([dunglas](https://github.com/dunglas)) - Lorenzo Palmes ([lpalmes](https://github.com/lpalmes)) - Matt Phillips ([mattphillips](https://github.com/mattphillips)) - Mohamed Oun ([Mohamed3on](https://github.com/Mohamed3on)) - Nik Nyby ([nikolas](https://github.com/nikolas)) -- Petr Huřťák ([Hurtak](https://github.com/Hurtak)) +- Petr Hu??????k ([Hurtak](https://github.com/Hurtak)) - Robert Panzer ([robertpanzer](https://github.com/robertpanzer)) - Ryan Sullivan ([ryansully](https://github.com/ryansully)) - Satya van Heummen ([satyavh](https://github.com/satyavh)) @@ -728,7 +728,7 @@ or yarn add --exact react-scripts@1.0.12 ``` -**Note:** there’s a [known issue](https://github.com/facebook/create-react-app/issues/3041) that might cause the project to not compile after upgrading. In this case, migrate straight to `1.0.13` which doesn’t have this issue. +**Note:** there???s a [known issue](https://github.com/facebook/create-react-app/issues/3041) that might cause the project to not compile after upgrading. In this case, migrate straight to `1.0.13` which doesn???t have this issue. ## 1.0.11 (August 9, 2017) @@ -823,19 +823,19 @@ yarn add --exact react-scripts@1.0.12 - Forbes Lindesay ([ForbesLindesay](https://github.com/ForbesLindesay)) - Joe Haddad ([Timer](https://github.com/Timer)) - Jon Crenshaw ([jdcrensh](https://github.com/jdcrensh)) -- Kiho · Cham ([monkindey](https://github.com/monkindey)) +- Kiho ?? Cham ([monkindey](https://github.com/monkindey)) - Konstantin Tarkus ([koistya](https://github.com/koistya)) - Kristoffer ([denkristoffer](https://github.com/denkristoffer)) - Mostafa Hajizadeh ([mostafah](https://github.com/mostafah)) -- Oskar Köök ([oskarkook](https://github.com/oskarkook)) +- Oskar K????k ([oskarkook](https://github.com/oskarkook)) - Owen Flood ([OwenFlood](https://github.com/OwenFlood)) -- Stéphane Goetz ([onigoetz](https://github.com/onigoetz)) +- St??phane Goetz ([onigoetz](https://github.com/onigoetz)) - Trygve Aaberge ([trygveaa](https://github.com/trygveaa)) - Wiley Bennett ([wileybenet](https://github.com/wileybenet)) - [iamdoron](https://github.com/iamdoron) - [themre](https://github.com/themre) - zeel ([zeel](https://github.com/zeel)) -- Đinh Quang Trung ([trungdq88](https://github.com/trungdq88)) +- ??inh Quang Trung ([trungdq88](https://github.com/trungdq88)) ### Migrating from 1.0.10 to 1.0.11 @@ -1057,7 +1057,7 @@ yarn add --exact react-scripts@1.0.9 - Erik Engi ([kireerik](https://github.com/kireerik)) - Evan Jones ([mini-eggs](https://github.com/mini-eggs)) - Fabrizio Castellarin ([EnoahNetzach](https://github.com/EnoahNetzach)) -- Frédéric Miserey ([diligiant](https://github.com/diligiant)) +- Fr??d??ric Miserey ([diligiant](https://github.com/diligiant)) - Gabriel Aumala ([GAumala](https://github.com/GAumala)) - Glenn Reyes ([glennreyes](https://github.com/glennreyes)) - Heng Li ([iheng](https://github.com/iheng)) @@ -1077,13 +1077,13 @@ yarn add --exact react-scripts@1.0.9 - Mico Piira ([micopiira](https://github.com/micopiira)) - Mikhail Osher ([miraage](https://github.com/miraage)) - Norbert de Langen ([ndelangen](https://github.com/ndelangen)) -- Paweł Jędrzejczyk ([paweljedrzejczyk](https://github.com/paweljedrzejczyk)) -- Pete Nykänen ([petetnt](https://github.com/petetnt)) +- Pawe?? J??drzejczyk ([paweljedrzejczyk](https://github.com/paweljedrzejczyk)) +- Pete Nyk??nen ([petetnt](https://github.com/petetnt)) - Ro Savage ([ro-savage](https://github.com/ro-savage)) - Roman ([romanyanke](https://github.com/romanyanke)) - Rustem Kakimov ([ruskakimov](https://github.com/ruskakimov)) - Ryan Sullivan ([ryansully](https://github.com/ryansully)) -- Stanislas Ormières ([laruiss](https://github.com/laruiss)) +- Stanislas Ormi??res ([laruiss](https://github.com/laruiss)) - Will Farley ([goldhand](https://github.com/goldhand)) - Zac Kwan ([Zaccc123](https://github.com/Zaccc123)) - [bryankang](https://github.com/bryankang) @@ -1106,9 +1106,9 @@ yarn add --dev --exact react-scripts@1.0.8 **If you previously used `HTTPS=true` environment variable in development**, make sure you aren't affected by a now-fixed vulnerability in webpack by [visiting this page](http://badcert.mike.works/). You can read more about the vulnerability [here](https://medium.com/@mikenorth/webpack-preact-cli-vulnerability-961572624c54). -You may optionally then move `react-scripts` from `devDependencies` to `dependencies` since that’s how we’ll structure newly created projects. It is not necessary though. +You may optionally then move `react-scripts` from `devDependencies` to `dependencies` since that???s how we???ll structure newly created projects. It is not necessary though. -If you left the service worker integration enabled and didn’t change how it works, you can replace `src/registerServiceWorker.js` with [this updated version](https://raw.githubusercontent.com/facebook/create-react-app/895c475d3fc218c65dcac9a3ef3f2c0ea746a1ed/packages/react-scripts/template/src/registerServiceWorker.js). +If you left the service worker integration enabled and didn???t change how it works, you can replace `src/registerServiceWorker.js` with [this updated version](https://raw.githubusercontent.com/facebook/create-react-app/895c475d3fc218c65dcac9a3ef3f2c0ea746a1ed/packages/react-scripts/template/src/registerServiceWorker.js). If you haven't changed the default CSS organization, you may want to apply [this fix](https://github.com/facebook/create-react-app/pull/2470/files) that makes `index.css` take precedence over `App.css` in your project. @@ -1278,7 +1278,7 @@ yarn add --dev --exact react-scripts@1.0.4 - `react-dev-utils` - - [#2297](https://github.com/facebook/create-react-app/pull/2297) Don’t serve the development version from public IPs by default. ([@Timer](https://github.com/Timer)) + - [#2297](https://github.com/facebook/create-react-app/pull/2297) Don???t serve the development version from public IPs by default. ([@Timer](https://github.com/Timer)) - `eslint-config-react-app` @@ -1443,10 +1443,10 @@ yarn add --dev --exact react-scripts@1.0.1 ## 1.0.0 (May 18, 2017) -We’ve been working on this release for the past few months, and there are many big improvements, from migrating to webpack 2 to a brand new runtime error overlay and built-in support for Progressive Web Apps. +We???ve been working on this release for the past few months, and there are many big improvements, from migrating to webpack 2 to a brand new runtime error overlay and built-in support for Progressive Web Apps. So instead of just enumerating them here, we decided to write a blog post about all the new features.
-Check it out: **[What’s New in Create React App](https://facebook.github.io/react/blog/2017/05/18/whats-new-in-create-react-app.html)**. +Check it out: **[What???s New in Create React App](https://facebook.github.io/react/blog/2017/05/18/whats-new-in-create-react-app.html)**. Have you read it? Now let's see how to update your app to the latest version. @@ -1481,7 +1481,7 @@ To remedy this, simply move any files that you `import` within `src/` and update If you used relative imports outside the project directory as a way to share code with another project, consider using a [monorepo](https://github.com/lerna/lerna) instead, so that other projects are symlinked to your project's `node_modules/`. Then you can import them as a Node modules. -While running `npm test`, you may notice some of your tests are missing. Please move any top-level test directory (i.e. `__test__`, `__spec__`) or files (i.e. `*.test.js`, `*.spec.js`) into `src/`. Conversely, if you have some similarly named files that you _don’t_ want Jest to run, move them outside of `src/`. +While running `npm test`, you may notice some of your tests are missing. Please move any top-level test directory (i.e. `__test__`, `__spec__`) or files (i.e. `*.test.js`, `*.spec.js`) into `src/`. Conversely, if you have some similarly named files that you _don???t_ want Jest to run, move them outside of `src/`. #### Import required locales for Moment.js @@ -1570,7 +1570,7 @@ If you still have the problem please file an issue. #### Some of my tests started crashing because of unhandled rejections -Unhandled Promise rejections will now crash tests. You can fix them by explicitly catching the errors you don’t care about. +Unhandled Promise rejections will now crash tests. You can fix them by explicitly catching the errors you don???t care about. #### How to turn my app into a [Progressive Web App](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#making-a-progressive-web-app)? diff --git a/README.md b/README.md index 0849def9cb6..01dae1d14fc 100644 --- a/README.md +++ b/README.md @@ -178,7 +178,7 @@ Create React App is a great fit for: Here are a few common cases where you might want to try something else: -- If you want to **try React** without hundreds of transitive build tool dependencies, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html). +- If you want to **try React** without hundreds of transitive build tool dependencies, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/getting-started.html#try-react). - If you need to **integrate React code with a server-side template framework** like Rails, Django or Symfony, or if you’re **not building a single-page app**, consider using [nwb](https://github.com/insin/nwb), or [Neutrino](https://neutrino.js.org/) which are more flexible. For Rails specifically, you can use [Rails Webpacker](https://github.com/rails/webpacker). For Symfony, try [Symfony's webpack Encore](https://symfony.com/doc/current/frontend/encore/reactjs.html). @@ -192,7 +192,7 @@ Here are a few common cases where you might want to try something else: All of the above tools can work with little to no configuration. -If you prefer configuring the build yourself, [follow this guide](https://reactjs.org/docs/add-react-to-an-existing-app.html). +If you prefer configuring the build yourself, [follow this guide](https://reactjs.org/docs/add-react-to-a-website.html). ## React Native diff --git a/docusaurus/docs/adding-a-router.md b/docusaurus/docs/adding-a-router.md index 3dda1baac86..eae27dc501f 100644 --- a/docusaurus/docs/adding-a-router.md +++ b/docusaurus/docs/adding-a-router.md @@ -3,12 +3,12 @@ id: adding-a-router title: Adding a Router --- -Create React App doesn't prescribe a specific routing solution, but [React Router](https://reacttraining.com/react-router/web/) is the most popular one. +Create React App doesn't prescribe a specific routing solution, but [React Router](https://reactrouter.com/) is the most popular one. To add it, run: ```sh -npm install --save react-router-dom +npm install react-router-dom ``` Alternatively you may use `yarn`: @@ -17,6 +17,6 @@ Alternatively you may use `yarn`: yarn add react-router-dom ``` -To try it, delete all the code in `src/App.js` and replace it with any of the examples on its website. The [Basic Example](https://reacttraining.com/react-router/web/example/basic) is a good place to get started. +To try it, delete all the code in `src/App.js` and replace it with any of the examples on its website. The [Basic Example](https://reactrouter.com/docs/examples/basic) is a good place to get started. For more info on adding routes, check out [the React Router docs on adding routes](https://reactrouter.com/docs/getting-started/tutorial#add-some-routes). Note that [you may need to configure your production server to support client-side routing](deployment.md#serving-apps-with-client-side-routing) before deploying your app. diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 75ebe493a3e..d94bccc4920 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -14,7 +14,9 @@ To start a new Create React App project with [TypeScript](https://www.typescript ```sh npx create-react-app my-app --template typescript ``` + or + ```sh yarn create react-app my-app --template typescript ``` @@ -28,12 +30,16 @@ To add [TypeScript](https://www.typescriptlang.org/) to an existing Create React ```sh npm install --save typescript @types/node @types/react @types/react-dom @types/jest ``` + or + ```sh 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**! +Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index.tsx`) and create tsconfig.json if it's not in the root of your project [`tsconfig.json` file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). + +Finally **restart your development server**! Type errors will show up in the same console as the build one. You'll have to fix these type errors before you continue development or build your project. For advanced configuration, [see here](advanced-configuration.md). diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index 34144ce6040..1e5358e537b 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -15,7 +15,7 @@ You can adjust various development and production settings by setting environmen | PORT | ✅ Used | 🚫 Ignored | By 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 | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. | | WDS_SOCKET_HOST | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket hostname for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.hostname` for the SockJS hostname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockhost) for more details. | -| WDS_SOCKET_PATH | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/ws` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details. | +| WDS_SOCKET_PATH | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/ws` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details. | | WDS_SOCKET_PORT | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket port for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.port` for the SockJS port. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockport) for more details. | | PUBLIC_URL | ✅ Used | ✅ Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). 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. | | BUILD_PATH | 🚫 Ignored | ✅ Used | By default, Create React App will output compiled assets to a `/build` directory adjacent to your `/src`. You may use this variable to specify a new path for Create React App to output assets. BUILD_PATH should be specified as a path relative to the root of your project. | @@ -24,7 +24,7 @@ You can adjust various development and production settings by setting environmen | CHOKIDAR_USEPOLLING | ✅ Used | 🚫 Ignored | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes. | | GENERATE_SOURCEMAP | 🚫 Ignored | ✅ Used | When set to `false`, source maps are not generated for a production build. This solves out of memory (OOM) issues on some smaller machines. | | INLINE_RUNTIME_CHUNK | 🚫 Ignored | ✅ Used | By 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. | -| IMAGE_INLINE_SIZE_LIMIT | ✅ Used | ✅ Used | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to `0` will disable the inlining of images. | +| IMAGE_INLINE_SIZE_LIMIT | ✅ Used | ✅ Used | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to `0` will disable the inlining of images. | | FAST_REFRESH | ✅ Used | 🚫 Ignored | When set to `false`, disables experimental support for Fast Refresh to allow you to tweak your components in real time without reloading the page. | | TSC_COMPILE_ON_ERROR | ✅ Used | ✅ Used | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console. | | ESLINT_NO_DEV_ERRORS | ✅ Used | 🚫 Ignored | When set to `true`, ESLint errors are converted to warnings during development. As a result, ESLint output will no longer appear in the error overlay. | diff --git a/docusaurus/docs/deployment.md b/docusaurus/docs/deployment.md index 635793810ba..14a29997761 100644 --- a/docusaurus/docs/deployment.md +++ b/docusaurus/docs/deployment.md @@ -318,13 +318,13 @@ The `predeploy` script will run automatically before `deploy` is run. If you are deploying to a GitHub user page instead of a project page you'll need to make one additional modification: -1. Tweak your `package.json` scripts to push deployments to **master**: +1. Tweak your `package.json` scripts to push deployments to **main**: ```diff "scripts": { "predeploy": "npm run build", - "deploy": "gh-pages -d build", -+ "deploy": "gh-pages -b master -d build", ++ "deploy": "gh-pages -b main -d build", ``` ### Step 3: Deploy the site by running `npm run deploy` @@ -378,7 +378,7 @@ If, when deploying, you get `Cannot read property 'email' of null`, try the foll ## [Heroku](https://www.heroku.com/) -Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack). +Use the [Heroku Buildpack for Create React App](https://github.com/heroku/heroku-buildpack-nodejs). You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration). diff --git a/docusaurus/docs/developing-components-in-isolation.md b/docusaurus/docs/developing-components-in-isolation.md index 90baae5a1de..a0fce33f02d 100644 --- a/docusaurus/docs/developing-components-in-isolation.md +++ b/docusaurus/docs/developing-components-in-isolation.md @@ -14,7 +14,7 @@ Usually, it’s hard to see these states without running a sample app or some ex Create React App doesn’t include any tools for this by default, but you can add [Storybook for React](https://storybook.js.org) ([source](https://github.com/storybooks/storybook)) or [React Styleguidist](https://react-styleguidist.js.org/) ([source](https://github.com/styleguidist/react-styleguidist)) to your project. **These are third-party tools that let you develop components and see all their states in isolation from your app**. -![Storybook for React Demo](https://i.imgur.com/7CIAWpB.gif) +![Storybook for React Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/docs/get-started/storybook-third-party-docs.gif) You can also deploy your Storybook or style guide as a static app. This way, everyone in your team can view and review different states of UI components without starting a backend server or creating an account in your app. @@ -25,15 +25,15 @@ Storybook is a development environment for React UI components. It allows you to Run the following command inside your app’s directory: ```sh -npx -p @storybook/cli sb init +npx sb init ``` After that, follow the instructions on the screen. Learn more about React Storybook: -- [Learn Storybook (tutorial)](https://learnstorybook.com) -- [Documentation](https://storybook.js.org/basics/introduction/) +- [Learn Storybook (tutorial)](https://storybook.js.org/tutorials/) +- [Documentation](https://storybook.js.org/docs/react/get-started/introduction) - [GitHub Repo](https://github.com/storybooks/storybook) - [Snapshot Testing UI](https://github.com/storybooks/storybook/tree/master/addons/storyshots) with Storybook + addon/storyshot diff --git a/docusaurus/docs/getting-started.md b/docusaurus/docs/getting-started.md index 9990a64cb76..ef7da3006f0 100644 --- a/docusaurus/docs/getting-started.md +++ b/docusaurus/docs/getting-started.md @@ -41,7 +41,7 @@ To create a new app, you may choose one of the following methods: ### npx ```sh -npx create-react-app my-app +npx create-react-app@latest my-app ``` _([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_ diff --git a/docusaurus/docs/loading-graphql-files.md b/docusaurus/docs/loading-graphql-files.md index 1d50dcc9875..aa72e5af475 100644 --- a/docusaurus/docs/loading-graphql-files.md +++ b/docusaurus/docs/loading-graphql-files.md @@ -57,7 +57,7 @@ You can also use the `gql` template tag the same way you would use the non-macro ```js import { gql } from 'graphql.macro'; - + const query = gql` query User { user(id: 5) { diff --git a/docusaurus/docs/making-a-progressive-web-app.md b/docusaurus/docs/making-a-progressive-web-app.md index fc8ba0a0da9..cc81c619d13 100644 --- a/docusaurus/docs/making-a-progressive-web-app.md +++ b/docusaurus/docs/making-a-progressive-web-app.md @@ -4,7 +4,7 @@ title: Making a Progressive Web App --- The production build has all the tools necessary to generate a first-class -[Progressive Web App](https://developers.google.com/web/progressive-web-apps/), +[Progressive Web App](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps), but **the offline/cache-first behavior is opt-in only**. Starting with Create React App 4, you can add a `src/service-worker.js` file to @@ -69,7 +69,7 @@ However, they [can make debugging deployments more challenging](https://github.com/facebook/create-react-app/issues/2398). The -[`workbox-webpack-plugin`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) +[`workbox-webpack-plugin`](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/) is integrated into production configuration, and it will take care of compiling a service worker file that will automatically precache all of your `webpack`-generated assets and keep them up to date as you deploy updates. The diff --git a/docusaurus/docs/pre-rendering-into-static-html-files.md b/docusaurus/docs/pre-rendering-into-static-html-files.md index f9bab58190e..5551745f648 100644 --- a/docusaurus/docs/pre-rendering-into-static-html-files.md +++ b/docusaurus/docs/pre-rendering-into-static-html-files.md @@ -4,7 +4,7 @@ title: Pre-Rendering into Static HTML Files sidebar_label: Pre-Rendering Static HTML --- -If you’re hosting your `build` with a static hosting provider you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot) or [react-snap](https://github.com/stereobooster/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. +If you’re hosting your `build` with a static hosting provider you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot) or [react-snap](https://www.npmjs.com/package/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. diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index 66563e25e45..11cf1198265 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -87,7 +87,7 @@ Next, create `src/setupProxy.js` and place the following contents in it: ```js const { createProxyMiddleware } = require('http-proxy-middleware'); -module.exports = function(app) { +module.exports = function (app) { // ... }; ``` @@ -97,7 +97,7 @@ You can now register proxies as you wish! Here's an example using the above `htt ```js const { createProxyMiddleware } = require('http-proxy-middleware'); -module.exports = function(app) { +module.exports = function (app) { app.use( '/api', createProxyMiddleware({ diff --git a/docusaurus/docs/running-tests.md b/docusaurus/docs/running-tests.md index bc45a272acc..e1d8bbe7946 100644 --- a/docusaurus/docs/running-tests.md +++ b/docusaurus/docs/running-tests.md @@ -60,9 +60,9 @@ it('sums numbers', () => { }); ``` -All `expect()` matchers supported by Jest are [extensively documented here](https://jestjs.io/docs/en/expect.html#content). +All `expect()` matchers supported by Jest are [extensively documented here](https://jestjs.io/docs/expect). -You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://jestjs.io/docs/en/expect.html#tohavebeencalled) to create “spies” or mock functions. +You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://jestjs.io/docs/expect#tohavebeencalled) to create “spies” or mock functions. ## Testing Components @@ -188,24 +188,24 @@ The [default configuration](https://github.com/facebook/create-react-app/blob/ma Supported overrides: -- [`clearMocks`](https://jestjs.io/docs/en/configuration.html#clearmocks-boolean) -- [`collectCoverageFrom`](https://jestjs.io/docs/en/configuration.html#collectcoveragefrom-array) -- [`coveragePathIgnorePatterns`](https://jestjs.io/docs/en/configuration#coveragepathignorepatterns-arraystring) -- [`coverageReporters`](https://jestjs.io/docs/en/configuration.html#coveragereporters-array-string) -- [`coverageThreshold`](https://jestjs.io/docs/en/configuration.html#coveragethreshold-object) -- [`displayName`](https://jestjs.io/docs/en/configuration.html#displayname-string-object) -- [`extraGlobals`](https://jestjs.io/docs/en/configuration.html#extraglobals-array-string) -- [`globalSetup`](https://jestjs.io/docs/en/configuration.html#globalsetup-string) -- [`globalTeardown`](https://jestjs.io/docs/en/configuration.html#globalteardown-string) -- [`moduleNameMapper`](https://jestjs.io/docs/en/configuration.html#modulenamemapper-object-string-string) -- [`resetMocks`](https://jestjs.io/docs/en/configuration.html#resetmocks-boolean) -- [`resetModules`](https://jestjs.io/docs/en/configuration.html#resetmodules-boolean) -- [`restoreMocks`](https://jestjs.io/docs/en/configuration#restoremocks-boolean) -- [`snapshotSerializers`](https://jestjs.io/docs/en/configuration.html#snapshotserializers-array-string) -- [`testMatch`](https://jestjs.io/docs/en/configuration#testmatch-arraystring) -- [`transform`](https://jestjs.io/docs/en/configuration.html#transform-object-string-pathtotransformer-pathtotransformer-object) -- [`transformIgnorePatterns`](https://jestjs.io/docs/en/configuration.html#transformignorepatterns-array-string) -- [`watchPathIgnorePatterns`](https://jestjs.io/docs/en/configuration.html#watchpathignorepatterns-array-string) +- [`clearMocks`](https://jestjs.io/docs/configuration#clearmocks-boolean) +- [`collectCoverageFrom`](https://jestjs.io/docs/configuration#collectcoveragefrom-array) +- [`coveragePathIgnorePatterns`](https://jestjs.io/docs/configuration#coveragepathignorepatterns-arraystring) +- [`coverageReporters`](https://jestjs.io/docs/configuration#coveragereporters-arraystring--string-options) +- [`coverageThreshold`](https://jestjs.io/docs/configuration#coveragethreshold-object) +- [`displayName`](https://jestjs.io/docs/configuration#displayname-string-object) +- [`extraGlobals`](https://jestjs.io/docs/configuration#extraglobals-arraystring) +- [`globalSetup`](https://jestjs.io/docs/configuration#globalsetup-string) +- [`globalTeardown`](https://jestjs.io/docs/configuration#globalteardown-string) +- [`moduleNameMapper`](https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring) +- [`resetMocks`](https://jestjs.io/docs/configuration#resetmocks-boolean) +- [`resetModules`](https://jestjs.io/docs/configuration#resetmodules-boolean) +- [`restoreMocks`](https://jestjs.io/docs/configuration#restoremocks-boolean) +- [`snapshotSerializers`](https://jestjs.io/docs/configuration#snapshotserializers-arraystring) +- [`testMatch`](https://jestjs.io/docs/configuration#testmatch-arraystring) +- [`transform`](https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object) +- [`transformIgnorePatterns`](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring) +- [`watchPathIgnorePatterns`](https://jestjs.io/docs/configuration#watchpathignorepatterns-arraystring) Example package.json: diff --git a/docusaurus/docs/setting-up-your-editor.md b/docusaurus/docs/setting-up-your-editor.md index 4aaedad9d4c..396dc3f9e86 100644 --- a/docusaurus/docs/setting-up-your-editor.md +++ b/docusaurus/docs/setting-up-your-editor.md @@ -69,7 +69,7 @@ Visual Studio Code and WebStorm support debugging out of the box with Create Rea ### Visual Studio Code -You need to have the latest version of [VS Code](https://code.visualstudio.com) and VS Code [Chrome Debugger Extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) installed. +You need to have the latest version of [VS Code](https://code.visualstudio.com) installed. Then add the block below to your `launch.json` file and put it inside the `.vscode` folder in your app’s root directory. diff --git a/docusaurus/docs/using-the-public-folder.md b/docusaurus/docs/using-the-public-folder.md index a33c3a29ec8..23b9c34ac7d 100644 --- a/docusaurus/docs/using-the-public-folder.md +++ b/docusaurus/docs/using-the-public-folder.md @@ -60,7 +60,7 @@ 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`](https://developer.mozilla.org/en-US/docs/Web/Manifest). - You have thousands of images and need to dynamically reference their paths. -- You want to include a small script like [`pace.js`](https://github.com/CodeByZach/pace) outside of the bundled code. +- You want to include a small script like [`pace.js`](https://codebyzach.github.io/pace/docs/) outside of the bundled code. - Some libraries may be incompatible with webpack and you have no other option but to include it as a `