diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 40f742563..000000000 --- a/.babelrc +++ /dev/null @@ -1,41 +0,0 @@ -{ - "presets": [ - [ - "@babel/preset-env", - { - "loose": true, - "modules": false, - "useBuiltIns": "usage", - "shippedProposals": true, - "targets": { - "browsers": [">0.25%", "not dead"], - } - } - ], - [ - "@babel/preset-react", - { - "useBuiltIns": true, - "pragma": "React.createElement", - } - ], - "@babel/flow" - ], - "plugins": [ - [ - "@babel/plugin-proposal-class-properties", - { - "loose": true - } - ], - "@babel/plugin-syntax-dynamic-import", - "babel-plugin-macros", - [ - "@babel/plugin-transform-runtime", - { - "helpers": true, - "regenerator": true - } - ] - ] -} \ No newline at end of file diff --git a/.circleci/config.yml b/.circleci/config.yml deleted file mode 100644 index 028250472..000000000 --- a/.circleci/config.yml +++ /dev/null @@ -1,20 +0,0 @@ -version: 2 -jobs: - build: - docker: - - image: circleci/node:12 - steps: - - checkout - - restore_cache: - keys: - - dependencies-{{ checksum "yarn.lock" }} - - run: - name: Install - command: yarn install --pure-lockfile - - save_cache: - paths: - - node_modules - key: dependencies-{{ checksum "yarn.lock" }} - - run: - name: Check Prettier, ESLint, Flow - command: yarn ci-check diff --git a/.env.development b/.env.development new file mode 100644 index 000000000..a692f21c7 --- /dev/null +++ b/.env.development @@ -0,0 +1 @@ +SANDPACK_BARE_COMPONENTS=true \ No newline at end of file diff --git a/.env.production b/.env.production new file mode 100644 index 000000000..445c9c4d0 --- /dev/null +++ b/.env.production @@ -0,0 +1,2 @@ +NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4' +SANDPACK_BARE_COMPONENTS=true \ No newline at end of file diff --git a/.eslintignore b/.eslintignore index ee6604687..4738cb697 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,13 +1,3 @@ -node_modules/* - -# Skip beta -beta/* - -# Ignore markdown files and examples -content/* - -# Ignore built files -public/* - -# Ignore examples -examples/* \ No newline at end of file +scripts +plugins +next.config.js diff --git a/.eslintrc b/.eslintrc index a51454ef2..147e54607 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,18 +1,16 @@ { - "extends": [ - "fbjs" - ], - "plugins": [ - "prettier", - "react" - ], - "parser": "babel-eslint", + "root": true, + "extends": "next/core-web-vitals", + "parser": "@typescript-eslint/parser", + "plugins": ["@typescript-eslint"], "rules": { - "relay/graphql-naming": 0, - "max-len": 0 + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": "warn" }, "env": { "node": true, - "browser": true + "commonjs": true, + "browser": true, + "es6": true } } diff --git a/.flowconfig b/.flowconfig deleted file mode 100644 index baf4b0255..000000000 --- a/.flowconfig +++ /dev/null @@ -1,36 +0,0 @@ -[ignore] - -/beta/.* -/content/.* -/node_modules/.* -/public/.* - -[include] - -[libs] -./node_modules/fbjs/flow/lib/dev.js -./flow - -[options] -module.system=haste -module.system.node.resolve_dirname=node_modules -module.system.node.resolve_dirname=src - -esproposal.class_static_fields=enable -esproposal.class_instance_fields=enable -unsafe.enable_getters_and_setters=true - -munge_underscores=false - -suppress_type=$FlowIssue -suppress_type=$FlowFixMe -suppress_type=$FixMe -suppress_type=$FlowExpectedError - -suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*www[a-z,_]*\\)?)\\) -suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*www[a-z,_]*\\)?)\\)?:? #[0-9]+ -suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy -suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError - -[version] -^0.56.0 diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index e34dda4af..7e4f6d2f2 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -4,7 +4,7 @@ Thank you for the PR! Contributors like you keep React awesome! Please see the Contribution Guide for guidelines: -https://github.com/reactjs/reactjs.org/blob/main/CONTRIBUTING.md +https://github.com/reactjs/react.dev/blob/main/CONTRIBUTING.md If your PR references an existing issue, please add the issue number below diff --git a/.github/labeler.yml b/.github/labeler.yml deleted file mode 100644 index 7768da2ba..000000000 --- a/.github/labeler.yml +++ /dev/null @@ -1,2 +0,0 @@ -beta: -- beta/**/* diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml index 13a37a88c..c447a2cdb 100644 --- a/.github/workflows/analyze.yml +++ b/.github/workflows/analyze.yml @@ -19,9 +19,7 @@ jobs: node-version: "14.x" - name: Install dependencies - uses: bahmutov/npm-install@v1.6.0 - with: - working-directory: 'beta' + uses: bahmutov/npm-install@v1.7.10 - name: Restore next build uses: actions/cache@v2 @@ -29,35 +27,33 @@ jobs: env: cache-name: cache-next-build with: - path: beta/.next/cache + path: .next/cache # change this if you prefer a more strict cache key: ${{ runner.os }}-build-${{ env.cache-name }} - name: Build next.js app # change this if your site requires a custom build command run: ./node_modules/.bin/next build - working-directory: beta # Here's the first place where next-bundle-analysis' own script is used # This step pulls the raw bundle stats for the current bundle - name: Analyze bundle run: npx -p nextjs-bundle-analysis report - working-directory: beta - name: Upload bundle uses: actions/upload-artifact@v2 with: - path: beta/.next/analyze/__bundle_analysis.json + path: .next/analyze/__bundle_analysis.json name: bundle_analysis.json - name: Download base branch bundle stats uses: dawidd6/action-download-artifact@v2 if: success() && github.event.number with: - workflow: bundle_analysis_upload.yml + workflow: analyze.yml branch: ${{ github.event.pull_request.base.ref }} name: bundle_analysis.json - path: beta/.next/analyze/base/bundle + path: .next/analyze/base/bundle # And here's the second place - this runs after we have both the current and # base branch bundle stats, and will compare them to determine what changed. @@ -75,13 +71,12 @@ jobs: - name: Compare with base branch bundle if: success() && github.event.number run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare - working-directory: beta - name: Upload analysis comment uses: actions/upload-artifact@v2 with: name: analysis_comment.txt - path: beta/.next/analyze/__bundle_analysis_comment.txt + path: .next/analyze/__bundle_analysis_comment.txt - name: Save PR number run: echo ${{ github.event.number }} > ./pr_number diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index 8166089fd..bd73b6b4e 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.github/workflows/analyze_comment.yml @@ -33,19 +33,19 @@ jobs: id: get-comment-body if: success() run: | + echo 'body<> $GITHUB_OUTPUT + echo '' >> $GITHUB_OUTPUT + echo '## Size changes' >> $GITHUB_OUTPUT + echo '' >> $GITHUB_OUTPUT + echo '
' >> $GITHUB_OUTPUT + echo '' >> $GITHUB_OUTPUT + cat analysis_comment.txt/__bundle_analysis_comment.txt >> $GITHUB_OUTPUT + echo '' >> $GITHUB_OUTPUT + echo '
' >> $GITHUB_OUTPUT + echo '' >> $GITHUB_OUTPUT + echo 'EOF' >> $GITHUB_OUTPUT pr_number=$(cat pr_number/pr_number) - body=$(cat analysis_comment.txt/__bundle_analysis_comment.txt) - body="## Size Changes -
- - ${body} - -
" - body="${body//'%'/'%25'}" - body="${body//$'\n'/'%0A'}" - body="${body//$'\r'/'%0D'}" - echo ::set-output name=body::$body - echo ::set-output name=pr-number::$pr_number + echo "pr-number=$pr_number" >> $GITHUB_OUTPUT - name: Find Comment uses: peter-evans/find-comment@v1 @@ -69,4 +69,4 @@ jobs: issue-number: ${{ steps.get-comment-body.outputs.pr-number }} body: ${{ steps.get-comment-body.outputs.body }} comment-id: ${{ steps.fc.outputs.comment-id }} - edit-mode: replace \ No newline at end of file + edit-mode: replace diff --git a/.github/workflows/beta_site_lint.yml b/.github/workflows/beta_site_lint.yml deleted file mode 100644 index 40d1c3f85..000000000 --- a/.github/workflows/beta_site_lint.yml +++ /dev/null @@ -1,27 +0,0 @@ -name: Beta Site Lint - -on: - pull_request: - types: [opened, synchronize, reopened] - -jobs: - lint: - runs-on: ubuntu-latest - - name: Lint on node 12.x and ubuntu-latest - - steps: - - uses: actions/checkout@v1 - - name: Use Node.js 12.x - uses: actions/setup-node@v1 - with: - node-version: 12.x - - - name: Install deps and build (with cache) - uses: bahmutov/npm-install@v1.6.0 - with: - working-directory: 'beta' - - - - name: Lint codebase - run: cd beta && yarn ci-check diff --git a/.github/workflows/label.yml b/.github/workflows/label.yml deleted file mode 100644 index 90a961d4c..000000000 --- a/.github/workflows/label.yml +++ /dev/null @@ -1,22 +0,0 @@ -# This workflow will triage pull requests and apply a label based on the -# paths that are modified in the pull request. -# -# To use this workflow, you will need to set up a .github/labeler.yml -# file with configuration. For more information, see: -# https://github.com/actions/labeler - -name: Labeler -on: [pull_request_target] - -jobs: - label: - - runs-on: ubuntu-latest - permissions: - contents: read - pull-requests: write - - steps: - - uses: actions/labeler@v2 - with: - repo-token: "${{ secrets.GITHUB_TOKEN }}" diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml deleted file mode 100644 index eae9820a7..000000000 --- a/.github/workflows/nodejs.yml +++ /dev/null @@ -1,24 +0,0 @@ -name: Build - -on: - pull_request: - types: [opened, synchronize, reopened] - -jobs: - lint: - runs-on: ubuntu-latest - - name: Lint on node 12.x and ubuntu-latest - - steps: - - uses: actions/checkout@v1 - - name: Use Node.js 12.x - uses: actions/setup-node@v1 - with: - node-version: 12.x - - - name: Install deps and build (with cache) - uses: bahmutov/npm-install@v1.6.0 - - - name: Lint codebase - run: yarn ci-check diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml new file mode 100644 index 000000000..bf446393a --- /dev/null +++ b/.github/workflows/site_lint.yml @@ -0,0 +1,27 @@ +name: Site Lint / Heading ID check + +on: + push: + branches: + - main # change this if your default branch is named differently + pull_request: + types: [opened, synchronize, reopened] + +jobs: + lint: + runs-on: ubuntu-latest + + name: Lint on node 12.x and ubuntu-latest + + steps: + - uses: actions/checkout@v1 + - name: Use Node.js 12.x + uses: actions/setup-node@v1 + with: + node-version: 12.x + + - name: Install deps and build (with cache) + uses: bahmutov/npm-install@v1.7.10 + + - name: Lint codebase + run: yarn ci-check diff --git a/.gitignore b/.gitignore index e81f1af62..d8bec488b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,38 @@ -.cache -.DS_STORE -.idea -node_modules -/public -yarn-error.log \ No newline at end of file +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem +tsconfig.tsbuildinfo + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel + +# external fonts +public/fonts/**/Optimistic_*.woff2 diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 000000000..dc0378c34 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +yarn lint-staged \ No newline at end of file diff --git a/.nvmrc b/.nvmrc deleted file mode 100644 index 66df3b7ab..000000000 --- a/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -12.16.1 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000..96f1f96d2 --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +src/content/**/*.md diff --git a/.prettierrc b/.prettierrc index eb91e6abb..19b54ad05 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,8 +1,21 @@ { "bracketSpacing": false, - "jsxBracketSameLine": true, - "parser": "flow", - "printWidth": 80, "singleQuote": true, - "trailingComma": "all" -} \ No newline at end of file + "bracketSameLine": true, + "trailingComma": "es5", + "printWidth": 80, + "overrides": [ + { + "files": "*.css", + "options": { + "parser": "css" + } + }, + { + "files": "*.md", + "options": { + "parser": "mdx" + } + } + ] +} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e10f4f53e..0e861af35 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -18,19 +18,9 @@ This is a [good summary](https://medium.com/@kvosswinkel/coding-like-a-journalis The documentation is divided into sections to cater to different learning styles and use cases. When editing an article, try to match the surrounding text in tone and style. When creating a new article, try to match the tone of the other articles in the same section. Learn about the motivation behind each section below. -**[Installation](https://reactjs.org/docs/getting-started.html)** gives an overview of the docs, and demonstrates two different ways to use it: either as a simple ` - - - - - - -
- - - - diff --git a/beta/public/icons/logo-white.svg b/beta/public/icons/logo-white.svg deleted file mode 100644 index 7ed0e8b05..000000000 --- a/beta/public/icons/logo-white.svg +++ /dev/null @@ -1,9 +0,0 @@ - - React Logo - - - - - - - diff --git a/beta/public/icons/logo.svg b/beta/public/icons/logo.svg deleted file mode 100644 index ea77a618d..000000000 --- a/beta/public/icons/logo.svg +++ /dev/null @@ -1,9 +0,0 @@ - - React Logo - - - - - - - diff --git a/beta/public/images/blog/animal-sounds.jpg b/beta/public/images/blog/animal-sounds.jpg deleted file mode 100644 index abe6d815e..000000000 Binary files a/beta/public/images/blog/animal-sounds.jpg and /dev/null differ diff --git a/beta/public/images/blog/chatapp.png b/beta/public/images/blog/chatapp.png deleted file mode 100644 index de8c09ff3..000000000 Binary files a/beta/public/images/blog/chatapp.png and /dev/null differ diff --git a/beta/public/images/blog/cra-better-output.png b/beta/public/images/blog/cra-better-output.png deleted file mode 100644 index 44ed320ff..000000000 Binary files a/beta/public/images/blog/cra-better-output.png and /dev/null differ diff --git a/beta/public/images/blog/cra-dynamic-import.gif b/beta/public/images/blog/cra-dynamic-import.gif deleted file mode 100644 index 88db2896f..000000000 Binary files a/beta/public/images/blog/cra-dynamic-import.gif and /dev/null differ diff --git a/beta/public/images/blog/cra-jest-search.gif b/beta/public/images/blog/cra-jest-search.gif deleted file mode 100644 index ed6819d89..000000000 Binary files a/beta/public/images/blog/cra-jest-search.gif and /dev/null differ diff --git a/beta/public/images/blog/cra-pwa.png b/beta/public/images/blog/cra-pwa.png deleted file mode 100644 index 9862ae565..000000000 Binary files a/beta/public/images/blog/cra-pwa.png and /dev/null differ diff --git a/beta/public/images/blog/cra-runtime-error.gif b/beta/public/images/blog/cra-runtime-error.gif deleted file mode 100644 index 7b4405f62..000000000 Binary files a/beta/public/images/blog/cra-runtime-error.gif and /dev/null differ diff --git a/beta/public/images/blog/cra-update-exports.gif b/beta/public/images/blog/cra-update-exports.gif deleted file mode 100644 index 2820d63df..000000000 Binary files a/beta/public/images/blog/cra-update-exports.gif and /dev/null differ diff --git a/beta/public/images/blog/create-apps-with-no-configuration/compiled-successfully.png b/beta/public/images/blog/create-apps-with-no-configuration/compiled-successfully.png deleted file mode 100644 index 223f5abf2..000000000 Binary files a/beta/public/images/blog/create-apps-with-no-configuration/compiled-successfully.png and /dev/null differ diff --git a/beta/public/images/blog/create-apps-with-no-configuration/compiled-with-warnings.png b/beta/public/images/blog/create-apps-with-no-configuration/compiled-with-warnings.png deleted file mode 100644 index 20aa25e3c..000000000 Binary files a/beta/public/images/blog/create-apps-with-no-configuration/compiled-with-warnings.png and /dev/null differ diff --git a/beta/public/images/blog/create-apps-with-no-configuration/created-folder.png b/beta/public/images/blog/create-apps-with-no-configuration/created-folder.png deleted file mode 100644 index 44aff6dcd..000000000 Binary files a/beta/public/images/blog/create-apps-with-no-configuration/created-folder.png and /dev/null differ diff --git a/beta/public/images/blog/create-apps-with-no-configuration/failed-to-compile.png b/beta/public/images/blog/create-apps-with-no-configuration/failed-to-compile.png deleted file mode 100644 index a72b5fb2e..000000000 Binary files a/beta/public/images/blog/create-apps-with-no-configuration/failed-to-compile.png and /dev/null differ diff --git a/beta/public/images/blog/create-apps-with-no-configuration/npm-run-build.png b/beta/public/images/blog/create-apps-with-no-configuration/npm-run-build.png deleted file mode 100644 index a7b931e12..000000000 Binary files a/beta/public/images/blog/create-apps-with-no-configuration/npm-run-build.png and /dev/null differ diff --git a/beta/public/images/blog/devtools-component-filters.gif b/beta/public/images/blog/devtools-component-filters.gif deleted file mode 100644 index 287c66757..000000000 Binary files a/beta/public/images/blog/devtools-component-filters.gif and /dev/null differ diff --git a/beta/public/images/blog/devtools-full.gif b/beta/public/images/blog/devtools-full.gif deleted file mode 100644 index fd7ed9493..000000000 Binary files a/beta/public/images/blog/devtools-full.gif and /dev/null differ diff --git a/beta/public/images/blog/devtools-highlight-updates.png b/beta/public/images/blog/devtools-highlight-updates.png deleted file mode 100644 index 780bcf2ef..000000000 Binary files a/beta/public/images/blog/devtools-highlight-updates.png and /dev/null differ diff --git a/beta/public/images/blog/devtools-search.gif b/beta/public/images/blog/devtools-search.gif deleted file mode 100644 index 22d80051d..000000000 Binary files a/beta/public/images/blog/devtools-search.gif and /dev/null differ diff --git a/beta/public/images/blog/devtools-side-pane.gif b/beta/public/images/blog/devtools-side-pane.gif deleted file mode 100644 index 381e3554e..000000000 Binary files a/beta/public/images/blog/devtools-side-pane.gif and /dev/null differ diff --git a/beta/public/images/blog/devtools-tree-view.png b/beta/public/images/blog/devtools-tree-view.png deleted file mode 100644 index 854a39f8f..000000000 Binary files a/beta/public/images/blog/devtools-tree-view.png and /dev/null differ diff --git a/beta/public/images/blog/devtools-v4-screenshot.png b/beta/public/images/blog/devtools-v4-screenshot.png deleted file mode 100644 index 83a67d548..000000000 Binary files a/beta/public/images/blog/devtools-v4-screenshot.png and /dev/null differ diff --git a/beta/public/images/blog/dog-tutorial.png b/beta/public/images/blog/dog-tutorial.png deleted file mode 100644 index 72f8b4341..000000000 Binary files a/beta/public/images/blog/dog-tutorial.png and /dev/null differ diff --git a/beta/public/images/blog/first-look.png b/beta/public/images/blog/first-look.png deleted file mode 100644 index d36aa1f35..000000000 Binary files a/beta/public/images/blog/first-look.png and /dev/null differ diff --git a/beta/public/images/blog/flux-chart.png b/beta/public/images/blog/flux-chart.png deleted file mode 100644 index fbfdf94ea..000000000 Binary files a/beta/public/images/blog/flux-chart.png and /dev/null differ diff --git a/beta/public/images/blog/flux-diagram.png b/beta/public/images/blog/flux-diagram.png deleted file mode 100644 index 69cf64e0b..000000000 Binary files a/beta/public/images/blog/flux-diagram.png and /dev/null differ diff --git a/beta/public/images/blog/genesis_skeleton.png b/beta/public/images/blog/genesis_skeleton.png deleted file mode 100644 index 4b7c51e29..000000000 Binary files a/beta/public/images/blog/genesis_skeleton.png and /dev/null differ diff --git a/beta/public/images/blog/gpu-cursor-move.gif b/beta/public/images/blog/gpu-cursor-move.gif deleted file mode 100644 index b3a621f78..000000000 Binary files a/beta/public/images/blog/gpu-cursor-move.gif and /dev/null differ diff --git a/beta/public/images/blog/guess_filter.jpg b/beta/public/images/blog/guess_filter.jpg deleted file mode 100644 index 1983df1c8..000000000 Binary files a/beta/public/images/blog/guess_filter.jpg and /dev/null differ diff --git a/beta/public/images/blog/hacker-news-react-native.png b/beta/public/images/blog/hacker-news-react-native.png deleted file mode 100644 index a65679aba..000000000 Binary files a/beta/public/images/blog/hacker-news-react-native.png and /dev/null differ diff --git a/beta/public/images/blog/highlight-updates-example.gif b/beta/public/images/blog/highlight-updates-example.gif deleted file mode 100644 index ab0c87d0c..000000000 Binary files a/beta/public/images/blog/highlight-updates-example.gif and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/commit-selector.png b/beta/public/images/blog/introducing-the-react-profiler/commit-selector.png deleted file mode 100644 index 9c027444d..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/commit-selector.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/component-chart.png b/beta/public/images/blog/introducing-the-react-profiler/component-chart.png deleted file mode 100644 index 3a3615db2..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/component-chart.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/devtools-profiler-tab.png b/beta/public/images/blog/introducing-the-react-profiler/devtools-profiler-tab.png deleted file mode 100644 index eabb3e500..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/devtools-profiler-tab.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/filtering-commits.gif b/beta/public/images/blog/introducing-the-react-profiler/filtering-commits.gif deleted file mode 100644 index 1d73258e3..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/filtering-commits.gif and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/flame-chart.png b/beta/public/images/blog/introducing-the-react-profiler/flame-chart.png deleted file mode 100644 index 80840b55c..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/flame-chart.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/interactions-for-commit.png b/beta/public/images/blog/introducing-the-react-profiler/interactions-for-commit.png deleted file mode 100644 index 8f1a14c61..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/interactions-for-commit.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/interactions.png b/beta/public/images/blog/introducing-the-react-profiler/interactions.png deleted file mode 100644 index 5683ac94a..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/interactions.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/navigate-between-interactions-and-commits.gif b/beta/public/images/blog/introducing-the-react-profiler/navigate-between-interactions-and-commits.gif deleted file mode 100644 index e500459c3..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/navigate-between-interactions-and-commits.gif and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/no-interactions.png b/beta/public/images/blog/introducing-the-react-profiler/no-interactions.png deleted file mode 100644 index d70199fc7..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/no-interactions.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/no-profiler-data-multi-root.png b/beta/public/images/blog/introducing-the-react-profiler/no-profiler-data-multi-root.png deleted file mode 100644 index e56fd4128..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/no-profiler-data-multi-root.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/no-render-times-for-selected-component.png b/beta/public/images/blog/introducing-the-react-profiler/no-render-times-for-selected-component.png deleted file mode 100644 index f77b42f85..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/no-render-times-for-selected-component.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/no-timing-data-for-commit.png b/beta/public/images/blog/introducing-the-react-profiler/no-timing-data-for-commit.png deleted file mode 100644 index 84a4dcac2..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/no-timing-data-for-commit.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/props-and-state.gif b/beta/public/images/blog/introducing-the-react-profiler/props-and-state.gif deleted file mode 100644 index b0b05b127..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/props-and-state.gif and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/ranked-chart.png b/beta/public/images/blog/introducing-the-react-profiler/ranked-chart.png deleted file mode 100644 index 01246f5e5..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/ranked-chart.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif b/beta/public/images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif deleted file mode 100644 index dac21e249..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/see-which-props-changed.gif b/beta/public/images/blog/introducing-the-react-profiler/see-which-props-changed.gif deleted file mode 100644 index ae965be9b..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/see-which-props-changed.gif and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/select-a-root-to-view-profiling-data.gif b/beta/public/images/blog/introducing-the-react-profiler/select-a-root-to-view-profiling-data.gif deleted file mode 100644 index b53f31025..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/select-a-root-to-view-profiling-data.gif and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/start-profiling.png b/beta/public/images/blog/introducing-the-react-profiler/start-profiling.png deleted file mode 100644 index 7256474c0..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/start-profiling.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/stop-profiling.png b/beta/public/images/blog/introducing-the-react-profiler/stop-profiling.png deleted file mode 100644 index 4ef27f333..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/stop-profiling.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/zoom-in-and-out.gif b/beta/public/images/blog/introducing-the-react-profiler/zoom-in-and-out.gif deleted file mode 100644 index 3a8be2c9b..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/zoom-in-and-out.gif and /dev/null differ diff --git a/beta/public/images/blog/jsx-compiler.png b/beta/public/images/blog/jsx-compiler.png deleted file mode 100644 index 9b5e169c0..000000000 Binary files a/beta/public/images/blog/jsx-compiler.png and /dev/null differ diff --git a/beta/public/images/blog/kendoui.png b/beta/public/images/blog/kendoui.png deleted file mode 100644 index 8b18bf438..000000000 Binary files a/beta/public/images/blog/kendoui.png and /dev/null differ diff --git a/beta/public/images/blog/khan-academy-editor.png b/beta/public/images/blog/khan-academy-editor.png deleted file mode 100644 index f0413939d..000000000 Binary files a/beta/public/images/blog/khan-academy-editor.png and /dev/null differ diff --git a/beta/public/images/blog/landoflisp.png b/beta/public/images/blog/landoflisp.png deleted file mode 100644 index 42bad2d4b..000000000 Binary files a/beta/public/images/blog/landoflisp.png and /dev/null differ diff --git a/beta/public/images/blog/lights-out.png b/beta/public/images/blog/lights-out.png deleted file mode 100644 index 78c545e7e..000000000 Binary files a/beta/public/images/blog/lights-out.png and /dev/null differ diff --git a/beta/public/images/blog/makona-editor.png b/beta/public/images/blog/makona-editor.png deleted file mode 100644 index 4fc4ece99..000000000 Binary files a/beta/public/images/blog/makona-editor.png and /dev/null differ diff --git a/beta/public/images/blog/markdown_refactor.png b/beta/public/images/blog/markdown_refactor.png deleted file mode 100644 index b81679541..000000000 Binary files a/beta/public/images/blog/markdown_refactor.png and /dev/null differ diff --git a/beta/public/images/blog/modus-create.gif b/beta/public/images/blog/modus-create.gif deleted file mode 100644 index 194252ad1..000000000 Binary files a/beta/public/images/blog/modus-create.gif and /dev/null differ diff --git a/beta/public/images/blog/monkeys.gif b/beta/public/images/blog/monkeys.gif deleted file mode 100644 index 3da6185ce..000000000 Binary files a/beta/public/images/blog/monkeys.gif and /dev/null differ diff --git a/beta/public/images/blog/ngreact.png b/beta/public/images/blog/ngreact.png deleted file mode 100644 index 6ce7e3418..000000000 Binary files a/beta/public/images/blog/ngreact.png and /dev/null differ diff --git a/beta/public/images/blog/om-backbone.png b/beta/public/images/blog/om-backbone.png deleted file mode 100644 index df411b280..000000000 Binary files a/beta/public/images/blog/om-backbone.png and /dev/null differ diff --git a/beta/public/images/blog/parse-react.jpg b/beta/public/images/blog/parse-react.jpg deleted file mode 100644 index 15e45d2ae..000000000 Binary files a/beta/public/images/blog/parse-react.jpg and /dev/null differ diff --git a/beta/public/images/blog/polarr.jpg b/beta/public/images/blog/polarr.jpg deleted file mode 100644 index 1cfb3cc90..000000000 Binary files a/beta/public/images/blog/polarr.jpg and /dev/null differ diff --git a/beta/public/images/blog/propeller-logo.png b/beta/public/images/blog/propeller-logo.png deleted file mode 100644 index 81cfaa181..000000000 Binary files a/beta/public/images/blog/propeller-logo.png and /dev/null differ diff --git a/beta/public/images/blog/property-finder.png b/beta/public/images/blog/property-finder.png deleted file mode 100644 index 709448b4f..000000000 Binary files a/beta/public/images/blog/property-finder.png and /dev/null differ diff --git a/beta/public/images/blog/quiztime.png b/beta/public/images/blog/quiztime.png deleted file mode 100644 index 7021036e6..000000000 Binary files a/beta/public/images/blog/quiztime.png and /dev/null differ diff --git a/beta/public/images/blog/react-50k-mock-full.jpg b/beta/public/images/blog/react-50k-mock-full.jpg deleted file mode 100644 index 1ebac0063..000000000 Binary files a/beta/public/images/blog/react-50k-mock-full.jpg and /dev/null differ diff --git a/beta/public/images/blog/react-50k-mock.jpg b/beta/public/images/blog/react-50k-mock.jpg deleted file mode 100644 index bc2de61d4..000000000 Binary files a/beta/public/images/blog/react-50k-mock.jpg and /dev/null differ diff --git a/beta/public/images/blog/react-50k-tshirt.jpg b/beta/public/images/blog/react-50k-tshirt.jpg deleted file mode 100644 index c96b44ca5..000000000 Binary files a/beta/public/images/blog/react-50k-tshirt.jpg and /dev/null differ diff --git a/beta/public/images/blog/react-browserify-gulp.jpg b/beta/public/images/blog/react-browserify-gulp.jpg deleted file mode 100644 index d4389d6e9..000000000 Binary files a/beta/public/images/blog/react-browserify-gulp.jpg and /dev/null differ diff --git a/beta/public/images/blog/react-dev-tools.jpg b/beta/public/images/blog/react-dev-tools.jpg deleted file mode 100644 index 7eef44629..000000000 Binary files a/beta/public/images/blog/react-dev-tools.jpg and /dev/null differ diff --git a/beta/public/images/blog/react-diff-tree.png b/beta/public/images/blog/react-diff-tree.png deleted file mode 100644 index 9935e4ae1..000000000 Binary files a/beta/public/images/blog/react-diff-tree.png and /dev/null differ diff --git a/beta/public/images/blog/react-draggable.png b/beta/public/images/blog/react-draggable.png deleted file mode 100644 index c0cb61f16..000000000 Binary files a/beta/public/images/blog/react-draggable.png and /dev/null differ diff --git a/beta/public/images/blog/react-hackathon.jpg b/beta/public/images/blog/react-hackathon.jpg deleted file mode 100644 index 2537d9865..000000000 Binary files a/beta/public/images/blog/react-hackathon.jpg and /dev/null differ diff --git a/beta/public/images/blog/react-page.png b/beta/public/images/blog/react-page.png deleted file mode 100644 index 3249fb370..000000000 Binary files a/beta/public/images/blog/react-page.png and /dev/null differ diff --git a/beta/public/images/blog/react-perf-chrome-timeline.png b/beta/public/images/blog/react-perf-chrome-timeline.png deleted file mode 100644 index e9db8acfb..000000000 Binary files a/beta/public/images/blog/react-perf-chrome-timeline.png and /dev/null differ diff --git a/beta/public/images/blog/react-php.png b/beta/public/images/blog/react-php.png deleted file mode 100644 index cb7e69abc..000000000 Binary files a/beta/public/images/blog/react-php.png and /dev/null differ diff --git a/beta/public/images/blog/react-svg-fbp.png b/beta/public/images/blog/react-svg-fbp.png deleted file mode 100644 index ef89babad..000000000 Binary files a/beta/public/images/blog/react-svg-fbp.png and /dev/null differ diff --git a/beta/public/images/blog/react-v16.13.0/hydration-warning-after.png b/beta/public/images/blog/react-v16.13.0/hydration-warning-after.png deleted file mode 100644 index 92b6c9919..000000000 Binary files a/beta/public/images/blog/react-v16.13.0/hydration-warning-after.png and /dev/null differ diff --git a/beta/public/images/blog/react-v16.13.0/hydration-warning-before.png b/beta/public/images/blog/react-v16.13.0/hydration-warning-before.png deleted file mode 100644 index 381ab8677..000000000 Binary files a/beta/public/images/blog/react-v16.13.0/hydration-warning-before.png and /dev/null differ diff --git a/beta/public/images/blog/react-v16.9.0/codemod.gif b/beta/public/images/blog/react-v16.9.0/codemod.gif deleted file mode 100644 index 955b30fdc..000000000 Binary files a/beta/public/images/blog/react-v16.9.0/codemod.gif and /dev/null differ diff --git a/beta/public/images/blog/react-v16.9.0/cwm-warning.png b/beta/public/images/blog/react-v16.9.0/cwm-warning.png deleted file mode 100644 index 3ee69d748..000000000 Binary files a/beta/public/images/blog/react-v16.9.0/cwm-warning.png and /dev/null differ diff --git a/beta/public/images/blog/react-v17-rc/react_17_delegation.png b/beta/public/images/blog/react-v17-rc/react_17_delegation.png deleted file mode 100644 index c8b23c0d6..000000000 Binary files a/beta/public/images/blog/react-v17-rc/react_17_delegation.png and /dev/null differ diff --git a/beta/public/images/blog/reactive-bookmarklet.png b/beta/public/images/blog/reactive-bookmarklet.png deleted file mode 100644 index 25351e717..000000000 Binary files a/beta/public/images/blog/reactive-bookmarklet.png and /dev/null differ diff --git a/beta/public/images/blog/reflux-flux.png b/beta/public/images/blog/reflux-flux.png deleted file mode 100644 index dad38c7d1..000000000 Binary files a/beta/public/images/blog/reflux-flux.png and /dev/null differ diff --git a/beta/public/images/blog/relay-components/relay-architecture.png b/beta/public/images/blog/relay-components/relay-architecture.png deleted file mode 100644 index 0cfbff0d8..000000000 Binary files a/beta/public/images/blog/relay-components/relay-architecture.png and /dev/null differ diff --git a/beta/public/images/blog/relay-components/relay-containers-data-flow.png b/beta/public/images/blog/relay-components/relay-containers-data-flow.png deleted file mode 100644 index 2f062dd65..000000000 Binary files a/beta/public/images/blog/relay-components/relay-containers-data-flow.png and /dev/null differ diff --git a/beta/public/images/blog/relay-components/relay-containers.png b/beta/public/images/blog/relay-components/relay-containers.png deleted file mode 100644 index be7dee719..000000000 Binary files a/beta/public/images/blog/relay-components/relay-containers.png and /dev/null differ diff --git a/beta/public/images/blog/relay-components/sample-newsfeed.png b/beta/public/images/blog/relay-components/sample-newsfeed.png deleted file mode 100644 index 0e7f5b5de..000000000 Binary files a/beta/public/images/blog/relay-components/sample-newsfeed.png and /dev/null differ diff --git a/beta/public/images/blog/relay-visual-architecture-tour.png b/beta/public/images/blog/relay-visual-architecture-tour.png deleted file mode 100644 index b35c4978f..000000000 Binary files a/beta/public/images/blog/relay-visual-architecture-tour.png and /dev/null differ diff --git a/beta/public/images/blog/release-script-build-confirmation.png b/beta/public/images/blog/release-script-build-confirmation.png deleted file mode 100644 index 02026d172..000000000 Binary files a/beta/public/images/blog/release-script-build-confirmation.png and /dev/null differ diff --git a/beta/public/images/blog/release-script-build-overview.png b/beta/public/images/blog/release-script-build-overview.png deleted file mode 100644 index d726be464..000000000 Binary files a/beta/public/images/blog/release-script-build-overview.png and /dev/null differ diff --git a/beta/public/images/blog/release-script-publish-confirmation.png b/beta/public/images/blog/release-script-publish-confirmation.png deleted file mode 100644 index e05e64830..000000000 Binary files a/beta/public/images/blog/release-script-publish-confirmation.png and /dev/null differ diff --git a/beta/public/images/blog/resistance-calculator.png b/beta/public/images/blog/resistance-calculator.png deleted file mode 100644 index 16e8b3536..000000000 Binary files a/beta/public/images/blog/resistance-calculator.png and /dev/null differ diff --git a/beta/public/images/blog/skills-matter.png b/beta/public/images/blog/skills-matter.png deleted file mode 100644 index 4a4858c3d..000000000 Binary files a/beta/public/images/blog/skills-matter.png and /dev/null differ diff --git a/beta/public/images/blog/snake.png b/beta/public/images/blog/snake.png deleted file mode 100644 index 96d72b38a..000000000 Binary files a/beta/public/images/blog/snake.png and /dev/null differ diff --git a/beta/public/images/blog/steve_reverse.gif b/beta/public/images/blog/steve_reverse.gif deleted file mode 100644 index a442fbbd9..000000000 Binary files a/beta/public/images/blog/steve_reverse.gif and /dev/null differ diff --git a/beta/public/images/blog/strict-mode-unsafe-lifecycles-warning.png b/beta/public/images/blog/strict-mode-unsafe-lifecycles-warning.png deleted file mode 100644 index fbdeccde6..000000000 Binary files a/beta/public/images/blog/strict-mode-unsafe-lifecycles-warning.png and /dev/null differ diff --git a/beta/public/images/blog/sweet-jsx.png b/beta/public/images/blog/sweet-jsx.png deleted file mode 100644 index f20aeede4..000000000 Binary files a/beta/public/images/blog/sweet-jsx.png and /dev/null differ diff --git a/beta/public/images/blog/tcomb-react-native.png b/beta/public/images/blog/tcomb-react-native.png deleted file mode 100644 index 98120c758..000000000 Binary files a/beta/public/images/blog/tcomb-react-native.png and /dev/null differ diff --git a/beta/public/images/blog/thinking-in-react-components.png b/beta/public/images/blog/thinking-in-react-components.png deleted file mode 100644 index c71a86bcb..000000000 Binary files a/beta/public/images/blog/thinking-in-react-components.png and /dev/null differ diff --git a/beta/public/images/blog/thinking-in-react-mock.png b/beta/public/images/blog/thinking-in-react-mock.png deleted file mode 100644 index 78bd00a4a..000000000 Binary files a/beta/public/images/blog/thinking-in-react-mock.png and /dev/null differ diff --git a/beta/public/images/blog/todomvc.png b/beta/public/images/blog/todomvc.png deleted file mode 100644 index ee78eb1cd..000000000 Binary files a/beta/public/images/blog/todomvc.png and /dev/null differ diff --git a/beta/public/images/blog/turboreact.png b/beta/public/images/blog/turboreact.png deleted file mode 100644 index e8ef8cd3a..000000000 Binary files a/beta/public/images/blog/turboreact.png and /dev/null differ diff --git a/beta/public/images/blog/tutsplus.png b/beta/public/images/blog/tutsplus.png deleted file mode 100644 index 771653086..000000000 Binary files a/beta/public/images/blog/tutsplus.png and /dev/null differ diff --git a/beta/public/images/blog/unite.png b/beta/public/images/blog/unite.png deleted file mode 100644 index ab45a5355..000000000 Binary files a/beta/public/images/blog/unite.png and /dev/null differ diff --git a/beta/public/images/blog/versioning-1.png b/beta/public/images/blog/versioning-1.png deleted file mode 100644 index c13f98fd1..000000000 Binary files a/beta/public/images/blog/versioning-1.png and /dev/null differ diff --git a/beta/public/images/blog/versioning-2.png b/beta/public/images/blog/versioning-2.png deleted file mode 100644 index 39de2a010..000000000 Binary files a/beta/public/images/blog/versioning-2.png and /dev/null differ diff --git a/beta/public/images/blog/versioning-3.png b/beta/public/images/blog/versioning-3.png deleted file mode 100644 index 1824e89a9..000000000 Binary files a/beta/public/images/blog/versioning-3.png and /dev/null differ diff --git a/beta/public/images/blog/versioning-4.png b/beta/public/images/blog/versioning-4.png deleted file mode 100644 index 13ba32e39..000000000 Binary files a/beta/public/images/blog/versioning-4.png and /dev/null differ diff --git a/beta/public/images/blog/versioning-5.png b/beta/public/images/blog/versioning-5.png deleted file mode 100644 index 542a3926b..000000000 Binary files a/beta/public/images/blog/versioning-5.png and /dev/null differ diff --git a/beta/public/images/blog/versioning-6.png b/beta/public/images/blog/versioning-6.png deleted file mode 100644 index e82bc7136..000000000 Binary files a/beta/public/images/blog/versioning-6.png and /dev/null differ diff --git a/beta/public/images/blog/versioning-poll.png b/beta/public/images/blog/versioning-poll.png deleted file mode 100644 index 8b3e18d93..000000000 Binary files a/beta/public/images/blog/versioning-poll.png and /dev/null differ diff --git a/beta/public/images/blog/warn-legacy-context-in-strict-mode.png b/beta/public/images/blog/warn-legacy-context-in-strict-mode.png deleted file mode 100644 index e061325ac..000000000 Binary files a/beta/public/images/blog/warn-legacy-context-in-strict-mode.png and /dev/null differ diff --git a/beta/public/images/blog/weather.png b/beta/public/images/blog/weather.png deleted file mode 100644 index 90c5e6fea..000000000 Binary files a/beta/public/images/blog/weather.png and /dev/null differ diff --git a/beta/public/images/blog/wolfenstein_react.png b/beta/public/images/blog/wolfenstein_react.png deleted file mode 100644 index 98241b864..000000000 Binary files a/beta/public/images/blog/wolfenstein_react.png and /dev/null differ diff --git a/beta/public/images/blog/xoxo2013.png b/beta/public/images/blog/xoxo2013.png deleted file mode 100644 index d35989095..000000000 Binary files a/beta/public/images/blog/xoxo2013.png and /dev/null differ diff --git a/beta/public/images/blog/xreact.png b/beta/public/images/blog/xreact.png deleted file mode 100644 index ba23489d5..000000000 Binary files a/beta/public/images/blog/xreact.png and /dev/null differ diff --git a/beta/public/images/docs/blur-popover-close.gif b/beta/public/images/docs/blur-popover-close.gif deleted file mode 100644 index fefc6b8a4..000000000 Binary files a/beta/public/images/docs/blur-popover-close.gif and /dev/null differ diff --git a/beta/public/images/docs/cdn-cors-header.png b/beta/public/images/docs/cdn-cors-header.png deleted file mode 100644 index 31b047cbd..000000000 Binary files a/beta/public/images/docs/cdn-cors-header.png and /dev/null differ diff --git a/beta/public/images/docs/cm-steps-simple.png b/beta/public/images/docs/cm-steps-simple.png deleted file mode 100644 index e5683f9e6..000000000 Binary files a/beta/public/images/docs/cm-steps-simple.png and /dev/null differ diff --git a/beta/public/images/docs/codewinds-004.png b/beta/public/images/docs/codewinds-004.png deleted file mode 100644 index 6c4bc997f..000000000 Binary files a/beta/public/images/docs/codewinds-004.png and /dev/null differ diff --git a/beta/public/images/docs/devtools-dev.png b/beta/public/images/docs/devtools-dev.png deleted file mode 100644 index 5347b4b8d..000000000 Binary files a/beta/public/images/docs/devtools-dev.png and /dev/null differ diff --git a/beta/public/images/docs/devtools-prod.png b/beta/public/images/docs/devtools-prod.png deleted file mode 100644 index 4e200fb48..000000000 Binary files a/beta/public/images/docs/devtools-prod.png and /dev/null differ diff --git a/beta/public/images/docs/error-boundaries-stack-trace-line-numbers.png b/beta/public/images/docs/error-boundaries-stack-trace-line-numbers.png deleted file mode 100644 index db828905a..000000000 Binary files a/beta/public/images/docs/error-boundaries-stack-trace-line-numbers.png and /dev/null differ diff --git a/beta/public/images/docs/error-boundaries-stack-trace.png b/beta/public/images/docs/error-boundaries-stack-trace.png deleted file mode 100644 index f0d49d903..000000000 Binary files a/beta/public/images/docs/error-boundaries-stack-trace.png and /dev/null differ diff --git a/beta/public/images/docs/granular-dom-updates.gif b/beta/public/images/docs/granular-dom-updates.gif deleted file mode 100644 index 1651b0dae..000000000 Binary files a/beta/public/images/docs/granular-dom-updates.gif and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_browser-paint.png b/beta/public/images/docs/illustrations/i_browser-paint.png deleted file mode 100644 index b0d61fa8f..000000000 Binary files a/beta/public/images/docs/illustrations/i_browser-paint.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_children-prop.png b/beta/public/images/docs/illustrations/i_children-prop.png deleted file mode 100644 index 296c626dc..000000000 Binary files a/beta/public/images/docs/illustrations/i_children-prop.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_declarative-ui-programming.png b/beta/public/images/docs/illustrations/i_declarative-ui-programming.png deleted file mode 100644 index 206d73e51..000000000 Binary files a/beta/public/images/docs/illustrations/i_declarative-ui-programming.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_html_js.svg b/beta/public/images/docs/illustrations/i_html_js.svg deleted file mode 100644 index 9b6f5bad8..000000000 --- a/beta/public/images/docs/illustrations/i_html_js.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - - onSubmit() { ... } - - - - login() { ... } - - - - onClick() { ... } - - JS - - - - - - - - <div> - - - - <form> - - - - <p> - - HTML - - diff --git a/beta/public/images/docs/illustrations/i_imperative-ui-programming.png b/beta/public/images/docs/illustrations/i_imperative-ui-programming.png deleted file mode 100644 index 1e3b5fdd8..000000000 Binary files a/beta/public/images/docs/illustrations/i_imperative-ui-programming.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_inputs1.png b/beta/public/images/docs/illustrations/i_inputs1.png deleted file mode 100644 index 35150b22d..000000000 Binary files a/beta/public/images/docs/illustrations/i_inputs1.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_inputs2.png b/beta/public/images/docs/illustrations/i_inputs2.png deleted file mode 100644 index f519af36e..000000000 Binary files a/beta/public/images/docs/illustrations/i_inputs2.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_jsx.svg b/beta/public/images/docs/illustrations/i_jsx.svg deleted file mode 100644 index 629cad665..000000000 --- a/beta/public/images/docs/illustrations/i_jsx.svg +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - - - - Form() { onClick() { ... } onSubmit() { ... } <form onSubmit> <input onClick /> <input onClick /> </form> } - Form.js - - - - - - Sidebar() { isLoggedIn() { <p>Welcome</p> } else { <Form /> }} - Sidebar.js - - - diff --git a/beta/public/images/docs/illustrations/i_keys-in-trees.png b/beta/public/images/docs/illustrations/i_keys-in-trees.png deleted file mode 100644 index 55d864f9e..000000000 Binary files a/beta/public/images/docs/illustrations/i_keys-in-trees.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_puritea-recipe.png b/beta/public/images/docs/illustrations/i_puritea-recipe.png deleted file mode 100644 index d3a348bd5..000000000 Binary files a/beta/public/images/docs/illustrations/i_puritea-recipe.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_react-batching.png b/beta/public/images/docs/illustrations/i_react-batching.png deleted file mode 100644 index e213ba3ad..000000000 Binary files a/beta/public/images/docs/illustrations/i_react-batching.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_react-is-blind-to-ui-swap.png b/beta/public/images/docs/illustrations/i_react-is-blind-to-ui-swap.png deleted file mode 100644 index d20511be9..000000000 Binary files a/beta/public/images/docs/illustrations/i_react-is-blind-to-ui-swap.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_ref.png b/beta/public/images/docs/illustrations/i_ref.png deleted file mode 100644 index c391e57e4..000000000 Binary files a/beta/public/images/docs/illustrations/i_ref.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_render-and-commit1.png b/beta/public/images/docs/illustrations/i_render-and-commit1.png deleted file mode 100644 index d62ba5806..000000000 Binary files a/beta/public/images/docs/illustrations/i_render-and-commit1.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_render-and-commit2.png b/beta/public/images/docs/illustrations/i_render-and-commit2.png deleted file mode 100644 index e01d0cce7..000000000 Binary files a/beta/public/images/docs/illustrations/i_render-and-commit2.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_render-and-commit3.png b/beta/public/images/docs/illustrations/i_render-and-commit3.png deleted file mode 100644 index bdf58c0e0..000000000 Binary files a/beta/public/images/docs/illustrations/i_render-and-commit3.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_render1.png b/beta/public/images/docs/illustrations/i_render1.png deleted file mode 100644 index 3613c7691..000000000 Binary files a/beta/public/images/docs/illustrations/i_render1.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_render2.png b/beta/public/images/docs/illustrations/i_render2.png deleted file mode 100644 index ca53a7785..000000000 Binary files a/beta/public/images/docs/illustrations/i_render2.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_render3.png b/beta/public/images/docs/illustrations/i_render3.png deleted file mode 100644 index 797860a7c..000000000 Binary files a/beta/public/images/docs/illustrations/i_render3.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_rerender1.png b/beta/public/images/docs/illustrations/i_rerender1.png deleted file mode 100644 index e94361e7b..000000000 Binary files a/beta/public/images/docs/illustrations/i_rerender1.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_rerender2.png b/beta/public/images/docs/illustrations/i_rerender2.png deleted file mode 100644 index 6d85cae84..000000000 Binary files a/beta/public/images/docs/illustrations/i_rerender2.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_rerender3.png b/beta/public/images/docs/illustrations/i_rerender3.png deleted file mode 100644 index d589a9b93..000000000 Binary files a/beta/public/images/docs/illustrations/i_rerender3.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_state-snapshot1.png b/beta/public/images/docs/illustrations/i_state-snapshot1.png deleted file mode 100644 index 69bbf2b72..000000000 Binary files a/beta/public/images/docs/illustrations/i_state-snapshot1.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_state-snapshot2.png b/beta/public/images/docs/illustrations/i_state-snapshot2.png deleted file mode 100644 index eea48a218..000000000 Binary files a/beta/public/images/docs/illustrations/i_state-snapshot2.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_state-snapshot3.png b/beta/public/images/docs/illustrations/i_state-snapshot3.png deleted file mode 100644 index a393528e2..000000000 Binary files a/beta/public/images/docs/illustrations/i_state-snapshot3.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_ui-snapshot.png b/beta/public/images/docs/illustrations/i_ui-snapshot.png deleted file mode 100644 index d327dfc82..000000000 Binary files a/beta/public/images/docs/illustrations/i_ui-snapshot.png and /dev/null differ diff --git a/beta/public/images/docs/implementation-notes-tree.png b/beta/public/images/docs/implementation-notes-tree.png deleted file mode 100644 index 923ef5d0d..000000000 Binary files a/beta/public/images/docs/implementation-notes-tree.png and /dev/null differ diff --git a/beta/public/images/docs/javascript-jabber.png b/beta/public/images/docs/javascript-jabber.png deleted file mode 100644 index 57d63c41c..000000000 Binary files a/beta/public/images/docs/javascript-jabber.png and /dev/null differ diff --git a/beta/public/images/docs/keyboard-focus.png b/beta/public/images/docs/keyboard-focus.png deleted file mode 100644 index 65a8dc300..000000000 Binary files a/beta/public/images/docs/keyboard-focus.png and /dev/null differ diff --git a/beta/public/images/docs/outerclick-with-keyboard.gif b/beta/public/images/docs/outerclick-with-keyboard.gif deleted file mode 100644 index c82d299f8..000000000 Binary files a/beta/public/images/docs/outerclick-with-keyboard.gif and /dev/null differ diff --git a/beta/public/images/docs/outerclick-with-mouse.gif b/beta/public/images/docs/outerclick-with-mouse.gif deleted file mode 100644 index e562e0324..000000000 Binary files a/beta/public/images/docs/outerclick-with-mouse.gif and /dev/null differ diff --git a/beta/public/images/docs/perf-dom.png b/beta/public/images/docs/perf-dom.png deleted file mode 100644 index 9a843c6ca..000000000 Binary files a/beta/public/images/docs/perf-dom.png and /dev/null differ diff --git a/beta/public/images/docs/perf-exclusive.png b/beta/public/images/docs/perf-exclusive.png deleted file mode 100644 index a8ad5003c..000000000 Binary files a/beta/public/images/docs/perf-exclusive.png and /dev/null differ diff --git a/beta/public/images/docs/perf-inclusive.png b/beta/public/images/docs/perf-inclusive.png deleted file mode 100644 index e46b370aa..000000000 Binary files a/beta/public/images/docs/perf-inclusive.png and /dev/null differ diff --git a/beta/public/images/docs/perf-wasted.png b/beta/public/images/docs/perf-wasted.png deleted file mode 100644 index c73131818..000000000 Binary files a/beta/public/images/docs/perf-wasted.png and /dev/null differ diff --git a/beta/public/images/docs/react-devtools-extension.png b/beta/public/images/docs/react-devtools-extension.png deleted file mode 100644 index 6ea2aad8d..000000000 Binary files a/beta/public/images/docs/react-devtools-extension.png and /dev/null differ diff --git a/beta/public/images/docs/react-devtools-standalone.png b/beta/public/images/docs/react-devtools-standalone.png deleted file mode 100644 index 07da74137..000000000 Binary files a/beta/public/images/docs/react-devtools-standalone.png and /dev/null differ diff --git a/beta/public/images/docs/react-devtools-state.gif b/beta/public/images/docs/react-devtools-state.gif deleted file mode 100644 index c9ff6cd35..000000000 Binary files a/beta/public/images/docs/react-devtools-state.gif and /dev/null differ diff --git a/beta/public/images/docs/s_thinking-in-react_ui.png b/beta/public/images/docs/s_thinking-in-react_ui.png deleted file mode 100644 index 21802352c..000000000 Binary files a/beta/public/images/docs/s_thinking-in-react_ui.png and /dev/null differ diff --git a/beta/public/images/docs/s_thinking-in-react_ui_outline.png b/beta/public/images/docs/s_thinking-in-react_ui_outline.png deleted file mode 100644 index d38f3e19f..000000000 Binary files a/beta/public/images/docs/s_thinking-in-react_ui_outline.png and /dev/null differ diff --git a/beta/public/images/docs/should-component-update.png b/beta/public/images/docs/should-component-update.png deleted file mode 100644 index 590af60b8..000000000 Binary files a/beta/public/images/docs/should-component-update.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/exports.png b/beta/public/images/docs/sketches/exports.png deleted file mode 100644 index ef60adee1..000000000 Binary files a/beta/public/images/docs/sketches/exports.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_add-back-ui.png b/beta/public/images/docs/sketches/s_add-back-ui.png deleted file mode 100644 index 248a55073..000000000 Binary files a/beta/public/images/docs/sketches/s_add-back-ui.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_flow-chart.jpg b/beta/public/images/docs/sketches/s_flow-chart.jpg deleted file mode 100644 index 1e5d94bd3..000000000 Binary files a/beta/public/images/docs/sketches/s_flow-chart.jpg and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_jsx-to-tree.png b/beta/public/images/docs/sketches/s_jsx-to-tree.png deleted file mode 100644 index 0b7f845e2..000000000 Binary files a/beta/public/images/docs/sketches/s_jsx-to-tree.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_keys-in-trees.png b/beta/public/images/docs/sketches/s_keys-in-trees.png deleted file mode 100644 index e35c325d5..000000000 Binary files a/beta/public/images/docs/sketches/s_keys-in-trees.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_lifting-state-up.png b/beta/public/images/docs/sketches/s_lifting-state-up.png deleted file mode 100644 index 94ea7fcd9..000000000 Binary files a/beta/public/images/docs/sketches/s_lifting-state-up.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_lifting-v-providing.png b/beta/public/images/docs/sketches/s_lifting-v-providing.png deleted file mode 100644 index 1bd0dd576..000000000 Binary files a/beta/public/images/docs/sketches/s_lifting-v-providing.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_passing-functions-down.png b/beta/public/images/docs/sketches/s_passing-functions-down.png deleted file mode 100644 index 02b3983c0..000000000 Binary files a/beta/public/images/docs/sketches/s_passing-functions-down.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_placeholder-ui.png b/beta/public/images/docs/sketches/s_placeholder-ui.png deleted file mode 100644 index a0c6cdde6..000000000 Binary files a/beta/public/images/docs/sketches/s_placeholder-ui.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_prop-drilling.png b/beta/public/images/docs/sketches/s_prop-drilling.png deleted file mode 100644 index 90e7c48d6..000000000 Binary files a/beta/public/images/docs/sketches/s_prop-drilling.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_providing-context.png b/beta/public/images/docs/sketches/s_providing-context.png deleted file mode 100644 index e955dfefb..000000000 Binary files a/beta/public/images/docs/sketches/s_providing-context.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_re-rendering.jpg b/beta/public/images/docs/sketches/s_re-rendering.jpg deleted file mode 100644 index ffb5c9344..000000000 Binary files a/beta/public/images/docs/sketches/s_re-rendering.jpg and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_react-batching.jpg b/beta/public/images/docs/sketches/s_react-batching.jpg deleted file mode 100644 index 4d409435a..000000000 Binary files a/beta/public/images/docs/sketches/s_react-batching.jpg and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_react-dom-tree.png b/beta/public/images/docs/sketches/s_react-dom-tree.png deleted file mode 100644 index b33bf0e44..000000000 Binary files a/beta/public/images/docs/sketches/s_react-dom-tree.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_react-is-blind-to-ui-swap.png b/beta/public/images/docs/sketches/s_react-is-blind-to-ui-swap.png deleted file mode 100644 index aacc9191a..000000000 Binary files a/beta/public/images/docs/sketches/s_react-is-blind-to-ui-swap.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_react-ui-response.jpg b/beta/public/images/docs/sketches/s_react-ui-response.jpg deleted file mode 100644 index 01d7a8d58..000000000 Binary files a/beta/public/images/docs/sketches/s_react-ui-response.jpg and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_remove-ui.png b/beta/public/images/docs/sketches/s_remove-ui.png deleted file mode 100644 index d2307cf2f..000000000 Binary files a/beta/public/images/docs/sketches/s_remove-ui.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_state-in-tree.png b/beta/public/images/docs/sketches/s_state-in-tree.png deleted file mode 100644 index dfd5fa648..000000000 Binary files a/beta/public/images/docs/sketches/s_state-in-tree.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_ui-component-swap.png b/beta/public/images/docs/sketches/s_ui-component-swap.png deleted file mode 100644 index 4b13e2bf3..000000000 Binary files a/beta/public/images/docs/sketches/s_ui-component-swap.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_ui-components-swap.png b/beta/public/images/docs/sketches/s_ui-components-swap.png deleted file mode 100644 index 669e7bb88..000000000 Binary files a/beta/public/images/docs/sketches/s_ui-components-swap.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_ui-response.jpg b/beta/public/images/docs/sketches/s_ui-response.jpg deleted file mode 100644 index 34f375ad2..000000000 Binary files a/beta/public/images/docs/sketches/s_ui-response.jpg and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_ui-snapshots.jpg b/beta/public/images/docs/sketches/s_ui-snapshots.jpg deleted file mode 100644 index 647932bd2..000000000 Binary files a/beta/public/images/docs/sketches/s_ui-snapshots.jpg and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_ui-state-snapshot.jpg b/beta/public/images/docs/sketches/s_ui-state-snapshot.jpg deleted file mode 100644 index 89ea4a24f..000000000 Binary files a/beta/public/images/docs/sketches/s_ui-state-snapshot.jpg and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_ui-swap.png b/beta/public/images/docs/sketches/s_ui-swap.png deleted file mode 100644 index ce96d7e01..000000000 Binary files a/beta/public/images/docs/sketches/s_ui-swap.png and /dev/null differ diff --git a/beta/public/images/docs/source/i_browser-paint.psd b/beta/public/images/docs/source/i_browser-paint.psd deleted file mode 100644 index bb541e889..000000000 Binary files a/beta/public/images/docs/source/i_browser-paint.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_children-prop.psd b/beta/public/images/docs/source/i_children-prop.psd deleted file mode 100644 index 2577c0aa0..000000000 Binary files a/beta/public/images/docs/source/i_children-prop.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_declarative-ui-programming.psd b/beta/public/images/docs/source/i_declarative-ui-programming.psd deleted file mode 100644 index 3b1a9a4d1..000000000 Binary files a/beta/public/images/docs/source/i_declarative-ui-programming.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_imperative-ui-programming.psd b/beta/public/images/docs/source/i_imperative-ui-programming.psd deleted file mode 100644 index c1511b022..000000000 Binary files a/beta/public/images/docs/source/i_imperative-ui-programming.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_keys-in-trees.psd b/beta/public/images/docs/source/i_keys-in-trees.psd deleted file mode 100644 index bab04dc08..000000000 Binary files a/beta/public/images/docs/source/i_keys-in-trees.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_puritea-recipe.psd b/beta/public/images/docs/source/i_puritea-recipe.psd deleted file mode 100644 index 72a33ab30..000000000 Binary files a/beta/public/images/docs/source/i_puritea-recipe.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_react-batching.psd b/beta/public/images/docs/source/i_react-batching.psd deleted file mode 100644 index 88bcd617b..000000000 Binary files a/beta/public/images/docs/source/i_react-batching.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_react-is-blind-to-ui-swap.psd b/beta/public/images/docs/source/i_react-is-blind-to-ui-swap.psd deleted file mode 100644 index 5e422ba63..000000000 Binary files a/beta/public/images/docs/source/i_react-is-blind-to-ui-swap.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_ref.psd b/beta/public/images/docs/source/i_ref.psd deleted file mode 100644 index 12349b431..000000000 Binary files a/beta/public/images/docs/source/i_ref.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_render-commit.psd b/beta/public/images/docs/source/i_render-commit.psd deleted file mode 100644 index 99f62802a..000000000 Binary files a/beta/public/images/docs/source/i_render-commit.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_rerender.psd b/beta/public/images/docs/source/i_rerender.psd deleted file mode 100644 index 9dc83d5ed..000000000 Binary files a/beta/public/images/docs/source/i_rerender.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_rerendering.psd b/beta/public/images/docs/source/i_rerendering.psd deleted file mode 100644 index 2ba1cba58..000000000 Binary files a/beta/public/images/docs/source/i_rerendering.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_state-snapshot.psd b/beta/public/images/docs/source/i_state-snapshot.psd deleted file mode 100644 index b8d54ddcc..000000000 Binary files a/beta/public/images/docs/source/i_state-snapshot.psd and /dev/null differ diff --git a/beta/public/images/docs/source/s_inputs.psd b/beta/public/images/docs/source/s_inputs.psd deleted file mode 100644 index 60354742a..000000000 Binary files a/beta/public/images/docs/source/s_inputs.psd and /dev/null differ diff --git a/beta/public/images/docs/source/s_ui-snapshot.psd b/beta/public/images/docs/source/s_ui-snapshot.psd deleted file mode 100644 index 41c65f8fe..000000000 Binary files a/beta/public/images/docs/source/s_ui-snapshot.psd and /dev/null differ diff --git a/beta/public/images/docs/thinking-in-react-tagtree.png b/beta/public/images/docs/thinking-in-react-tagtree.png deleted file mode 100644 index 3d4db2d23..000000000 Binary files a/beta/public/images/docs/thinking-in-react-tagtree.png and /dev/null differ diff --git a/beta/public/images/external.png b/beta/public/images/external.png deleted file mode 100644 index 748a27e44..000000000 Binary files a/beta/public/images/external.png and /dev/null differ diff --git a/beta/public/images/external_2x.png b/beta/public/images/external_2x.png deleted file mode 100644 index 66230854d..000000000 Binary files a/beta/public/images/external_2x.png and /dev/null differ diff --git a/beta/public/images/g_arrow.png b/beta/public/images/g_arrow.png deleted file mode 100644 index 36258add5..000000000 Binary files a/beta/public/images/g_arrow.png and /dev/null differ diff --git a/beta/public/images/history.png b/beta/public/images/history.png deleted file mode 100644 index 4ca56a866..000000000 Binary files a/beta/public/images/history.png and /dev/null differ diff --git a/beta/public/images/noise.png b/beta/public/images/noise.png deleted file mode 100644 index 698f924f4..000000000 Binary files a/beta/public/images/noise.png and /dev/null differ diff --git a/beta/public/images/oss_logo.png b/beta/public/images/oss_logo.png deleted file mode 100644 index 3f376bee9..000000000 Binary files a/beta/public/images/oss_logo.png and /dev/null differ diff --git a/beta/public/images/search.png b/beta/public/images/search.png deleted file mode 100644 index 151377693..000000000 Binary files a/beta/public/images/search.png and /dev/null differ diff --git a/beta/public/images/team/acdlite.jpg b/beta/public/images/team/acdlite.jpg deleted file mode 100644 index ab54b793b..000000000 Binary files a/beta/public/images/team/acdlite.jpg and /dev/null differ diff --git a/beta/public/images/team/bvaughn.jpg b/beta/public/images/team/bvaughn.jpg deleted file mode 100644 index 227fe8d94..000000000 Binary files a/beta/public/images/team/bvaughn.jpg and /dev/null differ diff --git a/beta/public/images/team/gaearon.jpg b/beta/public/images/team/gaearon.jpg deleted file mode 100644 index e152143b7..000000000 Binary files a/beta/public/images/team/gaearon.jpg and /dev/null differ diff --git a/beta/public/images/team/lunaruan.jpg b/beta/public/images/team/lunaruan.jpg deleted file mode 100644 index 91daa3d17..000000000 Binary files a/beta/public/images/team/lunaruan.jpg and /dev/null differ diff --git a/beta/public/images/team/necolas.jpg b/beta/public/images/team/necolas.jpg deleted file mode 100644 index b7caaac06..000000000 Binary files a/beta/public/images/team/necolas.jpg and /dev/null differ diff --git a/beta/public/images/team/rickhanlonii.jpg b/beta/public/images/team/rickhanlonii.jpg deleted file mode 100644 index eb04614c5..000000000 Binary files a/beta/public/images/team/rickhanlonii.jpg and /dev/null differ diff --git a/beta/public/images/team/rnabors.jpg b/beta/public/images/team/rnabors.jpg deleted file mode 100644 index 4425c90db..000000000 Binary files a/beta/public/images/team/rnabors.jpg and /dev/null differ diff --git a/beta/public/images/team/salazarm.jpeg b/beta/public/images/team/salazarm.jpeg deleted file mode 100644 index 0360f208d..000000000 Binary files a/beta/public/images/team/salazarm.jpeg and /dev/null differ diff --git a/beta/public/images/team/sebmarkbage.jpg b/beta/public/images/team/sebmarkbage.jpg deleted file mode 100644 index 56a480ff4..000000000 Binary files a/beta/public/images/team/sebmarkbage.jpg and /dev/null differ diff --git a/beta/public/images/team/sethwebster.jpg b/beta/public/images/team/sethwebster.jpg deleted file mode 100644 index c665a0b00..000000000 Binary files a/beta/public/images/team/sethwebster.jpg and /dev/null differ diff --git a/beta/public/images/team/threepointone.jpg b/beta/public/images/team/threepointone.jpg deleted file mode 100644 index 9ad860171..000000000 Binary files a/beta/public/images/team/threepointone.jpg and /dev/null differ diff --git a/beta/public/images/team/trueadm.jpg b/beta/public/images/team/trueadm.jpg deleted file mode 100644 index 33a6b838f..000000000 Binary files a/beta/public/images/team/trueadm.jpg and /dev/null differ diff --git a/beta/public/images/tutorial/devtools.png b/beta/public/images/tutorial/devtools.png deleted file mode 100644 index 6c4765703..000000000 Binary files a/beta/public/images/tutorial/devtools.png and /dev/null differ diff --git a/beta/public/images/tutorial/tictac-empty.png b/beta/public/images/tutorial/tictac-empty.png deleted file mode 100644 index fabe3f034..000000000 Binary files a/beta/public/images/tutorial/tictac-empty.png and /dev/null differ diff --git a/beta/public/images/tutorial/tictac-numbers.png b/beta/public/images/tutorial/tictac-numbers.png deleted file mode 100644 index 69d163f45..000000000 Binary files a/beta/public/images/tutorial/tictac-numbers.png and /dev/null differ diff --git a/beta/public/logo-180x180.png b/beta/public/logo-180x180.png deleted file mode 100644 index 2b1f8704a..000000000 Binary files a/beta/public/logo-180x180.png and /dev/null differ diff --git a/beta/public/logo-512x512.png b/beta/public/logo-512x512.png deleted file mode 100644 index e7b803863..000000000 Binary files a/beta/public/logo-512x512.png and /dev/null differ diff --git a/beta/public/logo-og.png b/beta/public/logo-og.png deleted file mode 100644 index d2e830d37..000000000 Binary files a/beta/public/logo-og.png and /dev/null differ diff --git a/beta/public/robots.txt b/beta/public/robots.txt deleted file mode 100644 index 20403902f..000000000 --- a/beta/public/robots.txt +++ /dev/null @@ -1,5 +0,0 @@ -User-agent: * -Disallow: / - -User-agent: Algolia Crawler -Disallow: diff --git a/beta/scripts/generateBlogIndex.js b/beta/scripts/generateBlogIndex.js deleted file mode 100644 index b9deaa585..000000000 --- a/beta/scripts/generateBlogIndex.js +++ /dev/null @@ -1,69 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); -const fm = require('gray-matter'); -const globby = require('globby'); -const parseISO = require('date-fns/parseISO'); -const readingTime = require('reading-time'); -const {markdownToHtml} = require('../plugins/markdownToHtml'); - -/** - * This looks at the ./src/pages/blog directory and creates a route manifest that can be used - * in the sidebar and footers, and (in theory) category and author pages. - * - * For now, the blog manifest is a big array in reverse chronological order. - */ -Promise.resolve() - .then(async () => { - const routes = []; - const blogPosts = await globby('src/pages/blog/**/*.md'); - - for (let postpath of blogPosts) { - const [year, month, day, title] = postpath - .replace('src/pages/blog/', '') - .split('/'); - - const rawStr = await fs.readFile(postpath, 'utf8'); - const {data, excerpt, content} = fm(rawStr, { - excerpt: function firstLine(file, options) { - file.excerpt = file.content.split('\n').slice(0, 2).join(' '); - }, - }); - const rendered = await markdownToHtml(excerpt.trimLeft().trim()); - - routes.unshift({ - path: postpath.replace('src/pages', ''), - date: [year, month, day].join('-'), - title: data.title, - author: data.author, - excerpt: rendered, - readingTime: readingTime(content).text, - }); - } - - const sorted = routes.sort((post1, post2) => - parseISO(post1.date) > parseISO(post2.date) ? -1 : 1 - ); - const blogManifest = { - routes: sorted, - }; - const blogRecentSidebar = { - routes: [ - { - title: 'Recent Posts', - path: '/blog', - heading: true, - routes: sorted.slice(0, 25), - }, - ], - }; - - await fs.writeFile( - path.resolve('./src/blogIndex.json'), - JSON.stringify(blogManifest, null, 2) - ); - await fs.writeFile( - path.resolve('./src/blogIndexRecent.json'), - JSON.stringify(blogRecentSidebar, null, 2) - ); - }) - .catch(console.error); diff --git a/beta/scripts/generateHeadingIDs.js b/beta/scripts/generateHeadingIDs.js deleted file mode 100644 index d8690172d..000000000 --- a/beta/scripts/generateHeadingIDs.js +++ /dev/null @@ -1,108 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -// To do: Make this ESM. -// To do: properly check heading numbers (headings with the same text get -// numbered, this script doesn’t check that). - -const assert = require('assert'); -const fs = require('fs'); -const GithubSlugger = require('github-slugger'); - -let modules - -function walk(dir) { - let results = []; - const list = fs.readdirSync(dir); - list.forEach(function (file) { - file = dir + '/' + file; - const stat = fs.statSync(file); - if (stat && stat.isDirectory()) { - /* Recurse into a subdirectory */ - results = results.concat(walk(file)); - } else { - /* Is a file */ - results.push(file); - } - }); - return results; -} - -function stripLinks(line) { - return line.replace(/\[([^\]]+)\]\([^)]+\)/, (match, p1) => p1); -} - -function addHeaderID(line, slugger) { - // check if we're a header at all - if (!line.startsWith('#')) { - return line; - } - - const match = /^(#+\s+)(.+?)(\s*\{(?:\/\*|#)([^\}\*\/]+)(?:\*\/)?\}\s*)?$/.exec(line); - const before = match[1] + match[2] - const proc = modules.unified().use(modules.remarkParse).use(modules.remarkSlug) - const tree = proc.runSync(proc.parse(before)) - const head = tree.children[0] - assert(head && head.type === 'heading', 'expected `' + before + '` to be a heading, is it using a normal space after `#`?') - const autoId = head.data.id - const existingId = match[4] - const id = existingId || autoId - // Ignore numbers: - const cleanExisting = existingId ? existingId.replace(/-\d+$/, '') : undefined - const cleanAuto = autoId.replace(/-\d+$/, '') - - if (cleanExisting && cleanExisting !== cleanAuto) { - console.log('Note: heading `%s` has a different ID (`%s`) than what GH generates for it: `%s`:', before, existingId, autoId) - } - - return match[1] + match[2] + ' {/*' + id + '*/}'; -} - -function addHeaderIDs(lines) { - // Sluggers should be per file - const slugger = new GithubSlugger(); - let inCode = false; - const results = []; - lines.forEach((line) => { - // Ignore code blocks - if (line.startsWith('```')) { - inCode = !inCode; - results.push(line); - return; - } - if (inCode) { - results.push(line); - return; - } - - results.push(addHeaderID(line, slugger)); - }); - return results; -} - -const [path] = process.argv.slice(2); - -main() - -async function main() { - const [unifiedMod, remarkParseMod, remarkSlugMod] = await Promise.all([import('unified'), import('remark-parse'), import('remark-slug')]) - const unified = unifiedMod.default - const remarkParse = remarkParseMod.default - const remarkSlug = remarkSlugMod.default - modules = {unified, remarkParse, remarkSlug} - - const files = walk(path); - - files.forEach((file) => { - if (!(file.endsWith('.md') || file.endsWith('.mdx'))) { - return; - } - - const content = fs.readFileSync(file, 'utf8'); - const lines = content.split('\n'); - const updatedLines = addHeaderIDs(lines); - fs.writeFileSync(file, updatedLines.join('\n')); - }); - -} diff --git a/beta/scripts/generateRSS.js b/beta/scripts/generateRSS.js deleted file mode 100644 index a08c7e2ad..000000000 --- a/beta/scripts/generateRSS.js +++ /dev/null @@ -1,46 +0,0 @@ -const RSS = require('rss'); -const fs = require('fs-extra'); -const authorsJson = require('../src/authors.json'); -const blogIndexJson = require('../src/blogIndex.json'); -const parse = require('date-fns/parse'); - -function removeFromLast(path, key) { - const i = path.lastIndexOf(key); - return i === -1 ? path : path.substring(0, i); -} - -const SITE_URL = 'https://reactjs.org'; - -function generate() { - const feed = new RSS({ - title: 'React.js Blog', - site_url: SITE_URL, - feed_url: SITE_URL + '/feed.xml', - }); - - blogIndexJson.routes.map((meta) => { - feed.item({ - title: meta.title, - guid: removeFromLast(meta.path, '.'), - url: SITE_URL + removeFromLast(meta.path, '.'), - date: parse(meta.date, 'yyyy-MM-dd', new Date()), - description: meta.description, - custom_elements: [].concat( - meta.author.map((author) => ({ - author: [{ name: authorsJson[author].name }], - })) - ), - }); - }); - - const rss = feed.xml({ indent: true }); - - fs.writeFileSync('./.next/static/feed.xml', rss); -} - -try { - generate(); -} catch (error) { - console.error('Error generating rss feed'); - throw error; -} diff --git a/beta/scripts/migrations/migrateBlogPosts.js b/beta/scripts/migrations/migrateBlogPosts.js deleted file mode 100644 index 8b93c23ab..000000000 --- a/beta/scripts/migrations/migrateBlogPosts.js +++ /dev/null @@ -1,50 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); -const fm = require('gray-matter'); -const globby = require('globby'); -const parse = require('date-fns/parse'); - -/** - * This script takes the gatsby blog posts directory and migrates it. - * - * In gatsby, blog posts were put in markdown files title YYYY-MM-DD-post-title.md. - * This script looks at that directory and then moves posts into folders paths - * that match the end URL structure of /blog/YYYY/MM/DD/postitle.md - * - * This allows us to use MDX in blog posts. - */ - -// I dropped them into src/pages/oldblog -// @todo remove after migration -// I am not proud of this. Also, the blog posts needed to be cleaned up for MDX, don't run this again. -Promise.resolve() - .then(async () => { - const blogManifest = {}; - const blogPosts = await globby('src/pages/oldblog/*.md'); - // console.log(blogPosts); - for (let postpath of blogPosts.sort()) { - const rawStr = await fs.readFile(postpath, 'utf8'); - // console.log(rawStr); - const {data, content} = fm(rawStr); - const cleanPath = postpath.replace('src/pages/oldblog/', ''); - const yrStr = parseInt(cleanPath.substr(0, 4), 10); // 2013-06-02 - // console.log(yrStr); - const dateStr = cleanPath.substr(0, 10); // 2013-06-02 - const postFileName = cleanPath.substr(11); - // console.log(postFileName, dateStr); - const datePath = dateStr.split('-').join('/'); - // console.log(datePath); - const newPath = './src/pages/blog/' + datePath + '/' + postFileName; - // console.log(newPath); - await fs.ensureFile(path.resolve(newPath)); - await fs.writeFile( - path.resolve(newPath), - rawStr - .replace('
', '
') - .replace('
', '
') - .replace('layout: post', '') - .replace('\nauthor', '\nlayout: Post\nauthor') - ); - } - }) - .catch(console.error); diff --git a/beta/scripts/migrations/migratePermalinks.js b/beta/scripts/migrations/migratePermalinks.js deleted file mode 100644 index ad0303d4a..000000000 --- a/beta/scripts/migrations/migratePermalinks.js +++ /dev/null @@ -1,35 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); -const fm = require('gray-matter'); -const globby = require('globby'); - -/** - * This script ensures that every file in the docs folder is named corresponding - * to its respective frontmatter permalink. In the old site, the path of the page was set by - * the `permalink` in markdown frontmatter, and not the name of the file itself or it's id. - * In the new Next.js site, with its filesystem router, the name of the file must - * match exactly to its `permalink`. - */ -Promise.resolve() - .then(async () => { - const pages = await globby('src/pages/docs/**/*.{md,mdx}'); - for (let sourcePath of pages.sort()) { - const rawStr = await fs.readFile(sourcePath, 'utf8'); - const {data, content} = fm(rawStr); - const currentPath = sourcePath - .replace('src/pages/', '') - .replace('.md', ''); - const permalink = data.permalink.replace('.html', ''); - if (permalink !== currentPath) { - const destPath = 'src/pages/' + permalink + '.md'; - try { - await fs.move(sourcePath, destPath); - console.log(`MOVED: ${sourcePath} --> ${destPath}`); - } catch (error) { - console.error(`ERROR: ${sourcePath} --> ${destPath}`); - console.error(error); - } - } - } - }) - .catch(console.error); diff --git a/beta/scripts/migrations/migrateRedirects.js b/beta/scripts/migrations/migrateRedirects.js deleted file mode 100644 index 5e0a6ed0e..000000000 --- a/beta/scripts/migrations/migrateRedirects.js +++ /dev/null @@ -1,117 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); -const fm = require('gray-matter'); -const globby = require('globby'); - -/** - * This script takes a look at all the redirect frontmatter and converts it - * into a Next.js compatible redirects list. It also merges it with netlify's - * _redirects, which we moved by hand below. - * - * @remarks - * In the old gatsby site, redirects were specified in docs and blog post - * frontmatter that looks like: - * - * --- - * redirect_from: - * - /docs/old-path.html#maybe-an-anchor - * --- - */ - -const netlifyRedirects = [ - { - source: '/html-jsx.html', - destination: 'https://magic.reactjs.net/htmltojsx.htm', - permanent: true, - }, - { - source: '/tips/controlled-input-null-value.html', - destination: '/docs/forms.html#controlled-input-null-value', - permanent: false, // @todo why were these not permanent on netlify? - }, - { - source: '/concurrent', - destination: '/docs/concurrent-mode-intro.html', - permanent: false, - }, - { - source: '/hooks', - destination: '/docs/hooks-intro.html', - permanent: false, - }, - { - source: '/tutorial', - destination: '/tutorial/tutorial.html', - permanent: false, - }, - { - source: '/your-story', - destination: 'https://www.surveymonkey.co.uk/r/MVQV2R9', - permanent: true, - }, - { - source: '/stories', - destination: 'https://medium.com/react-community-stories', - permanent: true, - }, -]; - -Promise.resolve() - .then(async () => { - let contentRedirects = []; - let redirectPageCount = 0; - - // Get all markdown pages - const pages = await globby('src/pages/**/*.{md,mdx}'); - for (let filepath of pages) { - // Read file as string - const rawStr = await fs.readFile(filepath, 'utf8'); - // Extract frontmatter - const {data, content} = fm(rawStr); - // Look for redirect yaml - if (data.redirect_from) { - redirectPageCount++; - - let destinationPath = filepath - .replace('src/pages', '') - .replace('.md', ''); - - // Fix /docs/index -> /docs - if (destinationPath === '/docs/index') { - destinationPath = '/docs'; - } - - if (destinationPath === '/index') { - destinationPath = '/'; - } - - for (let sourcePath of data.redirect_from) { - contentRedirects.push({ - source: '/' + sourcePath, // add slash - destination: destinationPath, - permanent: true, - }); - } - } - } - console.log( - `Found ${redirectPageCount} pages with \`redirect_from\` frontmatter` - ); - console.log( - `Writing ${contentRedirects.length} redirects to redirects.json` - ); - - await fs.writeFile( - path.resolve('./src/redirects.json'), - JSON.stringify( - { - redirects: [...contentRedirects, ...netlifyRedirects], - }, - null, - 2 - ) - ); - - console.log('✅ Done writing redirects'); - }) - .catch(console.error); diff --git a/beta/src/authors.json b/beta/src/authors.json deleted file mode 100644 index 76cd5aedd..000000000 --- a/beta/src/authors.json +++ /dev/null @@ -1,130 +0,0 @@ -{ - "acdlite": { - "name": "Andrew Clark", - "url": "https://twitter.com/acdlite" - }, - "benigeri": { - "name": "Paul Benigeri", - "url": "https://github.com/benigeri" - }, - "bvaughn": { - "name": "Brian Vaughn", - "url": "https://github.com/bvaughn" - }, - "chenglou": { - "name": "Cheng Lou", - "url": "https://twitter.com/_chenglou" - }, - "clemmy": { - "name": "Clement Hoang", - "url": "https://twitter.com/c8hoang" - }, - "Daniel15": { - "name": "Daniel Lo Nigro", - "url": "https://d.sb/" - }, - "fisherwebdev": { - "name": "Bill Fisher", - "url": "https://twitter.com/fisherwebdev" - }, - "flarnie": { - "name": "Flarnie Marchan", - "url": "https://twitter.com/ProbablyFlarnie" - }, - "gaearon": { - "name": "Dan Abramov", - "url": "https://twitter.com/dan_abramov" - }, - "jaredly": { - "name": "Jared Forsyth", - "url": "https://twitter.com/jaredforsyth" - }, - "jgebhardt": { - "name": "Jonas Gebhardt", - "url": "https://twitter.com/jonasgebhardt" - }, - "jimfb": { - "name": "Jim Sproch", - "url": "http: //www.jimsproch.com" - }, - "jingc": { - "name": "Jing Chen", - "url": "https://twitter.com/jingc" - }, - "josephsavona": { - "name": "Joseph Savona", - "url": "https://twitter.com/en_JS" - }, - "keyanzhang": { - "name": "Keyan Zhang", - "url": "https://twitter.com/keyanzhang" - }, - "kmeht": { - "name": "Kunal Mehta", - "url": "https://github.com/kmeht" - }, - "LoukaN": { - "name": "Lou Husson", - "url": "https://twitter.com/loukan42" - }, - "matthewjohnston4": { - "name": "Matthew Johnston", - "url": "https://github.com/matthewathome" - }, - "nhunzaker": { - "name": "Nathan Hunzaker", - "url": "https://github.com/nhunzaker" - }, - "petehunt": { - "name": "Pete Hunt", - "url": "https://twitter.com/floydophone" - }, - "rachelnabors": { - "name": "Rachel Nabors", - "url": "https://twitter.com/rachelnabors" - }, - "schrockn": { - "name": "Nick Schrock", - "url": "https://twitter.com/schrockn" - }, - "sebmarkbage": { - "name": "Sebastian Markbåge", - "url": "https://twitter.com/sebmarkbage" - }, - "sophiebits": { - "name": "Sophie Alpert", - "url": "https://sophiebits.com/" - }, - "steveluscher": { - "name": "Steven Luscher", - "url": "https://twitter.com/steveluscher" - }, - "tesseralis": { - "name": "Nat Alison", - "url": "https://twitter.com/tesseralis" - }, - "threepointone": { - "name": "Sunil Pai", - "url": "https://twitter.com/threepointone" - }, - "timer": { - "name": "Joe Haddad", - "url": "https://twitter.com/timer150" - }, - "vjeux": { - "name": "Vjeux", - "url": "https://twitter.com/vjeux" - }, - "wincent": { - "name": "Greg Hurrell", - "url": "https://twitter.com/wincent" - }, - "zpao": { - "name": "Paul O’Shannessy", - "url": "https://twitter.com/zpao" - }, - "tomocchino": { - "name": "Tom Occhino", - "url": "https://twitter.com/tomocchino" - } -} diff --git a/beta/src/blogIndex.json b/beta/src/blogIndex.json deleted file mode 100644 index 088a1f82c..000000000 --- a/beta/src/blogIndex.json +++ /dev/null @@ -1,1400 +0,0 @@ -{ - "routes": [ - { - "path": "/blog/2020/08/10/react-v17-rc.md", - "date": "2020-08-10", - "title": "React v17.0 Release Candidate: No New Features", - "author": [ - "gaearon", - "rachelnabors" - ], - "excerpt": "

Today, we are publishing the first Release Candidate for React 17. It has been two and a half years since the previous major release of React, which is a long time even by our standards! In this blog post, we will describe the role of this major release, what changes you can expect in it, and how you can try this release.

\n", - "readingTime": "20 min read" - }, - { - "path": "/blog/2020/02/26/react-v16.13.0.md", - "date": "2020-02-26", - "title": "React v16.13.0", - "author": [ - "threepointone" - ], - "excerpt": "

Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.md", - "date": "2019-11-06", - "title": "Building Great User Experiences with Concurrent Mode and Suspense", - "author": [ - "josephsavona" - ], - "excerpt": "

At React Conf 2019 we announced an experimental release of React that supports Concurrent Mode and Suspense. In this post we’ll introduce best practices for using them that we’ve identified through the process of building the new facebook.com.

\n", - "readingTime": "17 min read" - }, - { - "path": "/blog/2019/10/22/react-release-channels.md", - "date": "2019-10-22", - "title": "Preparing for the Future with React Prereleases", - "author": [ - "acdlite" - ], - "excerpt": "

To share upcoming changes with our partners in the React ecosystem, we’re establishing official prerelease channels. We hope this process will help us make changes to React with confidence, and give developers the opportunity to try out experimental features.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/08/15/new-react-devtools.md", - "date": "2019-08-15", - "title": "Introducing the New React DevTools", - "author": [ - "bvaughn" - ], - "excerpt": "

We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2019/08/08/react-v16.9.0.md", - "date": "2019-08-08", - "title": "React v16.9.0 and the Roadmap Update", - "author": [ - "gaearon", - "bvaughn" - ], - "excerpt": "

Today we are releasing React 16.9. It contains several new features, bugfixes, and new deprecation warnings to help prepare for a future major release.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2019/02/23/is-react-translated-yet.md", - "date": "2019-02-23", - "title": "Is React Translated Yet? ¡Sí! Sim! ã¯ã„ï¼", - "author": [ - "tesseralis" - ], - "excerpt": "

We’re excited to announce an ongoing effort to maintain official translations of the React documentation website into different languages. Thanks to the dedicated efforts of React community members from around the world, React is now being translated into over 30 languages! You can find them on the new Languages page.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/02/06/react-v16.8.0.md", - "date": "2019-02-06", - "title": "React v16.8: The One With Hooks", - "author": [ - "gaearon" - ], - "excerpt": "

With React 16.8, React Hooks are available in a stable release!

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2018/12/19/react-v-16-7.md", - "date": "2018-12-19", - "title": "React v16.7: No, This Is Not the One With Hooks", - "author": [ - "acdlite" - ], - "excerpt": "

Our latest release includes an important performance bugfix for React.lazy. Although there are no API changes, we’re releasing it as a minor instead of a patch.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2018/11/27/react-16-roadmap.md", - "date": "2018-11-27", - "title": "React 16.x Roadmap", - "author": [ - "gaearon" - ], - "excerpt": "

You might have heard about features like “Hooksâ€, “Suspenseâ€, and “Concurrent Rendering†in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React.

\n", - "readingTime": "14 min read" - }, - { - "path": "/blog/2018/11/13/react-conf-recap.md", - "date": "2018-11-13", - "title": "React Conf recap: Hooks, Suspense, and Concurrent Rendering", - "author": [ - "tomocchino" - ], - "excerpt": "

This year’s React Conf took place on October 25 and 26 in Henderson, Nevada, where more than 600 attendees gathered to discuss the latest in UI engineering.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2018/10/23/react-v-16-6.md", - "date": "2018-10-23", - "title": "React v16.6.0: lazy, memo and contextType", - "author": [ - "sebmarkbage" - ], - "excerpt": "

Today we’re releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2018/10/01/create-react-app-v2.md", - "date": "2018-10-01", - "title": "Create React App 2.0: Babel 7, Sass, and More", - "author": [ - "timer", - "gaearon" - ], - "excerpt": "

Create React App 2.0 has been released today, and it brings a year’s worth of improvements in a single dependency update.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2018/09/10/introducing-the-react-profiler.md", - "date": "2018-09-10", - "title": "Introducing the React Profiler", - "author": [ - "bvaughn" - ], - "excerpt": "

React 16.5 adds support for a new DevTools profiler plugin.

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2018/08/01/react-v-16-4-2.md", - "date": "2018-08-01", - "title": "React v16.4.2: Server-side vulnerability fix", - "author": [ - "gaearon" - ], - "excerpt": "

We discovered a minor vulnerability that might affect some apps using ReactDOMServer. We are releasing a patch version for every affected React minor release so that you can upgrade with no friction. Read on for more details.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2018/06/07/you-probably-dont-need-derived-state.md", - "date": "2018-06-07", - "title": "You Probably Don't Need Derived State", - "author": [ - "bvaughn" - ], - "excerpt": "

React 16.4 included a bugfix for getDerivedStateFromProps which caused some existing bugs in React components to reproduce more consistently. If this release exposed a case where your application was using an anti-pattern and didn’t work properly after the fix, we’re sorry for the churn. In this post, we will explain some common anti-patterns with derived state and our preferred alternatives.

\n", - "readingTime": "14 min read" - }, - { - "path": "/blog/2018/05/23/react-v-16-4.md", - "date": "2018-05-23", - "title": "React v16.4.0: Pointer Events", - "author": [ - "acdlite" - ], - "excerpt": "

The latest minor release adds support for an oft-requested feature: pointer events!

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2018/03/29/react-v-16-3.md", - "date": "2018-03-29", - "title": "React v16.3.0: New lifecycles and context API", - "author": [ - "bvaughn" - ], - "excerpt": "

A few days ago, we wrote a post about upcoming changes to our legacy lifecycle methods, including gradual migration strategies. In React 16.3.0, we are adding a few new lifecycle methods to assist with that migration. We are also introducing new APIs for long requested features: an official context API, a ref forwarding API, and an ergonomic ref API.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2018/03/27/update-on-async-rendering.md", - "date": "2018-03-27", - "title": "Update on Async Rendering", - "author": [ - "bvaughn" - ], - "excerpt": "

For over a year, the React team has been working to implement asynchronous rendering. Last month during his talk at JSConf Iceland, Dan unveiled some of the exciting new possibilities async rendering unlocks. Now we’d like to share with you some of the lessons we’ve learned while working on these features, and some recipes to help prepare your components for async rendering when it launches.

\n", - "readingTime": "12 min read" - }, - { - "path": "/blog/2018/03/01/sneak-peek-beyond-react-16.md", - "date": "2018-03-01", - "title": "Sneak Peek: Beyond React 16", - "author": [ - "sophiebits" - ], - "excerpt": "

Dan Abramov from our team just spoke at JSConf Iceland 2018 with a preview of some new features we’ve been working on in React. The talk opens with a question: “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?â€

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2017/12/15/improving-the-repository-infrastructure.md", - "date": "2017-12-15", - "title": "Behind the Scenes: Improving the Repository Infrastructure", - "author": [ - "gaearon", - "bvaughn" - ], - "excerpt": "

As we worked on React 16, we revamped the folder structure and much of the build tooling in the React repository. Among other things, we introduced projects such as Rollup, Prettier, and Google Closure Compiler into our workflow. People often ask us questions about how we use those tools. In this post, we would like to share some of the changes that we’ve made to our build and test infrastructure in 2017, and what motivated them.

\n", - "readingTime": "30 min read" - }, - { - "path": "/blog/2017/12/07/introducing-the-react-rfc-process.md", - "date": "2017-12-07", - "title": "Introducing the React RFC Process", - "author": [ - "acdlite" - ], - "excerpt": "

We’re adopting an RFC (“request for commentsâ€) process for contributing ideas to React.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2017/11/28/react-v16.2.0-fragment-support.md", - "date": "2017-11-28", - "title": "React v16.2.0: Improved Support for Fragments", - "author": [ - "clemmy" - ], - "excerpt": "

React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature fragments:

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2017/09/26/react-v16.0.md", - "date": "2017-09-26", - "title": "React v16.0", - "author": [ - "acdlite" - ], - "excerpt": "

We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2017/09/25/react-v15.6.2.md", - "date": "2017-09-25", - "title": "React v15.6.2", - "author": [ - "nhunzaker" - ], - "excerpt": "

Today we’re sending out React 15.6.2. In 15.6.1, we shipped a few fixes for change events and inputs that had some unintended consequences. Those regressions have been ironed out, and we’ve also included a few more fixes to improve the stability of React across all browsers.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2017/09/08/dom-attributes-in-react-16.md", - "date": "2017-09-08", - "title": "DOM Attributes in React 16", - "author": [ - "gaearon" - ], - "excerpt": "

In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn’t recognize, React would just skip it. For example, this:

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2017/07/26/error-handling-in-react-16.md", - "date": "2017-07-26", - "title": "Error Handling in React 16", - "author": [ - "gaearon" - ], - "excerpt": "

As React 16 release is getting closer, we would like to announce a few changes to how React handles JavaScript errors inside components. These changes are included in React 16 beta versions, and will be a part of React 16.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2017/06/13/react-v15.6.0.md", - "date": "2017-06-13", - "title": "React v15.6.0", - "author": [ - "flarnie" - ], - "excerpt": "

Today we are releasing React 15.6.0. As we prepare for React 16.0, we have been fixing and cleaning up many things. This release continues to pave the way.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2017/05/18/whats-new-in-create-react-app.md", - "date": "2017-05-18", - "title": "What's New in Create React App", - "author": [ - "gaearon" - ], - "excerpt": "

Less than a year ago, we introduced Create React App as an officially supported way to create apps with zero configuration. The project has since enjoyed tremendous growth, with over 950 commits by more than 250 contributors.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2017/04/07/react-v15.5.0.md", - "date": "2017-04-07", - "title": "React v15.5.0", - "author": [ - "acdlite" - ], - "excerpt": "

It’s been exactly one year since the last breaking change to React. Our next major release, React 16, will include some exciting improvements, including a complete rewrite of React’s internals. We take stability seriously, and are committed to bringing those improvements to all of our users with minimal effort.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2016/11/16/react-v15.4.0.md", - "date": "2016-11-16", - "title": "React v15.4.0", - "author": [ - "gaearon" - ], - "excerpt": "

Today we are releasing React 15.4.0.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2016/09/28/our-first-50000-stars.md", - "date": "2016-09-28", - "title": "Our First 50,000 Stars", - "author": [ - "vjeux" - ], - "excerpt": "

Just three and a half years ago we open sourced a little JavaScript library called React. The journey since that day has been incredibly exciting.

\n", - "readingTime": "10 min read" - }, - { - "path": "/blog/2016/08/05/relay-state-of-the-state.md", - "date": "2016-08-05", - "title": "Relay: State of the State", - "author": [ - "josephsavona" - ], - "excerpt": "

This month marks a year since we released Relay and we’d like to share an update on the project and what’s next.

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2016/07/22/create-apps-with-no-configuration.md", - "date": "2016-07-22", - "title": "Create Apps with No Configuration", - "author": [ - "gaearon" - ], - "excerpt": "

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

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2016/07/13/mixins-considered-harmful.md", - "date": "2016-07-13", - "title": "Mixins Considered Harmful", - "author": [ - "gaearon" - ], - "excerpt": "

“How do I share the code between several components?†is one of the first questions that people ask when they learn React. Our answer has always been to use component composition for code reuse. You can define a component and use it in several other components.

\n", - "readingTime": "20 min read" - }, - { - "path": "/blog/2016/07/11/introducing-reacts-error-code-system.md", - "date": "2016-07-11", - "title": "Introducing React's Error Code System", - "author": [ - "keyanzhang" - ], - "excerpt": "

Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of bytes sent over the wire.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2016/04/08/react-v15.0.1.md", - "date": "2016-04-08", - "title": "React v15.0.1", - "author": [ - "zpao" - ], - "excerpt": "

Yesterday afternoon we shipped v15.0.0 and quickly got some feedback about a couple of issues. We apologize for these problems and we’ve been working since then to make sure we get fixes into your hands as quickly as possible.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2016/04/07/react-v15.md", - "date": "2016-04-07", - "title": "React v15.0", - "author": [ - "gaearon" - ], - "excerpt": "

We would like to thank the React community for reporting issues and regressions in the release candidates on our issue tracker. Over the last few weeks we fixed those issues, and now, after two release candidates, we are excited to finally release the stable version of React 15.

\n", - "readingTime": "15 min read" - }, - { - "path": "/blog/2016/03/29/react-v0.14.8.md", - "date": "2016-03-29", - "title": "React v0.14.8", - "author": [ - "gaearon" - ], - "excerpt": "

We have already released two release candidates for React 15, and the final version is coming soon.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2016/03/16/react-v15-rc2.md", - "date": "2016-03-16", - "title": "React v15.0 Release Candidate 2", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re releasing a second release candidate for version 15. Primarily this is to address 2 issues, but we also picked up a few small changes from new contributors, including some improvements to some of our new warnings.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2016/03/07/react-v15-rc1.md", - "date": "2016-03-07", - "title": "React v15.0 Release Candidate", - "author": [ - "zpao" - ], - "excerpt": "

Sorry for the small delay in releasing this. As we said, we’ve been busy binge-watching House of Cards. That scene in the last episode where Francis and Claire Underwood ████████████████████████████████████. WOW!

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2016/02/19/new-versioning-scheme.md", - "date": "2016-02-19", - "title": "New Versioning Scheme", - "author": [ - "sebmarkbage" - ], - "excerpt": "

Today we’re announcing that we’re switching to major revisions for React. The current version is 0.14.7. The next release will be: 15.0.0

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2016/01/12/discontinuing-ie8-support.md", - "date": "2016-01-12", - "title": "Discontinuing IE 8 Support in React DOM", - "author": [ - "sophiebits" - ], - "excerpt": "

Since its 2013 release, React has supported all popular browsers, including Internet Explorer 8 and above. We handle normalizing many quirks present in old browser versions, including event system differences, so that your app code doesn’t have to worry about most browser bugs.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.md", - "date": "2016-01-08", - "title": "(A => B) !=> (B => A)", - "author": [ - "jimfb" - ], - "excerpt": "

The documentation for componentWillReceiveProps states that componentWillReceiveProps will be invoked when the props change as the result of a rerender. Some people assume this means “if componentWillReceiveProps is called, then the props must have changedâ€, but that conclusion is logically incorrect.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/12/29/react-v0.14.4.md", - "date": "2015-12-29", - "title": "React v0.14.4", - "author": [ - "sophiebits" - ], - "excerpt": "

Happy December! We have a minor point release today. It has just a few small bug fixes.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2015/12/18/react-components-elements-and-instances.md", - "date": "2015-12-18", - "title": "React Components, Elements, and Instances", - "author": [ - "gaearon" - ], - "excerpt": "

The difference between components, their instances, and elements confuses many React beginners. Why are there three different terms to refer to something that is painted on screen?

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2015/12/16/ismounted-antipattern.md", - "date": "2015-12-16", - "title": "isMounted is an Antipattern", - "author": [ - "jimfb" - ], - "excerpt": "

As we move closer to officially deprecating isMounted, it’s worth understanding why the function is an antipattern, and how to write code without the isMounted function.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.md", - "date": "2015-12-04", - "title": "React.js Conf 2016 Diversity Scholarship", - "author": [ - "zpao" - ], - "excerpt": "

I am thrilled to announced that we will be organizing another diversity scholarship program for the upcoming React.js Conf! The tech industry is suffering from a lack of diversity, but it’s important to us that we have a thriving community that is made up of people with a variety of experiences and viewpoints.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/11/18/react-v0.14.3.md", - "date": "2015-11-18", - "title": "React v0.14.3", - "author": [ - "zpao" - ], - "excerpt": "

It’s time for another installment of React patch releases! We didn’t break anything in v0.14.2 but we do have a couple of other bugs we’re fixing. The biggest change in this release is actually an addition of a new built file. We heard from a number of people that they still need the ability to use React to render to a string on the client. While the use cases are not common and there are other ways to achieve this, we decided that it’s still valuable to support. So we’re now building react-dom-server.js, which will be shipped to Bower and in the dist/ directory of the react-dom package on npm. This file works the same way as react-dom.js and therefore requires that the primary React build has already been included on the page.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/11/02/react-v0.14.2.md", - "date": "2015-11-02", - "title": "React v0.14.2", - "author": [ - "zpao" - ], - "excerpt": "

We have a quick update following the release of 0.14.1 last week. It turns out we broke a couple things in the development build of React when using Internet Explorer. Luckily it was only the development build, so your production applications were unaffected. This release is mostly to address those issues. There is one notable change if consuming React from npm. For the react-dom package, we moved react from a regular dependency to a peer dependency. This will impact very few people as these two are typically installed together at the top level, but it will fix some issues with dependencies of installed components also using react as a peer dependency.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/10/28/react-v0.14.1.md", - "date": "2015-10-28", - "title": "React v0.14.1", - "author": [ - "zpao" - ], - "excerpt": "

After a couple weeks of having more people use v0.14, we’re ready to ship a patch release addressing a few issues. Thanks to everybody who has reported issues and written patches!

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/10/19/reactiflux-is-moving-to-discord.md", - "date": "2015-10-19", - "title": "Reactiflux is moving to Discord", - "author": [ - "benigeri" - ], - "excerpt": "

TL;DR: Slack decided that Reactiflux had too many members and disabled new invites. Reactiflux is moving to Discord. Join us: http://join.reactiflux.com

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2015/10/07/react-v0.14.md", - "date": "2015-10-07", - "title": "React v0.14", - "author": [ - "sophiebits" - ], - "excerpt": "

We’re happy to announce the release of React 0.14 today! This release has a few major changes, primarily designed to simplify the code you write every day and to better support environments like React Native.

\n", - "readingTime": "12 min read" - }, - { - "path": "/blog/2015/10/01/react-render-and-top-level-api.md", - "date": "2015-10-01", - "title": "ReactDOM.render and the Top Level React API", - "author": [ - "jimfb", - "sebmarkbage" - ], - "excerpt": "

When you’re in React’s world you are just building components that fit into other components. Everything is a component. Unfortunately not everything around you is built using React. At the root of your tree you still have to write some plumbing code to connect the outer world into React.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/09/14/community-roundup-27.md", - "date": "2015-09-14", - "title": "Community Round-up #27 – Relay Edition", - "author": [ - "steveluscher" - ], - "excerpt": "

In the weeks following the open-source release of the Relay technical preview, the community has been abuzz with activity. We are honored to have been able to enjoy a steady stream of ideas and contributions from such a talented group of individuals. Let’s take a look at some of the things we’ve achieved, together!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/09/10/react-v0.14-rc1.md", - "date": "2015-09-10", - "title": "React v0.14 Release Candidate", - "author": [ - "sophiebits" - ], - "excerpt": "

We’re happy to announce our first release candidate for React 0.14! We gave you a sneak peek in July at the upcoming changes but we’ve now stabilized the release more and we’d love for you to try it out before we release the final version.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2015/09/02/new-react-developer-tools.md", - "date": "2015-09-02", - "title": "New React Developer Tools", - "author": [ - "sophiebits" - ], - "excerpt": "

A month ago, we posted a beta of the new React developer tools. Today, we’re releasing the first stable version of the new devtools. We’re calling it version 0.14, but it’s a full rewrite so we think of it more like a 2.0 release.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/08/13/reacteurope-roundup.md", - "date": "2015-08-13", - "title": "ReactEurope Round-up", - "author": [ - "matthewjohnston4" - ], - "excerpt": "

Last month, the first React.js European conference took place in the city of Paris, at ReactEurope. Attendees were treated to a range of talks covering React, React Native, Flux, Relay, and GraphQL. Big thanks to everyone involved with organizing the conference, to all the attendees, and everyone who gave their time to speak - it wouldn’t have been possible without the help and support of the React community.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2015/08/11/relay-technical-preview.md", - "date": "2015-08-11", - "title": "Relay Technical Preview", - "author": [ - "josephsavona" - ], - "excerpt": "

Relay

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/08/03/new-react-devtools-beta.md", - "date": "2015-08-03", - "title": "New React Devtools Beta", - "author": [ - "jaredly" - ], - "excerpt": "

We’ve made an entirely new version of the devtools, and we want you to try it

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/07/03/react-v0.14-beta-1.md", - "date": "2015-07-03", - "title": "React v0.14 Beta 1", - "author": [ - "sophiebits" - ], - "excerpt": "

This week, many people in the React community are at ReactEurope in the beautiful (and very warm) city of Paris, the second React conference that’s been held to date. At our last conference, we released the first beta of React 0.13, and we figured we’d do the same today with our first beta of React 0.14, giving you something to play with if you’re not at the conference or you’re looking for something to do on the way home.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2015/06/12/deprecating-jstransform-and-react-tools.md", - "date": "2015-06-12", - "title": "Deprecating JSTransform and react-tools", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re announcing the deprecation of react-tools and JSTransform.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/05/22/react-native-release-process.md", - "date": "2015-05-22", - "title": "React Native Release Process", - "author": [ - "vjeux" - ], - "excerpt": "

The React Native release process have been a bit chaotic since we open sourced. It was unclear when new code was released, there was no changelog, we bumped the minor and patch version inconsistently and we often had to submit updates right after a release to fix a bad bug. In order to move fast with stable infra, we are introducing a real release process with a two-week release schedule.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/05/08/react-v0.13.3.md", - "date": "2015-05-08", - "title": "React v0.13.3", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re sharing another patch release in the v0.13 branch. There are only a few small changes, with a couple to address some issues that arose around that undocumented feature so many of you are already using: context. We also improved developer ergonomics just a little bit, making some warnings better.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2015/05/01/graphql-introduction.md", - "date": "2015-05-01", - "title": "GraphQL Introduction", - "author": [ - "schrockn" - ], - "excerpt": "

At the React.js conference in late January 2015, we revealed our next major technology in the React family: Relay.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2015/04/18/react-v0.13.2.md", - "date": "2015-04-18", - "title": "React v0.13.2", - "author": [ - "zpao" - ], - "excerpt": "

Yesterday the React Native team shipped v0.4. Those of us working on the web team just a few feet away couldn’t just be shown up like that so we’re shipping v0.13.2 today as well! This is a bug fix release to address a few things while we continue to work towards v0.14.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/04/17/react-native-v0.4.md", - "date": "2015-04-17", - "title": "React Native v0.4", - "author": [ - "vjeux" - ], - "excerpt": "

It’s been three weeks since we open sourced React Native and there’s been some insane amount of activity already: over 12.5k stars, 1000 commits, 500 issues, 380 pull requests, and 100 contributors, plus 35 plugins and 1 app in the app store! We were expecting some buzz around the project but this is way beyond anything we imagined. Thank you!

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/03/30/community-roundup-26.md", - "date": "2015-03-30", - "title": "Community Round-up #26", - "author": [ - "vjeux" - ], - "excerpt": "

We open sourced React Native last week and the community reception blew away all our expectations! So many of you tried it, made cool stuff with it, raised many issues and even submitted pull requests to fix them! The entire team wants to say thank you!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/03/26/introducing-react-native.md", - "date": "2015-03-26", - "title": "Introducing React Native", - "author": [ - "sophiebits" - ], - "excerpt": "

In January at React.js Conf, we announced React Native, a new framework for building native apps using React. We’re happy to announce that we’re open-sourcing React Native and you can start building your apps with it today.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/03/19/building-the-facebook-news-feed-with-relay.md", - "date": "2015-03-19", - "title": "Building The Facebook News Feed With Relay", - "author": [ - "josephsavona" - ], - "excerpt": "

At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post, we’ll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven’t already we recommend reading our introductory blog post or watching the conference talk.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2015/03/16/react-v0.13.1.md", - "date": "2015-03-16", - "title": "React v0.13.1", - "author": [ - "zpao" - ], - "excerpt": "

It’s been less than a week since we shipped v0.13.0 but it’s time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/03/10/react-v0.13.md", - "date": "2015-03-10", - "title": "React v0.13", - "author": [ - "sophiebits" - ], - "excerpt": "

Today, we’re happy to release React v0.13!

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2015/03/04/community-roundup-25.md", - "date": "2015-03-04", - "title": "Community Round-up #25", - "author": [ - "matthewjohnston4" - ], - "excerpt": "

React 101

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/03/03/react-v0.13-rc2.md", - "date": "2015-03-03", - "title": "React v0.13 RC2", - "author": [ - "sebmarkbage" - ], - "excerpt": "

Thanks to everybody who has already been testing the release candidate. We’ve received some good feedback and as a result we’re going to do a second release candidate. The changes are minimal. We haven’t changed the behavior of any APIs we exposed in the previous release candidate. Here’s a summary of the changes:

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/02/24/streamlining-react-elements.md", - "date": "2015-02-24", - "title": "Streamlining React Elements", - "author": [ - "sebmarkbage" - ], - "excerpt": "

React v0.13 is right around the corner and so we wanted to discuss some upcoming changes to ReactElement. In particular, we added several warnings to some esoteric use cases of ReactElement. There are no runtime behavior changes for ReactElement - we’re adding these warnings in the hope that we can change some behavior in v0.14 if the changes are valuable to the community.

\n", - "readingTime": "10 min read" - }, - { - "path": "/blog/2015/02/24/react-v0.13-rc1.md", - "date": "2015-02-24", - "title": "React v0.13 RC", - "author": [ - "zpao" - ], - "excerpt": "

Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/02/20/introducing-relay-and-graphql.md", - "date": "2015-02-20", - "title": "Introducing Relay and GraphQL", - "author": [ - "wincent" - ], - "excerpt": "

Data fetching for React applications

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2015/02/18/react-conf-roundup-2015.md", - "date": "2015-02-18", - "title": "React.js Conf Round-up 2015", - "author": [ - "steveluscher" - ], - "excerpt": "

It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be able to unveil three new technologies that we’ve been using internally at Facebook for some time: GraphQL, Relay, and React Native.

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2015/01/27/react-v0.13.0-beta-1.md", - "date": "2015-01-27", - "title": "React v0.13.0 Beta 1", - "author": [ - "sebmarkbage" - ], - "excerpt": "

React 0.13 has a lot of nice features but there is one particular feature that I’m really excited about. I couldn’t wait for React.js Conf to start tomorrow morning.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2014/12/19/react-js-conf-diversity-scholarship.md", - "date": "2014-12-19", - "title": "React.js Conf Diversity Scholarship", - "author": [ - "zpao" - ], - "excerpt": "

Today I’m really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2014/12/18/react-v0.12.2.md", - "date": "2014-12-18", - "title": "React v0.12.2", - "author": [ - "zpao" - ], - "excerpt": "

We just shipped React v0.12.2, bringing the 0.12 branch up to date with a few small fixes that landed in master over the past 2 months.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/11/25/community-roundup-24.md", - "date": "2014-11-25", - "title": "Community Round-up #24", - "author": [ - "steveluscher" - ], - "excerpt": "

Keep it Simple

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2014/11/24/react-js-conf-updates.md", - "date": "2014-11-24", - "title": "React.js Conf Updates", - "author": [ - "vjeux" - ], - "excerpt": "

Yesterday was the React.js Conf call for presenters submission deadline. We were

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/10/28/react-v0.12.md", - "date": "2014-10-28", - "title": "React v0.12", - "author": [ - "zpao" - ], - "excerpt": "

We’re happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback!

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2014/10/27/react-js-conf.md", - "date": "2014-10-27", - "title": "React.js Conf", - "author": [ - "vjeux" - ], - "excerpt": "

Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been “some dayâ€. In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2014/10/17/community-roundup-23.md", - "date": "2014-10-17", - "title": "Community Round-up #23", - "author": [ - "LoukaN" - ], - "excerpt": "

This round-up is a special edition on Flux. If you expect to see diagrams showing arrows that all point in the same direction, you won’t be disappointed!

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2014/10/16/react-v0.12-rc1.md", - "date": "2014-10-16", - "title": "React v0.12 RC", - "author": [ - "sebmarkbage" - ], - "excerpt": "

We are finally ready to share the work we’ve been doing over the past couple months. A lot has gone into this and we want to make sure we iron out any potential issues before we make this final. So, we’re shipping a Release Candidate for React v0.12 today. If you get a chance, please give it a try and report any issues you find! A full changelog will accompany the final release but we’ve highlighted the interesting and breaking changes below.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2014/10/14/introducing-react-elements.md", - "date": "2014-10-14", - "title": "Introducing React Elements", - "author": [ - "sebmarkbage" - ], - "excerpt": "

The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the ReactElement type really FAST, jest unit testing easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2014/09/24/testing-flux-applications.md", - "date": "2014-09-24", - "title": "Testing Flux Applications", - "author": [ - "fisherwebdev" - ], - "excerpt": "

A more up-to-date version of this post is available as part of the Flux documentation.

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2014/09/16/react-v0.11.2.md", - "date": "2014-09-16", - "title": "React v0.11.2", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re releasing React v0.11.2 to add a few small features.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/09/12/community-round-up-22.md", - "date": "2014-09-12", - "title": "Community Round-up #22", - "author": [ - "LoukaN" - ], - "excerpt": "

This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/09/03/introducing-the-jsx-specification.md", - "date": "2014-09-03", - "title": "Introducing the JSX Specification", - "author": [ - "sebmarkbage" - ], - "excerpt": "

At Facebook we’ve been using JSX for a long time. We originally introduced it to the world last year alongside React, but we actually used it in another form before that to create native DOM nodes. We’ve also seen some similar efforts grow out of our work in order to be used with other libraries and in interesting ways. At this point React JSX is just one of many implementations.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2014/08/03/community-roundup-21.md", - "date": "2014-08-03", - "title": "Community Round-up #21", - "author": [ - "LoukaN" - ], - "excerpt": "

React Router

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2014/07/30/flux-actions-and-the-dispatcher.md", - "date": "2014-07-30", - "title": "Flux: Actions and the Dispatcher", - "author": [ - "fisherwebdev" - ], - "excerpt": "

Flux is the application architecture Facebook uses to build JavaScript applications. It’s based on a unidirectional data flow. We’ve built everything from small widgets to huge applications with Flux, and it’s handled everything we’ve thrown at it. Because we’ve found it to be a great way to structure our code, we’re excited to share it with the open source community. Jing Chen presented Flux at the F8 conference, and since that time we’ve seen a lot of interest in it. We’ve also published an overview of Flux and a TodoMVC example, with an accompanying tutorial.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2014/07/28/community-roundup-20.md", - "date": "2014-07-28", - "title": "Community Round-up #20", - "author": [ - "LoukaN" - ], - "excerpt": "

It’s an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/07/25/react-v0.11.1.md", - "date": "2014-07-25", - "title": "React v0.11.1", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they’ve begun upgrading.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/07/17/react-v0.11.md", - "date": "2014-07-17", - "title": "React v0.11", - "author": [ - "zpao" - ], - "excerpt": "

Update: We missed a few important changes in our initial post and changelog. We’ve updated this post with details about Descriptors and Prop Type Validation.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2014/07/13/react-v0.11-rc1.md", - "date": "2014-07-13", - "title": "React v0.11 RC", - "author": [ - "zpao" - ], - "excerpt": "

It’s that time again… we’re just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2014/06/27/community-roundup-19.md", - "date": "2014-06-27", - "title": "Community Round-up #19", - "author": [ - "chenglou" - ], - "excerpt": "

React Meetups!

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2014/05/29/one-year-of-open-source-react.md", - "date": "2014-05-29", - "title": "One Year of Open-Source React", - "author": [ - "chenglou" - ], - "excerpt": "

Today marks the one-year open-source anniversary of React.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/05/06/flux.md", - "date": "2014-05-06", - "title": "Flux: An Application Architecture for React", - "author": [ - "fisherwebdev", - "jingc" - ], - "excerpt": "

We recently spoke at one of f8’s breakout session about Flux, a data flow architecture that works well with React. Check out the video here:

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/04/04/reactnet.md", - "date": "2014-04-04", - "title": "Use React and JSX in ASP.NET MVC", - "author": [ - "Daniel15" - ], - "excerpt": "

Today we’re happy to announce the initial release of

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2014/03/28/the-road-to-1.0.md", - "date": "2014-03-28", - "title": "The Road to 1.0", - "author": [ - "zpao" - ], - "excerpt": "

When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We’ve learned a lot over the past 9 months and we’ve thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined [several projects][projects] that we have planned to take us to 1.0 and beyond. Today I’m writing a bit more about them to give our users a better insight into our plans.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/03/21/react-v0.10.md", - "date": "2014-03-21", - "title": "React v0.10", - "author": [ - "zpao" - ], - "excerpt": "

Hot on the heels of the release candidate earlier this week, we’re ready to call v0.10 done. The only major issue we discovered had to do with the react-tools package, which has been updated. We’ve copied over the changelog from the RC with some small clarifying changes.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/03/19/react-v0.10-rc1.md", - "date": "2014-03-19", - "title": "React v0.10 RC", - "author": [ - "zpao" - ], - "excerpt": "

v0.9 has only been out for a month, but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don’t have a long list of changes to talk about.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/03/14/community-roundup-18.md", - "date": "2014-03-14", - "title": "Community Round-up #18", - "author": [ - "jgebhardt" - ], - "excerpt": "

In this Round-up, we are taking a few closer looks at React’s interplay with different frameworks and architectures.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2014/02/24/community-roundup-17.md", - "date": "2014-02-24", - "title": "Community Round-up #17", - "author": [ - "jgebhardt" - ], - "excerpt": "

It’s exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2014/02/20/react-v0.9.md", - "date": "2014-02-20", - "title": "React v0.9", - "author": [ - "sophiebits" - ], - "excerpt": "

I’m excited to announce that today we’re releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2014/02/16/react-v0.9-rc1.md", - "date": "2014-02-16", - "title": "React v0.9 RC", - "author": [ - "sophiebits" - ], - "excerpt": "

We’re almost ready to release React v0.9! We’re posting a release candidate so that you can test your apps on it; we’d much prefer to find show-stopping bugs now rather than after we release.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2014/02/15/community-roundup-16.md", - "date": "2014-02-15", - "title": "Community Round-up #16", - "author": [ - "jgebhardt" - ], - "excerpt": "

There have been many posts recently covering the why and how of React. This week’s community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/02/05/community-roundup-15.md", - "date": "2014-02-05", - "title": "Community Round-up #15", - "author": [ - "jgebhardt" - ], - "excerpt": "

Interest in React seems to have surged ever since David Nolen (@swannodette)‘s introduction of Om in his post “The Future of JavaScript MVC Frameworksâ€.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/01/06/community-roundup-14.md", - "date": "2014-01-06", - "title": "Community Round-up #14", - "author": [ - "vjeux" - ], - "excerpt": "

The theme of this first round-up of 2014 is integration. I’ve tried to assemble a list of articles and projects that use React in various environments.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2014/01/02/react-chrome-developer-tools.md", - "date": "2014-01-02", - "title": "React Chrome Developer Tools", - "author": [ - "sebmarkbage" - ], - "excerpt": "

With the new year, we thought you’d enjoy some new tools for debugging React code. Today we’re releasing the React Developer Tools, an extension to the Chrome Developer Tools. Download them from the Chrome Web Store.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/12/30/community-roundup-13.md", - "date": "2013-12-30", - "title": "Community Round-up #13", - "author": [ - "vjeux" - ], - "excerpt": "

Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/12/23/community-roundup-12.md", - "date": "2013-12-23", - "title": "Community Round-up #12", - "author": [ - "vjeux" - ], - "excerpt": "

React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the docs and do not hesitate to ask questions on the Google Group, IRC or Stack Overflow. We are trying our best to help you out!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/12/19/react-v0.8.0.md", - "date": "2013-12-19", - "title": "React v0.8", - "author": [ - "zpao" - ], - "excerpt": "

I’ll start by answering the obvious question:

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/12/18/react-v0.5.2-v0.4.2.md", - "date": "2013-12-18", - "title": "React v0.5.2, v0.4.2", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re releasing an update to address a potential XSS vulnerability that can arise when using user data as a key. Typically “safe†data is used for a key, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/11/18/community-roundup-11.md", - "date": "2013-11-18", - "title": "Community Round-up #11", - "author": [ - "vjeux" - ], - "excerpt": "

This round-up is the proof that React has taken off from its Facebook’s root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/11/06/community-roundup-10.md", - "date": "2013-11-06", - "title": "Community Round-up #10", - "author": [ - "vjeux" - ], - "excerpt": "

This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2013/10/29/react-v0-5-1.md", - "date": "2013-10-29", - "title": "React v0.5.1", - "author": [ - "zpao" - ], - "excerpt": "

This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to [Sophie Alpert][1], [Andrey Popp][2], and [Laurence Rowe][3] for their contributions!

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2013/10/16/react-v0.5.0.md", - "date": "2013-10-16", - "title": "React v0.5", - "author": [ - "zpao" - ], - "excerpt": "

This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we’ve worked hard to improve performance and memory usage. We’ve also worked hard to make sure we are being consistent in our usage of DOM properties.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/10/03/community-roundup-9.md", - "date": "2013-10-03", - "title": "Community Round-up #9", - "author": [ - "vjeux" - ], - "excerpt": "

We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we’ll probably organize more in the future.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/09/24/community-roundup-8.md", - "date": "2013-09-24", - "title": "Community Round-up #8", - "author": [ - "vjeux" - ], - "excerpt": "

A lot has happened in the month since our last update. Here are some of the more interesting things we’ve found. But first, we have a couple updates before we share links.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2013/08/26/community-roundup-7.md", - "date": "2013-08-26", - "title": "Community Round-up #7", - "author": [ - "vjeux" - ], - "excerpt": "

It’s been three months since we open sourced React and it is going well. Some stats so far:

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/08/19/use-react-and-jsx-in-python-applications.md", - "date": "2013-08-19", - "title": "Use React and JSX in Python Applications", - "author": [ - "kmeht" - ], - "excerpt": "

Today we’re happy to announce the initial release of PyReact, which makes it easier to use React and JSX in your Python applications. It’s designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/08/05/community-roundup-6.md", - "date": "2013-08-05", - "title": "Community Round-up #6", - "author": [ - "vjeux" - ], - "excerpt": "

This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It’s great to see the adoption of React growing.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.md", - "date": "2013-07-30", - "title": "Use React and JSX in Ruby on Rails", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: react-rails.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/07/26/react-v0-4-1.md", - "date": "2013-07-26", - "title": "React v0.4.1", - "author": [ - "zpao" - ], - "excerpt": "

React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2013/07/23/community-roundup-5.md", - "date": "2013-07-23", - "title": "Community Round-up #5", - "author": [ - "vjeux" - ], - "excerpt": "

We launched the React Facebook Page along with the React v0.4 launch. 700 people already liked it to get updated on the project :)

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/07/17/react-v0-4-0.md", - "date": "2013-07-17", - "title": "React v0.4.0", - "author": [ - "zpao" - ], - "excerpt": "

Over the past 2 months we’ve been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we’re proud to announce the availability of React v0.4!

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md", - "date": "2013-07-11", - "title": "New in React v0.4: Prop Validation and Default Values", - "author": [ - "zpao" - ], - "excerpt": "

Many of the questions we got following the public launch of React revolved around props, specifically that people wanted to do validation and to make sure their components had sensible defaults.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/07/03/community-roundup-4.md", - "date": "2013-07-03", - "title": "Community Round-up #4", - "author": [ - "vjeux" - ], - "excerpt": "

React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/07/02/react-v0-4-autobind-by-default.md", - "date": "2013-07-02", - "title": "New in React v0.4: Autobind by Default", - "author": [ - "zpao" - ], - "excerpt": "

React v0.4 is very close to completion. As we finish it off, we’d like to share with you some of the major changes we’ve made since v0.3. This is the first of several posts we’ll be making over the next week.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/06/27/community-roundup-3.md", - "date": "2013-06-27", - "title": "Community Round-up #3", - "author": [ - "vjeux" - ], - "excerpt": "

The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/06/21/react-v0-3-3.md", - "date": "2013-06-21", - "title": "React v0.3.3", - "author": [ - "zpao" - ], - "excerpt": "

We have a ton of great stuff coming in v0.4, but in the meantime we’re releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2013/06/19/community-roundup-2.md", - "date": "2013-06-19", - "title": "Community Round-up #2", - "author": [ - "vjeux" - ], - "excerpt": "

Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/06/12/community-roundup.md", - "date": "2013-06-12", - "title": "Community Round-up #1", - "author": [ - "vjeux" - ], - "excerpt": "

React was open sourced two weeks ago and it’s time for a little round-up of what has been going on.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/06/05/why-react.md", - "date": "2013-06-05", - "title": "Why did we build React?", - "author": [ - "petehunt" - ], - "excerpt": "

There are a lot of JavaScript MVC frameworks out there. Why did we build React

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/06/02/jsfiddle-integration.md", - "date": "2013-06-02", - "title": "JSFiddle Integration", - "author": [ - "vjeux" - ], - "excerpt": "

JSFiddle just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this base React JSFiddle, fork it and share it! A fiddle without JSX is also available.

\n", - "readingTime": "1 min read" - } - ] -} \ No newline at end of file diff --git a/beta/src/blogIndexRecent.json b/beta/src/blogIndexRecent.json deleted file mode 100644 index 8bf964b5c..000000000 --- a/beta/src/blogIndexRecent.json +++ /dev/null @@ -1,207 +0,0 @@ -{ - "title": "Recent Posts", - "heading": true, - "path": "/blog", - "routes": [ - { - "path": "/blog/2020/08/10/react-v17-rc.md", - "date": "2020-08-10", - "title": "React v17.0 Release Candidate: No New Features", - "author": ["gaearon", "rachelnabors"], - "excerpt": "

Today, we are publishing the first Release Candidate for React 17. It has been two and a half years since the previous major release of React, which is a long time even by our standards! In this blog post, we will describe the role of this major release, what changes you can expect in it, and how you can try this release.

\n", - "readingTime": "20 min read" - }, - { - "path": "/blog/2020/02/26/react-v16.13.0.md", - "date": "2020-02-26", - "title": "React v16.13.0", - "author": ["threepointone"], - "excerpt": "

Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.md", - "date": "2019-11-06", - "title": "Building Great User Experiences with Concurrent Mode and Suspense", - "author": ["josephsavona"], - "excerpt": "

At React Conf 2019 we announced an experimental release of React that supports Concurrent Mode and Suspense. In this post we’ll introduce best practices for using them that we’ve identified through the process of building the new facebook.com.

\n", - "readingTime": "17 min read" - }, - { - "path": "/blog/2019/10/22/react-release-channels.md", - "date": "2019-10-22", - "title": "Preparing for the Future with React Prereleases", - "author": ["acdlite"], - "excerpt": "

To share upcoming changes with our partners in the React ecosystem, we’re establishing official prerelease channels. We hope this process will help us make changes to React with confidence, and give developers the opportunity to try out experimental features.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/08/15/new-react-devtools.md", - "date": "2019-08-15", - "title": "Introducing the New React DevTools", - "author": ["bvaughn"], - "excerpt": "

We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2019/08/08/react-v16.9.0.md", - "date": "2019-08-08", - "title": "React v16.9.0 and the Roadmap Update", - "author": ["gaearon", "bvaughn"], - "excerpt": "

Today we are releasing React 16.9. It contains several new features, bugfixes, and new deprecation warnings to help prepare for a future major release.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2019/02/23/is-react-translated-yet.md", - "date": "2019-02-23", - "title": "Is React Translated Yet? ¡Sí! Sim! ã¯ã„ï¼", - "author": ["tesseralis"], - "excerpt": "

We’re excited to announce an ongoing effort to maintain official translations of the React documentation website into different languages. Thanks to the dedicated efforts of React community members from around the world, React is now being translated into over 30 languages! You can find them on the new Languages page.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/02/06/react-v16.8.0.md", - "date": "2019-02-06", - "title": "React v16.8: The One With Hooks", - "author": ["gaearon"], - "excerpt": "

With React 16.8, React Hooks are available in a stable release!

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2018/12/19/react-v-16-7.md", - "date": "2018-12-19", - "title": "React v16.7: No, This Is Not the One With Hooks", - "author": ["acdlite"], - "excerpt": "

Our latest release includes an important performance bugfix for React.lazy. Although there are no API changes, we’re releasing it as a minor instead of a patch.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2018/11/27/react-16-roadmap.md", - "date": "2018-11-27", - "title": "React 16.x Roadmap", - "author": ["gaearon"], - "excerpt": "

You might have heard about features like “Hooksâ€, “Suspenseâ€, and “Concurrent Rendering†in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React.

\n", - "readingTime": "14 min read" - }, - { - "path": "/blog/2018/11/13/react-conf-recap.md", - "date": "2018-11-13", - "title": "React Conf recap: Hooks, Suspense, and Concurrent Rendering", - "author": ["tomocchino"], - "excerpt": "

This year’s React Conf took place on October 25 and 26 in Henderson, Nevada, where more than 600 attendees gathered to discuss the latest in UI engineering.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2018/10/23/react-v-16-6.md", - "date": "2018-10-23", - "title": "React v16.6.0: lazy, memo and contextType", - "author": ["sebmarkbage"], - "excerpt": "

Today we’re releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2018/10/01/create-react-app-v2.md", - "date": "2018-10-01", - "title": "Create React App 2.0: Babel 7, Sass, and More", - "author": ["timer", "gaearon"], - "excerpt": "

Create React App 2.0 has been released today, and it brings a year’s worth of improvements in a single dependency update.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2018/09/10/introducing-the-react-profiler.md", - "date": "2018-09-10", - "title": "Introducing the React Profiler", - "author": ["bvaughn"], - "excerpt": "

React 16.5 adds support for a new DevTools profiler plugin.

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2018/08/01/react-v-16-4-2.md", - "date": "2018-08-01", - "title": "React v16.4.2: Server-side vulnerability fix", - "author": ["gaearon"], - "excerpt": "

We discovered a minor vulnerability that might affect some apps using ReactDOMServer. We are releasing a patch version for every affected React minor release so that you can upgrade with no friction. Read on for more details.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2018/06/07/you-probably-dont-need-derived-state.md", - "date": "2018-06-07", - "title": "You Probably Don't Need Derived State", - "author": ["bvaughn"], - "excerpt": "

React 16.4 included a bugfix for getDerivedStateFromProps which caused some existing bugs in React components to reproduce more consistently. If this release exposed a case where your application was using an anti-pattern and didn’t work properly after the fix, we’re sorry for the churn. In this post, we will explain some common anti-patterns with derived state and our preferred alternatives.

\n", - "readingTime": "14 min read" - }, - { - "path": "/blog/2018/05/23/react-v-16-4.md", - "date": "2018-05-23", - "title": "React v16.4.0: Pointer Events", - "author": ["acdlite"], - "excerpt": "

The latest minor release adds support for an oft-requested feature: pointer events!

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2018/03/29/react-v-16-3.md", - "date": "2018-03-29", - "title": "React v16.3.0: New lifecycles and context API", - "author": ["bvaughn"], - "excerpt": "

A few days ago, we wrote a post about upcoming changes to our legacy lifecycle methods, including gradual migration strategies. In React 16.3.0, we are adding a few new lifecycle methods to assist with that migration. We are also introducing new APIs for long requested features: an official context API, a ref forwarding API, and an ergonomic ref API.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2018/03/27/update-on-async-rendering.md", - "date": "2018-03-27", - "title": "Update on Async Rendering", - "author": ["bvaughn"], - "excerpt": "

For over a year, the React team has been working to implement asynchronous rendering. Last month during his talk at JSConf Iceland, Dan unveiled some of the exciting new possibilities async rendering unlocks. Now we’d like to share with you some of the lessons we’ve learned while working on these features, and some recipes to help prepare your components for async rendering when it launches.

\n", - "readingTime": "12 min read" - }, - { - "path": "/blog/2018/03/01/sneak-peek-beyond-react-16.md", - "date": "2018-03-01", - "title": "Sneak Peek: Beyond React 16", - "author": ["sophiebits"], - "excerpt": "

Dan Abramov from our team just spoke at JSConf Iceland 2018 with a preview of some new features we’ve been working on in React. The talk opens with a question: “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?â€

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2017/12/15/improving-the-repository-infrastructure.md", - "date": "2017-12-15", - "title": "Behind the Scenes: Improving the Repository Infrastructure", - "author": ["gaearon", "bvaughn"], - "excerpt": "

As we worked on React 16, we revamped the folder structure and much of the build tooling in the React repository. Among other things, we introduced projects such as Rollup, Prettier, and Google Closure Compiler into our workflow. People often ask us questions about how we use those tools. In this post, we would like to share some of the changes that we’ve made to our build and test infrastructure in 2017, and what motivated them.

\n", - "readingTime": "30 min read" - }, - { - "path": "/blog/2017/12/07/introducing-the-react-rfc-process.md", - "date": "2017-12-07", - "title": "Introducing the React RFC Process", - "author": ["acdlite"], - "excerpt": "

We’re adopting an RFC (“request for commentsâ€) process for contributing ideas to React.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2017/11/28/react-v16.2.0-fragment-support.md", - "date": "2017-11-28", - "title": "React v16.2.0: Improved Support for Fragments", - "author": ["clemmy"], - "excerpt": "

React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature fragments:

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2017/09/26/react-v16.0.md", - "date": "2017-09-26", - "title": "React v16.0", - "author": ["acdlite"], - "excerpt": "

We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2017/09/25/react-v15.6.2.md", - "date": "2017-09-25", - "title": "React v15.6.2", - "author": ["nhunzaker"], - "excerpt": "

Today we’re sending out React 15.6.2. In 15.6.1, we shipped a few fixes for change events and inputs that had some unintended consequences. Those regressions have been ironed out, and we’ve also included a few more fixes to improve the stability of React across all browsers.

\n", - "readingTime": "3 min read" - } - ] -} diff --git a/beta/src/components/Button.tsx b/beta/src/components/Button.tsx deleted file mode 100644 index 9d4d0cf2b..000000000 --- a/beta/src/components/Button.tsx +++ /dev/null @@ -1,51 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; - -interface ButtonProps { - children: React.ReactNode; - onClick?: (event: React.MouseEvent) => void; - active: boolean; - className?: string; - style?: Record; -} - -export function Button({ - children, - onClick, - active, - className, - style, -}: ButtonProps) { - return ( - - ); -} - -Button.defaultProps = { - active: false, - style: {}, -}; - -export default Button; diff --git a/beta/src/components/ButtonLink.tsx b/beta/src/components/ButtonLink.tsx deleted file mode 100644 index 964056ed7..000000000 --- a/beta/src/components/ButtonLink.tsx +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; -import NextLink from 'next/link'; - -interface ButtonLinkProps { - size?: 'md' | 'lg'; - type?: 'primary' | 'secondary'; - label?: string; - target?: '_self' | '_blank'; -} - -function ButtonLink({ - href, - className, - children, - type = 'primary', - size = 'md', - label, - target = '_self', - ...props -}: JSX.IntrinsicElements['a'] & ButtonLinkProps) { - const classes = cn( - className, - 'inline-flex font-bold items-center border-2 border-transparent outline-none focus:ring-1 focus:ring-offset-2 focus:ring-link active:bg-link active:text-white active:ring-0 active:ring-offset-0 leading-normal', - { - 'bg-link text-white hover:bg-opacity-80': type === 'primary', - 'bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark hover:text-link focus:bg-link focus:text-white focus:border-link focus:border-2': - type === 'secondary', - 'text-lg rounded-lg p-4': size === 'lg', - 'text-base rounded-lg px-4 py-1.5': size === 'md', - } - ); - return ( - - - {children} - - - ); -} - -export default ButtonLink; diff --git a/beta/src/components/Icon/IconChevron.tsx b/beta/src/components/Icon/IconChevron.tsx deleted file mode 100644 index dfd77b11f..000000000 --- a/beta/src/components/Icon/IconChevron.tsx +++ /dev/null @@ -1,42 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; - -export const IconChevron = React.memo< - JSX.IntrinsicElements['svg'] & { - displayDirection: 'up' | 'down' | 'left' | 'right'; - } ->(function IconChevron({className, displayDirection, ...rest}) { - const classes = cn( - { - 'transform rotate-0': displayDirection === 'down', - 'transform rotate-90': displayDirection === 'left', - 'transform rotate-180': displayDirection === 'up', - 'transform -rotate-90': displayDirection === 'right', - }, - className - ); - return ( - - - - - - - ); -}); - -IconChevron.displayName = 'IconChevron'; diff --git a/beta/src/components/Icon/IconClose.tsx b/beta/src/components/Icon/IconClose.tsx deleted file mode 100644 index c31090302..000000000 --- a/beta/src/components/Icon/IconClose.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; - -export const IconClose = React.memo( - function IconClose(props) { - return ( - - - - - ); - } -); - -IconClose.displayName = 'IconClose'; diff --git a/beta/src/components/Icon/IconDeepDive.tsx b/beta/src/components/Icon/IconDeepDive.tsx deleted file mode 100644 index c68635350..000000000 --- a/beta/src/components/Icon/IconDeepDive.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; - -export const IconDeepDive = React.memo( - function IconDeepDive({className}) { - return ( - - - - ); - } -); - -IconDeepDive.displayName = 'IconDeepDive'; diff --git a/beta/src/components/Icon/IconError.tsx b/beta/src/components/Icon/IconError.tsx deleted file mode 100644 index 71c4a7c9b..000000000 --- a/beta/src/components/Icon/IconError.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; - -export const IconError = React.memo( - function IconError({className}) { - return ( - - - - - - ); - } -); - -IconError.displayName = 'IconError'; diff --git a/beta/src/components/Icon/IconGotcha.tsx b/beta/src/components/Icon/IconGotcha.tsx deleted file mode 100644 index 8342cbb6f..000000000 --- a/beta/src/components/Icon/IconGotcha.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; - -export const IconGotcha = React.memo( - function IconGotcha({className}) { - return ( - - - - ); - } -); - -IconGotcha.displayName = 'IconGotcha'; diff --git a/beta/src/components/Icon/IconHint.tsx b/beta/src/components/Icon/IconHint.tsx deleted file mode 100644 index d27b7e119..000000000 --- a/beta/src/components/Icon/IconHint.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; - -export const IconHint = React.memo( - function IconHint({className}) { - return ( - - - - ); - } -); - -IconHint.displayName = 'IconHint'; diff --git a/beta/src/components/Icon/IconNewPage.tsx b/beta/src/components/Icon/IconNewPage.tsx deleted file mode 100644 index b06408db6..000000000 --- a/beta/src/components/Icon/IconNewPage.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; - -export const IconNewPage = React.memo( - function IconNewPage({className}) { - return ( - - - - ); - } -); - -IconNewPage.displayName = 'IconNewPage'; diff --git a/beta/src/components/Icon/IconNote.tsx b/beta/src/components/Icon/IconNote.tsx deleted file mode 100644 index 7ddf92525..000000000 --- a/beta/src/components/Icon/IconNote.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; - -export const IconNote = React.memo( - function IconNote({className}) { - return ( - - - - ); - } -); - -IconNote.displayName = 'IconNote'; diff --git a/beta/src/components/Icon/IconRestart.tsx b/beta/src/components/Icon/IconRestart.tsx deleted file mode 100644 index 2e52fe6c2..000000000 --- a/beta/src/components/Icon/IconRestart.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; - -export const IconRestart = React.memo( - function IconRestart({className}) { - return ( - - - - ); - } -); - -IconRestart.displayName = 'IconRestart'; diff --git a/beta/src/components/Icon/IconRss.tsx b/beta/src/components/Icon/IconRss.tsx deleted file mode 100644 index 4cd10de44..000000000 --- a/beta/src/components/Icon/IconRss.tsx +++ /dev/null @@ -1,29 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; - -export const IconRss = React.memo( - function IconRss(props) { - return ( - - - - - - ); - } -); - -IconRss.displayName = 'IconLogo'; diff --git a/beta/src/components/Icon/IconWarning.tsx b/beta/src/components/Icon/IconWarning.tsx deleted file mode 100644 index 09a4e03e7..000000000 --- a/beta/src/components/Icon/IconWarning.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; - -export const IconWarning = React.memo( - function IconWarning({className}) { - return ( - - - - - - - ); - } -); - -IconWarning.displayName = 'IconWarning'; diff --git a/beta/src/components/Layout/Footer.tsx b/beta/src/components/Layout/Footer.tsx deleted file mode 100644 index dc08d4d6a..000000000 --- a/beta/src/components/Layout/Footer.tsx +++ /dev/null @@ -1,183 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import NextLink from 'next/link'; -import cn from 'classnames'; -import {ExternalLink} from 'components/ExternalLink'; -import {IconFacebookCircle} from 'components/Icon/IconFacebookCircle'; -import {IconTwitter} from 'components/Icon/IconTwitter'; - -export function Footer() { - const socialLinkClasses = 'hover:text-primary dark:text-primary-dark'; - return ( - <> -
-
-
-
-
-
- -
- - - - - - - - - - - Open Source -
-
- ©{new Date().getFullYear()} -
-
-
- - Learn React - - Quick Start - Installation - - Describing the UI - - - Adding Interactivity - - - Managing State - - - Escape Hatches - -
-
- - API Reference - - React APIs - React DOM APIs -
-
- - Community - - - Code of Conduct - - - Acknowledgements - - - Meet the Team - - {/* Community Resources */} -
-
- More - {/* Tutorial */} - {/* Blog */} - {/* Acknowledgements */} - - React Native - - - Privacy - - - Terms - -
- - - - - - -
-
-
-
-
- - ); -} - -function FooterLink({ - href, - children, - isHeader = false, -}: { - href?: string; - children: React.ReactNode; - isHeader?: boolean; -}) { - const classes = cn('border-b inline-block border-transparent', { - 'text-sm text-primary dark:text-primary-dark': !isHeader, - 'text-md text-secondary dark:text-secondary-dark my-2 font-bold': isHeader, - 'hover:border-gray-10': href, - }); - - if (!href) { - return
{children}
; - } - - if (href.startsWith('https://')) { - return ( -
- - {children} - -
- ); - } - - return ( -
- - {children} - -
- ); -} diff --git a/beta/src/components/Layout/LayoutAPI.tsx b/beta/src/components/Layout/LayoutAPI.tsx deleted file mode 100644 index ceebaa322..000000000 --- a/beta/src/components/Layout/LayoutAPI.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import sidebarReference from 'sidebarReference.json'; -import {MarkdownPage, MarkdownProps} from './MarkdownPage'; -import {Page} from './Page'; -import {RouteItem} from './useRouteMeta'; - -interface PageFrontmatter { - title: string; - status: string; -} - -export default function withAPI(p: PageFrontmatter) { - function LayoutAPI(props: MarkdownProps) { - return ; - } - LayoutAPI.appShell = AppShell; - return LayoutAPI; -} - -function AppShell(props: {children: React.ReactNode}) { - return ; -} diff --git a/beta/src/components/Layout/LayoutHome.tsx b/beta/src/components/Layout/LayoutHome.tsx deleted file mode 100644 index 162ad7e5c..000000000 --- a/beta/src/components/Layout/LayoutHome.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import sidebarHome from 'sidebarHome.json'; -import {MarkdownPage, MarkdownProps} from './MarkdownPage'; -import {Page} from './Page'; -import {RouteItem} from './useRouteMeta'; - -interface PageFrontmatter { - title: string; - status: string; -} - -export default function withDocs(p: PageFrontmatter) { - function LayoutHome(props: MarkdownProps) { - return ; - } - LayoutHome.appShell = AppShell; - return LayoutHome; -} - -function AppShell(props: {children: React.ReactNode}) { - return ; -} diff --git a/beta/src/components/Layout/LayoutLearn.tsx b/beta/src/components/Layout/LayoutLearn.tsx deleted file mode 100644 index 9441b49d0..000000000 --- a/beta/src/components/Layout/LayoutLearn.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import {MarkdownPage, MarkdownProps} from './MarkdownPage'; -import {RouteItem} from 'components/Layout/useRouteMeta'; -import {Page} from './Page'; -import sidebarLearn from '../../sidebarLearn.json'; -interface PageFrontmatter { - title: string; -} - -export default function withLearn(meta: PageFrontmatter) { - function LayoutLearn(props: MarkdownProps) { - return ; - } - LayoutLearn.appShell = AppShell; - return LayoutLearn; -} - -function AppShell(props: {children: React.ReactNode}) { - return ; -} diff --git a/beta/src/components/Layout/LayoutPost.tsx b/beta/src/components/Layout/LayoutPost.tsx deleted file mode 100644 index dd1b38049..000000000 --- a/beta/src/components/Layout/LayoutPost.tsx +++ /dev/null @@ -1,117 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {MDXProvider} from '@mdx-js/react'; -import recentPostsRouteTree from 'blogIndexRecent.json'; -import {DocsPageFooter} from 'components/DocsFooter'; -import {ExternalLink} from 'components/ExternalLink'; -import {MDXComponents} from 'components/MDX/MDXComponents'; -import {Seo} from 'components/Seo'; -import {Toc} from 'components/Layout/Toc'; -import format from 'date-fns/format'; -import {useRouter} from 'next/router'; -import * as React from 'react'; -import {getAuthor} from 'utils/getAuthor'; -import toCommaSeparatedList from 'utils/toCommaSeparatedList'; -import {Page} from './Page'; -import {RouteItem, useRouteMeta} from './useRouteMeta'; -import {useTwitter} from './useTwitter'; - -interface PageFrontmatter { - id?: string; - title: string; - author: string[]; - date?: string; -} - -interface LayoutPostProps { - /** Sidebar/Nav */ - routes: RouteItem[]; - /** Markdown frontmatter */ - meta: PageFrontmatter; - /** The mdx */ - children: React.ReactNode; -} - -/** Return the date of the current post given the path */ -function getDateFromPath(path: string) { - // All paths are /blog/year/month/day/title - const [year, month, day] = path - .substr(1) // first `/` - .split('/') // make an array - .slice(1) // ignore blog - .map((i) => parseInt(i, 10)); // convert to numbers - - return { - date: format(new Date(year, month, day), 'MMMM dd, yyyy'), - dateTime: [year, month, day].join('-'), - }; -} - -function LayoutPost({meta, children}: LayoutPostProps) { - const {pathname} = useRouter(); - const {date, dateTime} = getDateFromPath(pathname); - const {route, nextRoute, prevRoute} = useRouteMeta(); - const anchors = React.Children.toArray(children) - .filter( - (child: any) => - child.props?.mdxType && ['h2', 'h3'].includes(child.props.mdxType) - ) - .map((child: any) => ({ - url: '#' + child.props.id, - depth: parseInt(child.props.mdxType.replace('h', ''), 0), - text: child.props.children, - })); - useTwitter(); - return ( - <> -
-
- -

- {meta.title} -

-

- By{' '} - {toCommaSeparatedList(meta.author, (author) => ( - - {getAuthor(author).name} - - ))} - · - - - -

- - {children} - -
-
-
- -
- - ); -} - -function AppShell(props: {children: React.ReactNode}) { - return ; -} - -export default function withLayoutPost(meta: any) { - function LayoutPostWrapper(props: LayoutPostProps) { - return ; - } - - LayoutPostWrapper.appShell = AppShell; - - return LayoutPostWrapper; -} diff --git a/beta/src/components/Layout/MarkdownPage.tsx b/beta/src/components/Layout/MarkdownPage.tsx deleted file mode 100644 index 78badc8e2..000000000 --- a/beta/src/components/Layout/MarkdownPage.tsx +++ /dev/null @@ -1,154 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import {MDXProvider} from '@mdx-js/react'; -import {DocsPageFooter} from 'components/DocsFooter'; -import {MDXComponents} from 'components/MDX/MDXComponents'; -import {Seo} from 'components/Seo'; -import PageHeading from 'components/PageHeading'; -import {useRouteMeta} from './useRouteMeta'; -import {Toc} from './Toc'; -export interface MarkdownProps { - meta: Frontmatter & {description?: string}; - children?: React.ReactNode; -} - -function MaxWidth({children}: {children: any}) { - return
{children}
; -} - -export function MarkdownPage< - T extends {title: string; status?: string} = {title: string; status?: string} ->({children, meta}: MarkdownProps) { - const {route, nextRoute, prevRoute} = useRouteMeta(); - const title = meta.title || route?.title || ''; - const description = meta.description || route?.description || ''; - - let anchors: Array<{ - url: string; - text: React.ReactNode; - depth: number; - }> = React.Children.toArray(children) - .filter((child: any) => { - if (child.props?.mdxType) { - return ['h1', 'h2', 'h3', 'Challenges', 'Recipes', 'Recap'].includes( - child.props.mdxType - ); - } - return false; - }) - .map((child: any) => { - if (child.props.mdxType === 'Challenges') { - return { - url: '#challenges', - depth: 0, - text: 'Challenges', - }; - } - if (child.props.mdxType === 'Recipes') { - return { - url: '#recipes', - depth: 0, - text: 'Recipes', - }; - } - if (child.props.mdxType === 'Recap') { - return { - url: '#recap', - depth: 0, - text: 'Recap', - }; - } - return { - url: '#' + child.props.id, - depth: - (child.props?.mdxType && - parseInt(child.props.mdxType.replace('h', ''), 0)) ?? - 0, - text: child.props.children, - }; - }); - if (anchors.length > 0) { - anchors.unshift({ - depth: 1, - text: 'Overview', - url: '#', - }); - } - - if (!route) { - console.error('This page was not added to one of the sidebar JSON files.'); - } - const isHomePage = route?.path === '/'; - - // Auto-wrap everything except a few types into - // wrappers. Keep reusing the same - // wrapper as long as we can until we meet - // a full-width section which interrupts it. - let fullWidthTypes = [ - 'Sandpack', - 'APIAnatomy', - 'FullWidth', - 'Illustration', - 'IllustrationBlock', - 'Challenges', - 'Recipes', - ]; - let wrapQueue: React.ReactNode[] = []; - let finalChildren: React.ReactNode[] = []; - function flushWrapper(key: string | number) { - if (wrapQueue.length > 0) { - finalChildren.push({wrapQueue}); - wrapQueue = []; - } - } - function handleChild(child: any, key: string | number) { - if (child == null) { - return; - } - if (typeof child !== 'object') { - wrapQueue.push(child); - return; - } - if (fullWidthTypes.includes(child.props.mdxType)) { - flushWrapper(key); - finalChildren.push(child); - } else { - wrapQueue.push(child); - } - } - React.Children.forEach(children, handleChild); - flushWrapper('last'); - - return ( -
-
- - {!isHomePage && ( - - )} -
-
- - {finalChildren} - -
- -
-
-
- {!isHomePage && anchors.length > 0 && } -
-
- ); -} diff --git a/beta/src/components/Layout/Nav/MobileNav.tsx b/beta/src/components/Layout/Nav/MobileNav.tsx deleted file mode 100644 index 2b310b43a..000000000 --- a/beta/src/components/Layout/Nav/MobileNav.tsx +++ /dev/null @@ -1,87 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; -import {RouteItem} from 'components/Layout/useRouteMeta'; -import {useRouter} from 'next/router'; -import {SidebarRouteTree} from '../Sidebar'; -import sidebarHome from '../../../sidebarHome.json'; -import sidebarLearn from '../../../sidebarLearn.json'; -import sidebarReference from '../../../sidebarReference.json'; - -function inferSection(pathname: string): 'learn' | 'reference' | 'home' { - if (pathname.startsWith('/learn')) { - return 'learn'; - } else if (pathname.startsWith('/reference')) { - return 'reference'; - } else { - return 'home'; - } -} - -export function MobileNav() { - const {pathname} = useRouter(); - const [section, setSection] = React.useState(() => inferSection(pathname)); - - let tree = null; - switch (section) { - case 'home': - tree = sidebarHome.routes[0]; - break; - case 'learn': - tree = sidebarLearn.routes[0]; - break; - case 'reference': - tree = sidebarReference.routes[0]; - break; - } - - return ( - <> -
- setSection('home')}> - Home - - setSection('learn')}> - Learn - - setSection('reference')}> - API - -
- - - ); -} - -function TabButton({ - children, - onClick, - isActive, -}: { - children: any; - onClick: (event: React.MouseEvent) => void; - isActive: boolean; -}) { - const classes = cn( - 'inline-flex items-center w-full border-b-2 justify-center text-base leading-9 px-3 py-0.5 hover:text-link hover:gray-5', - { - 'text-link dark:text-link-dark dark:border-link-dark border-link font-bold': - isActive, - 'border-transparent': !isActive, - } - ); - return ( - - ); -} diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx deleted file mode 100644 index 98a130ced..000000000 --- a/beta/src/components/Layout/Nav/Nav.tsx +++ /dev/null @@ -1,206 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; -import NextLink from 'next/link'; -import {useRouter} from 'next/router'; - -import {IconClose} from 'components/Icon/IconClose'; -import {IconHamburger} from 'components/Icon/IconHamburger'; -import {Search} from 'components/Search'; -import {MenuContext} from 'components/useMenu'; - -import {Logo} from '../../Logo'; -import NavLink from './NavLink'; - -declare global { - interface Window { - __theme: string; - __setPreferredTheme: (theme: string) => void; - } -} - -const feedbackIcon = ( - - - - - - - - - - -); - -const darkIcon = ( - - - - - - -); - -const lightIcon = ( - - - - - - - - - -); - -function inferSection(pathname: string): 'learn' | 'reference' | 'home' { - if (pathname.startsWith('/learn')) { - return 'learn'; - } else if (pathname.startsWith('/reference')) { - return 'reference'; - } else { - return 'home'; - } -} - -export default function Nav() { - const {pathname} = useRouter(); - const {isOpen, toggleOpen} = React.useContext(MenuContext); - const section = inferSection(pathname); - - function handleFeedback() { - const nodes: any = document.querySelectorAll( - '#_hj_feedback_container button' - ); - if (nodes.length > 0) { - nodes[nodes.length - 1].click(); - } else { - window.location.href = - 'https://github.com/reactjs/reactjs.org/issues/3308'; - } - } - - return ( - - ); -} diff --git a/beta/src/components/Layout/Nav/NavLink.tsx b/beta/src/components/Layout/Nav/NavLink.tsx deleted file mode 100644 index 3fddc6e16..000000000 --- a/beta/src/components/Layout/Nav/NavLink.tsx +++ /dev/null @@ -1,39 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; -import {ExternalLink} from 'components/ExternalLink'; -import NextLink from 'next/link'; - -interface NavLinkProps { - href: string; - children: React.ReactNode; - isActive: boolean; -} - -export default function NavLink({href, children, isActive}: NavLinkProps) { - const classes = cn( - { - 'text-link border-link dark:text-link-dark dark:border-link-dark font-bold': - isActive, - }, - {'border-transparent': !isActive}, - 'inline-flex w-full items-center border-b-2 justify-center text-base leading-9 px-3 py-0.5 hover:text-link dark:hover:text-link-dark whitespace-nowrap' - ); - - if (href.startsWith('https://')) { - return ( - - {children} - - ); - } - - return ( - - {children} - - ); -} diff --git a/beta/src/components/Layout/Nav/index.tsx b/beta/src/components/Layout/Nav/index.tsx deleted file mode 100644 index 0f4d0e78e..000000000 --- a/beta/src/components/Layout/Nav/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -export {default as Nav} from './Nav'; diff --git a/beta/src/components/Layout/Page.tsx b/beta/src/components/Layout/Page.tsx deleted file mode 100644 index 755c167c4..000000000 --- a/beta/src/components/Layout/Page.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {MenuProvider} from 'components/useMenu'; -import * as React from 'react'; -import {Nav} from './Nav'; -import {RouteItem, SidebarContext} from './useRouteMeta'; -import {Sidebar} from './Sidebar'; -import {Footer} from './Footer'; -interface PageProps { - children: React.ReactNode; - routeTree: RouteItem; -} - -export function Page({routeTree, children}: PageProps) { - return ( - - -
-
-
- -
-
-
- {children} -
-
-
-
-
-
-
- ); -} diff --git a/beta/src/components/Layout/Sidebar/Sidebar.tsx b/beta/src/components/Layout/Sidebar/Sidebar.tsx deleted file mode 100644 index a5539263a..000000000 --- a/beta/src/components/Layout/Sidebar/Sidebar.tsx +++ /dev/null @@ -1,96 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; -import {SidebarContext} from 'components/Layout/useRouteMeta'; -import {MenuContext} from 'components/useMenu'; -import {useMediaQuery} from '../useMediaQuery'; -import {SidebarRouteTree} from './SidebarRouteTree'; -import {Search} from 'components/Search'; -import {Button} from 'components/Button'; -import {MobileNav} from '../Nav/MobileNav'; - -const SIDEBAR_BREAKPOINT = 1023; - -export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) { - const {menuRef, isOpen} = React.useContext(MenuContext); - const isMobileSidebar = useMediaQuery(SIDEBAR_BREAKPOINT); - let routeTree = React.useContext(SidebarContext); - const isHidden = isMobileOnly && !isMobileSidebar; - - // HACK. Fix up the data structures instead. - if ((routeTree as any).routes.length === 1) { - routeTree = (routeTree as any).routes[0]; - } - - function handleFeedback() { - const nodes: any = document.querySelectorAll( - '#_hj_feedback_container button' - ); - if (nodes.length > 0) { - nodes[nodes.length - 1].click(); - } else { - window.location.href = - 'https://github.com/reactjs/reactjs.org/issues/3308'; - } - } - const feedbackIcon = ( - - - - - - - - - - - ); - return ( - - ); -} diff --git a/beta/src/components/Layout/Sidebar/SidebarLink.tsx b/beta/src/components/Layout/Sidebar/SidebarLink.tsx deleted file mode 100644 index 72383a556..000000000 --- a/beta/src/components/Layout/Sidebar/SidebarLink.tsx +++ /dev/null @@ -1,85 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -import * as React from 'react'; -import scrollIntoView from 'scroll-into-view-if-needed'; -import cn from 'classnames'; -import {IconNavArrow} from 'components/Icon/IconNavArrow'; -import Link from 'next/link'; -import {useIsMobile} from '../useMediaQuery'; - -interface SidebarLinkProps { - href: string; - selected?: boolean; - title: string; - level: number; - icon?: React.ReactNode; - heading?: boolean; - isExpanded?: boolean; - isBreadcrumb?: boolean; - hideArrow?: boolean; -} - -export function SidebarLink({ - href, - selected = false, - title, - level, - heading = false, - isExpanded, - isBreadcrumb, - hideArrow, -}: SidebarLinkProps) { - const ref = React.useRef(null); - const isMobile = useIsMobile(); - - React.useEffect(() => { - if (ref && ref.current && !!selected && !isMobile) { - scrollIntoView(ref.current, { - scrollMode: 'if-needed', - block: 'center', - inline: 'nearest', - }); - } - }, [ref, selected, isMobile]); - - return ( - - 0, - 'pl-5': level < 2, - 'text-base font-bold': level === 0, - 'dark:text-primary-dark text-primary ': level === 0 && !selected, - 'text-base text-link dark:text-link-dark': level === 1 && selected, - 'dark:text-primary-dark text-primary': heading, - 'text-base text-secondary dark:text-secondary-dark': - !selected && !heading, - 'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark': - selected, - } - )}> - {title} - {isExpanded != null && !heading && !hideArrow && ( - - - - )} - - - ); -} diff --git a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx deleted file mode 100644 index d8b5669dc..000000000 --- a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx +++ /dev/null @@ -1,155 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import {RouteItem} from 'components/Layout/useRouteMeta'; -import {useRouter} from 'next/router'; -import {removeFromLast} from 'utils/removeFromLast'; -import {useRouteMeta} from '../useRouteMeta'; -import {SidebarLink} from './SidebarLink'; -import useCollapse from 'react-collapsed'; -import {useLayoutEffect} from 'react'; - -interface SidebarRouteTreeProps { - isMobile?: boolean; - routeTree: RouteItem; - level?: number; -} - -function CollapseWrapper({ - isExpanded, - duration, - children, -}: { - isExpanded: boolean; - duration: number; - children: any; -}) { - const ref = React.useRef(null); - const timeoutRef = React.useRef(null); - const {getCollapseProps} = useCollapse({ - isExpanded, - duration, - }); - - // Disable pointer events while animating. - const isExpandedRef = React.useRef(isExpanded); - if (typeof window !== 'undefined') { - // eslint-disable-next-line react-hooks/rules-of-hooks - useLayoutEffect(() => { - const wasExpanded = isExpandedRef.current; - if (wasExpanded === isExpanded) { - return; - } - isExpandedRef.current = isExpanded; - if (ref.current !== null) { - const node: HTMLDivElement = ref.current; - node.style.pointerEvents = 'none'; - if (timeoutRef.current !== null) { - window.clearTimeout(timeoutRef.current); - } - timeoutRef.current = window.setTimeout(() => { - node.style.pointerEvents = ''; - }, duration + 100); - } - }); - } - - return ( -
-
{children}
-
- ); -} - -export function SidebarRouteTree({ - isMobile, - routeTree, - level = 0, -}: SidebarRouteTreeProps) { - const {breadcrumbs} = useRouteMeta(routeTree); - const {pathname} = useRouter(); - const slug = pathname; - - const currentRoutes = routeTree.routes as RouteItem[]; - const expandedPath = currentRoutes.reduce( - (acc: string | undefined, curr: RouteItem) => { - if (acc) return acc; - const breadcrumb = breadcrumbs.find((b) => b.path === curr.path); - if (breadcrumb) { - return curr.path; - } - if (curr.path === pathname) { - return pathname; - } - return undefined; - }, - undefined - ); - - const expanded = expandedPath; - return ( -
    - {currentRoutes.map(({path, title, routes, heading}) => { - const pagePath = path && removeFromLast(path, '.'); - const selected = slug === pagePath; - - // if current route item has no path and children treat it as an API sidebar heading - if (!path || !pagePath || heading) { - return ( - - ); - } - - // if route has a path and child routes, treat it as an expandable sidebar item - if (routes) { - const isExpanded = isMobile || expanded === path; - return ( -
  • - - - - -
  • - ); - } - - // if route has a path and no child routes, treat it as a sidebar link - return ( -
  • - -
  • - ); - })} -
- ); -} diff --git a/beta/src/components/Layout/Sidebar/index.tsx b/beta/src/components/Layout/Sidebar/index.tsx deleted file mode 100644 index a2204a508..000000000 --- a/beta/src/components/Layout/Sidebar/index.tsx +++ /dev/null @@ -1,8 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -export {Sidebar} from './Sidebar'; -export {SidebarButton} from './SidebarButton'; -export {SidebarLink} from './SidebarLink'; -export {SidebarRouteTree} from './SidebarRouteTree'; diff --git a/beta/src/components/Layout/Toc.tsx b/beta/src/components/Layout/Toc.tsx deleted file mode 100644 index 2fe40c7d8..000000000 --- a/beta/src/components/Layout/Toc.tsx +++ /dev/null @@ -1,81 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import cx from 'classnames'; -import * as React from 'react'; -import {useTocHighlight} from './useTocHighlight'; - -export function Toc({ - headings, -}: { - headings: Array<{url: string; text: React.ReactNode; depth: number}>; -}) { - const {currentIndex} = useTocHighlight(); - // TODO: We currently have a mismatch between the headings in the document - // and the headings we find in MarkdownPage (i.e. we don't find Recap or Challenges). - // Select the max TOC item we have here for now, but remove this after the fix. - const selectedIndex = Math.min(currentIndex, headings.length - 1); - return ( - - ); -} diff --git a/beta/src/components/Layout/useMediaQuery.tsx b/beta/src/components/Layout/useMediaQuery.tsx deleted file mode 100644 index d35c796bc..000000000 --- a/beta/src/components/Layout/useMediaQuery.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {useState, useCallback, useEffect} from 'react'; - -const useMediaQuery = (width: number) => { - const [targetReached, setTargetReached] = useState(false); - - const updateTarget = useCallback((e) => { - if (e.matches) { - setTargetReached(true); - } else { - setTargetReached(false); - } - }, []); - - useEffect(() => { - const media = window.matchMedia(`(max-width: ${width}px)`); - media.addListener(updateTarget); - - // Check on mount (callback is not called until a change occurs) - if (media.matches) { - setTargetReached(true); - } - - return () => media.removeListener(updateTarget); - }, [updateTarget, width]); - - return targetReached; -}; - -const useIsMobile = () => { - return useMediaQuery(640); -}; - -export {useMediaQuery, useIsMobile}; diff --git a/beta/src/components/Layout/useRouteMeta.tsx b/beta/src/components/Layout/useRouteMeta.tsx deleted file mode 100644 index 5f962f7ea..000000000 --- a/beta/src/components/Layout/useRouteMeta.tsx +++ /dev/null @@ -1,129 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import {useRouter} from 'next/router'; - -/** - * While Next.js provides file-based routing, we still need to construct - * a sidebar for navigation and provide each markdown page - * previous/next links and titles. To do this, we construct a nested - * route object that is infinitely nestable. - */ - -export type RouteTag = - | 'foundation' - | 'intermediate' - | 'advanced' - | 'experimental' - | 'deprecated'; - -export interface RouteItem { - /** Page title (for the sidebar) */ - title: string; - /** Optional page description for heading */ - description?: string; - /* Additional meta info for page tagging */ - tags?: RouteTag[]; - /** Path to page */ - path?: string; - /** Whether the entry is a heading */ - heading?: boolean; - /** List of sub-routes */ - routes?: RouteItem[]; -} - -export interface Routes { - /** List of routes */ - routes: RouteItem[]; -} - -/** Routing metadata about a given route and it's siblings and parent */ -export interface RouteMeta { - /** The previous route */ - prevRoute?: RouteItem; - /** The next route */ - nextRoute?: RouteItem; - /** The current route */ - route?: RouteItem; - /** Trail of parent routes */ - breadcrumbs?: RouteItem[]; -} - -export function useRouteMeta(rootRoute?: RouteItem) { - const sidebarContext = React.useContext(SidebarContext); - const routeTree = rootRoute || sidebarContext; - const router = useRouter(); - const cleanedPath = router.pathname; - if (cleanedPath === '/404') { - return { - breadcrumbs: [], - }; - } - const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree); - return { - ...getRouteMeta(cleanedPath, routeTree), - breadcrumbs: breadcrumbs.length > 0 ? breadcrumbs : [routeTree], - }; -} - -export const SidebarContext = React.createContext({title: 'root'}); - -// Performs a depth-first search to find the current route and its previous/next route -function getRouteMeta( - searchPath: string, - currentRoute: RouteItem, - ctx: RouteMeta = {} -): RouteMeta { - const {routes} = currentRoute; - - if (ctx.route && !ctx.nextRoute) { - ctx.nextRoute = currentRoute; - } - - if (currentRoute.path === searchPath) { - ctx.route = currentRoute; - } - - if (!ctx.route) { - ctx.prevRoute = currentRoute; - } - - if (!routes) { - return ctx; - } - - for (const route of routes) { - getRouteMeta(searchPath, route, ctx); - } - - return ctx; -} - -// iterates the route tree from the current route to find its ancestors for breadcrumbs -function getBreadcrumbs( - path: string, - currentRoute: RouteItem, - breadcrumbs: RouteItem[] = [] -): RouteItem[] { - if (currentRoute.path === path) { - return breadcrumbs; - } - - if (!currentRoute.routes) { - return []; - } - - for (const route of currentRoute.routes) { - const childRoute = getBreadcrumbs(path, route, [ - ...breadcrumbs, - currentRoute, - ]); - if (childRoute?.length) { - return childRoute; - } - } - - return []; -} diff --git a/beta/src/components/Layout/useTwitter.tsx b/beta/src/components/Layout/useTwitter.tsx deleted file mode 100644 index ee76a6a5c..000000000 --- a/beta/src/components/Layout/useTwitter.tsx +++ /dev/null @@ -1,49 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -/** - * Ported from gatsby-plugin-twitter - * https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-twitter - */ -import * as React from 'react'; - -const injectTwitterScript = function injectTwitterScript() { - function addJS(jsCode: any) { - const s = document.createElement('script'); - s.type = 'text/javascript'; - s.innerText = jsCode; - document.getElementsByTagName('head')[0].appendChild(s); - } - - addJS( - '\n window.twttr = (function(d, s, id) {\n var js,\n fjs = d.getElementsByTagName(s)[0],\n t = window.twttr || {};\n if (d.getElementById(id)) return t;\n js = d.createElement(s);\n js.id = id;\n js.src = "https://platform.twitter.com/widgets.js";\n fjs.parentNode.insertBefore(js, fjs);\n t._e = [];\n t.ready = function(f) {\n t._e.push(f);\n };\n return t;\n })(document, "script", "twitter-wjs");\n ' - ); -}; - -let injectedTwitterScript = false; -const embedClasses = [ - '.twitter-tweet', - '.twitter-timeline', - '.twitter-follow-button', - '.twitter-share-button', -].join(','); - -export function useTwitter() { - React.useEffect(() => { - if (document.querySelector(embedClasses) !== null) { - if (!injectedTwitterScript) { - injectTwitterScript(); - injectedTwitterScript = true; - } - - if ( - typeof (window as any).twttr !== 'undefined' && - (window as any).twttr.widgets && - typeof (window as any).twttr.widgets.load === 'function' - ) { - (window as any).twttr.widgets.load(); - } - } - }, []); -} diff --git a/beta/src/components/Logo.tsx b/beta/src/components/Logo.tsx deleted file mode 100644 index 0efa7acc1..000000000 --- a/beta/src/components/Logo.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; - -export function Logo(props: JSX.IntrinsicElements['svg']) { - return ( - - - - - ); -} - -Logo.displayName = 'Logo'; diff --git a/beta/src/components/MDX/APIAnatomy.tsx b/beta/src/components/MDX/APIAnatomy.tsx deleted file mode 100644 index 6a79c3743..000000000 --- a/beta/src/components/MDX/APIAnatomy.tsx +++ /dev/null @@ -1,127 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; -import tailwindConfig from '../../../tailwind.config'; -import CodeBlock from './CodeBlock'; - -interface APIAnatomyProps { - children: React.ReactNode; -} - -interface AnatomyContent { - steps: React.ReactElement[]; - code: React.ReactNode; -} - -const twColors = tailwindConfig.theme.extend.colors; -const colors = [ - { - hex: twColors['blue-40'], - border: 'border-blue-40', - background: 'bg-blue-40', - }, - { - hex: twColors['yellow-40'], - border: 'border-yellow-40', - background: 'bg-yellow-40', - }, - { - hex: twColors['green-50'], - border: 'border-green-50', - background: 'bg-green-50', - }, - { - hex: twColors['purple-40'], - border: 'border-purple-40', - background: 'bg-purple-40', - }, -]; - -export function APIAnatomy({children}: APIAnatomyProps) { - const [activeStep, setActiveStep] = React.useState(null); - const ref = React.useRef(); - - const {steps, code} = React.Children.toArray(children).reduce( - (acc: AnatomyContent, child) => { - if (!React.isValidElement(child)) return acc; - switch (child.props.mdxType) { - case 'AnatomyStep': - acc.steps.push( - React.cloneElement(child, { - ...child.props, - activeStep, - handleStepChange: setActiveStep, - stepNumber: acc.steps.length + 1, - }) - ); - break; - case 'pre': - acc.code = ( - - ); - break; - } - return acc; - }, - {steps: [], code: null} - ); - - return ( -
-
{code}
-
- {steps} -
-
- ); -} - -interface AnatomyStepProps { - children: React.ReactNode; - title: string; - stepNumber: number; - activeStep?: number; - handleStepChange: (stepNumber: number) => void; -} - -export function AnatomyStep({ - title, - stepNumber, - children, - activeStep, - handleStepChange, -}: AnatomyStepProps) { - const color = colors[stepNumber - 1]; - return ( -
-
-
- {stepNumber} -
-
- {title} -
-
-
{children}
-
- ); -} diff --git a/beta/src/components/MDX/Challenges/Challenges.tsx b/beta/src/components/MDX/Challenges/Challenges.tsx deleted file mode 100644 index 9934de66a..000000000 --- a/beta/src/components/MDX/Challenges/Challenges.tsx +++ /dev/null @@ -1,232 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; -import {Button} from 'components/Button'; -import {H2} from 'components/MDX/Heading'; -import {Navigation} from './Navigation'; -import {IconHint} from '../../Icon/IconHint'; -import {IconSolution} from '../../Icon/IconSolution'; -import {IconArrowSmall} from '../../Icon/IconArrowSmall'; - -interface ChallengesProps { - children: React.ReactElement[]; - isRecipes?: boolean; -} - -export interface ChallengeContents { - id: string; - name: string; - order: number; - content: React.ReactNode; - solution: React.ReactNode; - hint?: React.ReactNode; -} - -const parseChallengeContents = ( - children: React.ReactElement[] -): ChallengeContents[] => { - const contents: ChallengeContents[] = []; - - if (!children) { - return contents; - } - - let challenge: Partial = {}; - let content: React.ReactElement[] = []; - React.Children.forEach(children, (child) => { - const {props} = child; - switch (props.mdxType) { - case 'Solution': { - challenge.solution = child; - challenge.content = content; - contents.push(challenge as ChallengeContents); - challenge = {}; - content = []; - break; - } - case 'Hint': { - challenge.hint = child; - break; - } - case 'h3': { - challenge.order = contents.length + 1; - challenge.name = props.children; - challenge.id = props.id; - break; - } - default: { - content.push(child); - } - } - }); - - return contents; -}; - -export function Challenges({children, isRecipes}: ChallengesProps) { - const challenges = parseChallengeContents(children); - const scrollAnchorRef = React.useRef(null); - - const [showHint, setShowHint] = React.useState(false); - const [showSolution, setShowSolution] = React.useState(false); - const [activeChallenge, setActiveChallenge] = React.useState( - challenges[0].id - ); - - const handleChallengeChange = (challengeId: string) => { - setShowHint(false); - setShowSolution(false); - setActiveChallenge(challengeId); - }; - - const toggleHint = () => { - if (showSolution && !showHint) { - setShowSolution(false); - } - setShowHint((hint) => !hint); - }; - - const toggleSolution = () => { - if (showHint && !showSolution) { - setShowHint(false); - } - setShowSolution((solution) => !solution); - }; - - const currentChallenge = challenges.find(({id}) => id === activeChallenge); - const nextChallenge = challenges.find(({order}) => { - if (!currentChallenge) { - return false; - } - return order === currentChallenge.order + 1; - }); - - return ( -
-
-
-

- {isRecipes ? 'Try out some recipes' : 'Try out some challenges'} -

- {challenges.length > 1 && ( - - )} -
-
-
-

-
- {isRecipes ? 'Recipe' : 'Challenge'} {currentChallenge?.order}{' '} - of {challenges.length} - : -
- {currentChallenge?.name} -

- <>{currentChallenge?.content} -
-
- {currentChallenge?.hint ? ( -
- - -
- ) : ( - !isRecipes && ( - - ) - )} - - {nextChallenge && ( - - )} -
- {showHint && currentChallenge?.hint} - - {showSolution && ( -
-

- Solution -

- {currentChallenge?.solution} -
- - {nextChallenge && ( - - )} -
-
- )} -
-
-
- ); -} diff --git a/beta/src/components/MDX/Challenges/Navigation.tsx b/beta/src/components/MDX/Challenges/Navigation.tsx deleted file mode 100644 index b91b8e174..000000000 --- a/beta/src/components/MDX/Challenges/Navigation.tsx +++ /dev/null @@ -1,137 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import React, {createRef} from 'react'; -import cn from 'classnames'; -import {IconChevron} from 'components/Icon/IconChevron'; -import {ChallengeContents} from './Challenges'; -const debounce = require('debounce'); - -export function Navigation({ - challenges, - handleChange, - activeChallenge, - isRecipes, -}: { - challenges: ChallengeContents[]; - handleChange: (id: string) => void; - activeChallenge: string; - isRecipes?: boolean; -}) { - const containerRef = React.useRef(null); - const challengesNavRef = React.useRef( - challenges.map(() => createRef()) - ); - const [scrollPos, setScrollPos] = React.useState(0); - const canScrollLeft = scrollPos > 0; - const canScrollRight = scrollPos < challenges.length - 1; - - const handleScrollRight = () => { - if (scrollPos < challenges.length - 1) { - const currentNavRef = challengesNavRef.current[scrollPos + 1].current; - if (!currentNavRef) { - return; - } - if (containerRef.current) { - containerRef.current.scrollLeft = currentNavRef.offsetLeft; - } - handleChange(challenges[scrollPos + 1].id); - setScrollPos(scrollPos + 1); - } - }; - - const handleScrollLeft = () => { - if (scrollPos > 0) { - const currentNavRef = challengesNavRef.current[scrollPos - 1].current; - if (!currentNavRef) { - return; - } - if (containerRef.current) { - containerRef.current.scrollLeft = currentNavRef.offsetLeft; - } - handleChange(challenges[scrollPos - 1].id); - setScrollPos(scrollPos - 1); - } - }; - - const handleSelectNav = (id: string) => { - const selectedChallenge = challenges.findIndex( - (challenge) => challenge.id === id - ); - const currentNavRef = challengesNavRef.current[selectedChallenge].current; - if (containerRef.current) { - containerRef.current.scrollLeft = currentNavRef?.offsetLeft || 0; - } - handleChange(id); - setScrollPos(selectedChallenge); - }; - - const handleResize = React.useCallback(() => { - if (containerRef.current) { - const el = containerRef.current; - el.scrollLeft = - challengesNavRef.current[scrollPos].current?.offsetLeft || 0; - } - }, [containerRef, challengesNavRef, scrollPos]); - - React.useEffect(() => { - handleResize(); - window.addEventListener('resize', debounce(handleResize, 200)); - return () => { - window.removeEventListener('resize', handleResize); - }; - }, [handleResize]); - - return ( -
-
-
- {challenges.map(({name, id, order}, index) => ( - - ))} -
-
-
- - -
-
- ); -} diff --git a/beta/src/components/MDX/Challenges/index.tsx b/beta/src/components/MDX/Challenges/index.tsx deleted file mode 100644 index b39b2f223..000000000 --- a/beta/src/components/MDX/Challenges/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import React from 'react'; -export {Challenges} from './Challenges'; - -export function Hint({children}: {children: React.ReactNode}) { - return
{children}
; -} - -export function Solution({children}: {children: React.ReactNode}) { - return
{children}
; -} diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.module.css b/beta/src/components/MDX/CodeBlock/CodeBlock.module.css deleted file mode 100644 index 176c53e50..000000000 --- a/beta/src/components/MDX/CodeBlock/CodeBlock.module.css +++ /dev/null @@ -1,7 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -.codeViewer { - padding: 6px 0.5rem !important; -} diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx deleted file mode 100644 index 3ea906743..000000000 --- a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx +++ /dev/null @@ -1,175 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; -import { - ClasserProvider, - SandpackCodeViewer, - SandpackProvider, - SandpackThemeProvider, -} from '@codesandbox/sandpack-react'; -import rangeParser from 'parse-numeric-range'; -import {CustomTheme} from '../Sandpack/Themes'; -import styles from './CodeBlock.module.css'; - -interface InlineHiglight { - step: number; - line: number; - startColumn: number; - endColumn: number; -} - -const CodeBlock = React.forwardRef(function CodeBlock( - { - children, - className = 'language-js', - metastring, - noMargin, - noMarkers, - }: { - children: string; - className?: string; - metastring: string; - noMargin?: boolean; - noMarkers?: boolean; - }, - ref?: React.Ref -) { - const getDecoratedLineInfo = () => { - if (!metastring) { - return []; - } - - const linesToHighlight = getHighlightLines(metastring); - const highlightedLineConfig = linesToHighlight.map((line) => { - return { - className: 'bg-github-highlight dark:bg-opacity-10', - line, - }; - }); - - const inlineHighlightLines = getInlineHighlights(metastring, children); - const inlineHighlightConfig = inlineHighlightLines.map( - (line: InlineHiglight) => ({ - ...line, - elementAttributes: {'data-step': `${line.step}`}, - className: cn('code-step bg-opacity-10 relative rounded-md p-1 ml-2', { - 'pl-3 before:content-[attr(data-step)] before:block before:w-4 before:h-4 before:absolute before:top-1 before:-left-2 before:rounded-full before:text-white before:text-center before:text-xs before:leading-4': - !noMarkers, - 'bg-blue-40 before:bg-blue-40': line.step === 1, - 'bg-yellow-40 before:bg-yellow-40': line.step === 2, - 'bg-green-40 before:bg-green-40': line.step === 3, - 'bg-purple-40 before:bg-purple-40': line.step === 4, - }), - }) - ); - - return highlightedLineConfig.concat(inlineHighlightConfig); - }; - - // e.g. "language-js" - const language = className.substring(9); - const filename = '/index.' + language; - const decorators = getDecoratedLineInfo(); - return ( -
- - - - - - - -
- ); -}); - -export default CodeBlock; - -/** - * - * @param metastring string provided after the language in a markdown block - * @returns array of lines to highlight - * @example - * ```js {1-3,7} [[1, 1, 20, 33], [2, 4, 4, 8]] App.js active - * ... - * ``` - * - * -> The metastring is `{1-3,7} [[1, 1, 20, 33], [2, 4, 4, 8]] App.js active` - */ -function getHighlightLines(metastring: string): number[] { - const HIGHLIGHT_REGEX = /{([\d,-]+)}/; - const parsedMetastring = HIGHLIGHT_REGEX.exec(metastring); - if (!parsedMetastring) { - return []; - } - return rangeParser(parsedMetastring[1]); -} - -/** - * - * @param metastring string provided after the language in a markdown block - * @returns InlineHighlight[] - * @example - * ```js {1-3,7} [[1, 1, 'count'], [2, 4, 'setCount']] App.js active - * ... - * ``` - * - * -> The metastring is `{1-3,7} [[1, 1, 'count', [2, 4, 'setCount']] App.js active` - */ -function getInlineHighlights(metastring: string, code: string) { - const INLINE_HIGHT_REGEX = /(\[\[.*\]\])/; - const parsedMetastring = INLINE_HIGHT_REGEX.exec(metastring); - if (!parsedMetastring) { - return []; - } - - const lines = code.split('\n'); - const encodedHiglights = JSON.parse(parsedMetastring[1]); - return encodedHiglights.map(([step, lineNo, substr, fromIndex]: any[]) => { - const line = lines[lineNo - 1]; - let index = line.indexOf(substr); - const lastIndex = line.lastIndexOf(substr); - if (index !== lastIndex) { - if (fromIndex === undefined) { - throw Error( - "Found '" + - substr + - "' twice. Specify fromIndex as the fourth value in the tuple." - ); - } - index = line.indexOf(substr, fromIndex); - } - if (index === -1) { - throw Error("Could not find: '" + substr + "'"); - } - return { - step, - line: lineNo, - startColumn: index, - endColumn: index + substr.length, - }; - }); -} diff --git a/beta/src/components/MDX/CodeBlock/index.tsx b/beta/src/components/MDX/CodeBlock/index.tsx deleted file mode 100644 index 12c2da981..000000000 --- a/beta/src/components/MDX/CodeBlock/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import CodeBlock from './CodeBlock'; - -export default CodeBlock; diff --git a/beta/src/components/MDX/CodeDiagram.tsx b/beta/src/components/MDX/CodeDiagram.tsx deleted file mode 100644 index d6ad640d1..000000000 --- a/beta/src/components/MDX/CodeDiagram.tsx +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import CodeBlock from './CodeBlock'; - -interface CodeDiagramProps { - children: React.ReactNode; - flip?: boolean; -} - -export function CodeDiagram({children, flip = false}: CodeDiagramProps) { - const illustration = React.Children.toArray(children).filter((child: any) => { - return child.props?.mdxType === 'img'; - }); - const content = React.Children.toArray(children).map((child: any) => { - if (child.props?.mdxType === 'pre') { - return ( - - ); - } else if (child.props?.mdxType === 'img') { - return null; - } else { - return child; - } - }); - if (flip) { - return ( -
- {illustration} -
{content}
-
- ); - } - return ( -
-
{content}
-
{illustration}
-
- ); -} diff --git a/beta/src/components/MDX/Convention.tsx b/beta/src/components/MDX/Convention.tsx deleted file mode 100644 index 434053aac..000000000 --- a/beta/src/components/MDX/Convention.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import {H3} from './Heading'; - -interface ConventionProps { - children: React.ReactNode; - name: string; -} - -function Convention({children, name}: ConventionProps) { - const id = name ? `${name}-conventions` : 'conventions'; - return ( -
-

- Conventions -

- {children} -
- ); -} - -export default Convention; diff --git a/beta/src/components/MDX/ExpandableCallout.tsx b/beta/src/components/MDX/ExpandableCallout.tsx deleted file mode 100644 index 0712a123c..000000000 --- a/beta/src/components/MDX/ExpandableCallout.tsx +++ /dev/null @@ -1,66 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; -import {IconNote} from '../Icon/IconNote'; -import {IconGotcha} from '../Icon/IconGotcha'; - -type CalloutVariants = 'gotcha' | 'note'; - -interface ExpandableCalloutProps { - children: React.ReactNode; - type: CalloutVariants; -} - -const variantMap = { - note: { - title: 'Note', - Icon: IconNote, - containerClasses: - 'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg', - textColor: 'text-green-60 dark:text-green-40', - overlayGradient: - 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)', - }, - gotcha: { - title: 'Gotcha', - Icon: IconGotcha, - containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20', - textColor: 'text-yellow-50 dark:text-yellow-40', - overlayGradient: - 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', - }, -}; - -function ExpandableCallout({children, type}: ExpandableCalloutProps) { - const contentRef = React.useRef(null); - const variant = variantMap[type]; - - return ( -
-

- - {variant.title} -

-
-
- {children} -
-
-
- ); -} - -ExpandableCallout.defaultProps = { - type: 'note', -}; - -export default ExpandableCallout; diff --git a/beta/src/components/MDX/ExpandableExample.tsx b/beta/src/components/MDX/ExpandableExample.tsx deleted file mode 100644 index 3419b9cad..000000000 --- a/beta/src/components/MDX/ExpandableExample.tsx +++ /dev/null @@ -1,87 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; -import {IconChevron} from '../Icon/IconChevron'; -import {IconDeepDive} from '../Icon/IconDeepDive'; -import {IconCodeBlock} from '../Icon/IconCodeBlock'; -import {Button} from '../Button'; - -interface ExpandableExampleProps { - children: React.ReactNode; - title: string; - excerpt?: string; - type: 'DeepDive' | 'Example'; -} - -function ExpandableExample({ - children, - title, - excerpt, - type, -}: ExpandableExampleProps) { - const [isExpanded, setIsExpanded] = React.useState(false); - const isDeepDive = type === 'DeepDive'; - const isExample = type === 'Example'; - - return ( -
-
-
- {isDeepDive && ( - <> - - Deep Dive - - )} - {isExample && ( - <> - - Example - - )} -
-
-

- {title} -

- {excerpt &&
{excerpt}
} -
- -
-
- {children} -
-
- ); -} - -export default ExpandableExample; diff --git a/beta/src/components/MDX/Heading.tsx b/beta/src/components/MDX/Heading.tsx deleted file mode 100644 index 0fe4c2ce2..000000000 --- a/beta/src/components/MDX/Heading.tsx +++ /dev/null @@ -1,128 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import cn from 'classnames'; -import * as React from 'react'; -import {siteConfig} from 'siteConfig'; -import {forwardRefWithAs} from 'utils/forwardRefWithAs'; -export interface HeadingProps { - className?: string; - isPageAnchor?: boolean; - children: React.ReactNode; - id?: string; - as?: any; -} - -const anchorClassName = siteConfig.headerIdConfig.className; - -const Heading = forwardRefWithAs(function Heading( - {as: Comp = 'div', className, children, id, isPageAnchor = true, ...props}, - ref -) { - return ( - <> - - {children} - {isPageAnchor && ( - - - - - - - - - )} - - - - ); -}); - -Heading.displayName = 'Heading'; - -export const H1 = ({className, ...props}: HeadingProps) => ( - -); - -export const H2 = ({className, ...props}: HeadingProps) => ( - -); -export const H3 = ({className, ...props}: HeadingProps) => ( - -); - -export const H4 = ({className, ...props}: HeadingProps) => ( - -); diff --git a/beta/src/components/MDX/HomepageHero.tsx b/beta/src/components/MDX/HomepageHero.tsx deleted file mode 100644 index 14f2580d5..000000000 --- a/beta/src/components/MDX/HomepageHero.tsx +++ /dev/null @@ -1,45 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import {Logo} from 'components/Logo'; -import YouWillLearnCard from 'components/MDX/YouWillLearnCard'; - -function HomepageHero() { - return ( - <> -
- -
-

- React Docs -

-
- Beta -
-
-
-
-
- -

- Learn how to think in React with step-by-step explanations and - interactive examples. -

-
-
-
- -

- Look up the API signatures of React Hooks, and see their shape - using the visual code diagrams. -

-
-
-
- - ); -} - -export default HomepageHero; diff --git a/beta/src/components/MDX/Intro.tsx b/beta/src/components/MDX/Intro.tsx deleted file mode 100644 index a4e81564c..000000000 --- a/beta/src/components/MDX/Intro.tsx +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import React, {ReactNode} from 'react'; - -export interface IntroProps { - children?: React.ReactNode; -} - -function Intro({children}: IntroProps) { - return ( -
- {children} -
- ); -} - -Intro.displayName = 'Intro'; - -export default Intro; diff --git a/beta/src/components/MDX/Link.tsx b/beta/src/components/MDX/Link.tsx deleted file mode 100644 index 713d6116f..000000000 --- a/beta/src/components/MDX/Link.tsx +++ /dev/null @@ -1,59 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import NextLink from 'next/link'; -import cn from 'classnames'; - -import {ExternalLink} from 'components/ExternalLink'; - -function Link({ - href, - className, - children, - ...props -}: JSX.IntrinsicElements['a']) { - const classes = - 'inline text-link dark:text-link-dark break-normal border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal'; - const modifiedChildren = React.Children.toArray(children).map( - (child: any, idx: number) => { - if (child.props?.mdxType && child.props?.mdxType === 'inlineCode') { - return React.cloneElement(child, { - isLink: true, - }); - } - return child; - } - ); - - if (!href) { - // eslint-disable-next-line jsx-a11y/anchor-has-content - return ; - } - return ( - <> - {href.startsWith('https://') ? ( - - {modifiedChildren} - - ) : href.startsWith('#') ? ( - // eslint-disable-next-line jsx-a11y/anchor-has-content - - {modifiedChildren} - - ) : ( - - {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} - - {modifiedChildren} - - - )} - - ); -} - -Link.displayName = 'Link'; - -export default Link; diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx deleted file mode 100644 index 21cf3fa97..000000000 --- a/beta/src/components/MDX/MDXComponents.tsx +++ /dev/null @@ -1,369 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; - -import {APIAnatomy, AnatomyStep} from './APIAnatomy'; -import CodeBlock from './CodeBlock'; -import {CodeDiagram} from './CodeDiagram'; -import ConsoleBlock from './ConsoleBlock'; -import Convention from './Convention'; -import ExpandableCallout from './ExpandableCallout'; -import ExpandableExample from './ExpandableExample'; -import {H1, H2, H3, H4} from './Heading'; -import HomepageHero from './HomepageHero'; -import InlineCode from './InlineCode'; -import Intro from './Intro'; -import Link from './Link'; -import {PackageImport} from './PackageImport'; -import Recap from './Recap'; -import Sandpack from './Sandpack'; -import SimpleCallout from './SimpleCallout'; -import TerminalBlock from './TerminalBlock'; -import YouWillLearnCard from './YouWillLearnCard'; -import {Challenges, Hint, Solution} from './Challenges'; -import {IconNavArrow} from '../Icon/IconNavArrow'; -import ButtonLink from 'components/ButtonLink'; - -const P = (p: JSX.IntrinsicElements['p']) => ( -

-); - -const Strong = (strong: JSX.IntrinsicElements['strong']) => ( - -); - -const OL = (p: JSX.IntrinsicElements['ol']) => ( -

    -); -const LI = (p: JSX.IntrinsicElements['li']) => ( -
  1. -); -const UL = (p: JSX.IntrinsicElements['ul']) => ( -
      -); - -const Divider = () => ( -
      -); - -const Gotcha = ({children}: {children: React.ReactNode}) => ( - {children} -); -const Note = ({children}: {children: React.ReactNode}) => ( - {children} -); - -const Blockquote = ({ - children, - ...props -}: JSX.IntrinsicElements['blockquote']) => { - return ( - <> -
      - {children} -
      - - - ); -}; - -function LearnMore({ - children, - path, -}: { - title: string; - path?: string; - children: any; -}) { - return ( - <> -
      -
      -

      - Ready to learn this topic? -

      - {children} - {path ? ( - - Read More - - - ) : null} -
      -
      -
      - - ); -} - -function Math({children}: {children: any}) { - return ( - - {children} - - ); -} - -function MathI({children}: {children: any}) { - return ( - - {children} - - ); -} - -function YouWillLearn({children}: {children: any}) { - return {children}; -} - -// TODO: typing. -function Recipes(props: any) { - return ; -} - -function AuthorCredit({ - author, - authorLink, -}: { - author: string; - authorLink: string; -}) { - return ( -

      - - Illustrated by{' '} - {authorLink ? ( - - {author} - - ) : ( - author - )} - -

      - ); -} - -function Illustration({ - caption, - src, - alt, - author, - authorLink, - children, -}: { - caption: string; - src: string; - alt: string; - author: string; - authorLink: string; - children: any; -}) { - return ( -
      -
      - {alt} - {caption ? ( -
      - {caption} -
      - ) : null} -
      - {author ? : null} -
      - ); -} - -function IllustrationBlock({ - title, - sequential, - author, - authorLink, - children, -}: { - title: string; - author: string; - authorLink: string; - sequential: boolean; - children: any; -}) { - const imageInfos = React.Children.toArray(children).map( - (child: any) => child.props - ); - const images = imageInfos.map((info, index) => ( -
      -
      - {info.alt} -
      - {info.caption ? ( -
      - {info.caption} -
      - ) : null} -
      - )); - return ( -
      - {title ? ( -

      - {title} -

      - ) : null} - {sequential ? ( -
        - {images.map((x: any, i: number) => ( -
      1. - {x} -
      2. - ))} -
      - ) : ( -
      {images}
      - )} - {author ? : null} - -
      - ); -} - -export const MDXComponents = { - p: P, - strong: Strong, - blockquote: Blockquote, - ol: OL, - ul: UL, - li: LI, - h1: H1, - h2: H2, - h3: H3, - h4: H4, - inlineCode: InlineCode, - hr: Divider, - a: Link, - code: CodeBlock, - // The code block renders
       so we just want a div here.
      -  pre: (p: JSX.IntrinsicElements['div']) => 
      , - // Scary: dynamic(() => import('./Scary')), - APIAnatomy, - AnatomyStep, - CodeDiagram, - ConsoleBlock, - Convention, - DeepDive: (props: { - children: React.ReactNode; - title: string; - excerpt: string; - }) => , - Gotcha, - HomepageHero, - Illustration, - IllustrationBlock, - Intro, - LearnMore, - Math, - MathI, - Note, - PackageImport, - Recap, - Recipes, - Sandpack, - TerminalBlock, - YouWillLearn, - YouWillLearnCard, - Challenges, - Hint, - Solution, -}; diff --git a/beta/src/components/MDX/PackageImport.tsx b/beta/src/components/MDX/PackageImport.tsx deleted file mode 100644 index edb2b6d0f..000000000 --- a/beta/src/components/MDX/PackageImport.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import CodeBlock from './CodeBlock'; - -interface PackageImportProps { - children: React.ReactNode; -} - -export function PackageImport({children}: PackageImportProps) { - const terminal = React.Children.toArray(children).filter((child: any) => { - return child.props?.mdxType !== 'pre'; - }); - const code = React.Children.toArray(children).map((child: any, i: number) => { - if (child.props?.mdxType === 'pre') { - return ( - - ); - } else { - return null; - } - }); - return ( -
      -
      {terminal}
      -
      {code}
      -
      - ); -} diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx deleted file mode 100644 index c4b72601f..000000000 --- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx +++ /dev/null @@ -1,111 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import React from 'react'; -// @ts-ignore -import {flushSync} from 'react-dom'; -import { - useSandpack, - useActiveCode, - SandpackCodeEditor, - SandpackThemeProvider, -} from '@codesandbox/sandpack-react'; -import scrollIntoView from 'scroll-into-view-if-needed'; - -import {IconChevron} from 'components/Icon/IconChevron'; -import {NavigationBar} from './NavigationBar'; -import {Preview} from './Preview'; -import {CustomTheme} from './Themes'; - -export function CustomPreset({ - isSingleFile, - onReset, -}: { - isSingleFile: boolean; - onReset: () => void; -}) { - const lineCountRef = React.useRef<{[key: string]: number}>({}); - const containerRef = React.useRef(null); - const {sandpack} = useSandpack(); - const {code} = useActiveCode(); - const [isExpanded, setIsExpanded] = React.useState(false); - - const {activePath} = sandpack; - if (!lineCountRef.current[activePath]) { - lineCountRef.current[activePath] = code.split('\n').length; - } - const lineCount = lineCountRef.current[activePath]; - const isExpandable = lineCount > 16 || isExpanded; - const editorHeight = isExpandable ? lineCount * 24 + 24 : 'auto'; // shown lines * line height (24px) - const getHeight = () => { - if (!isExpandable) { - return editorHeight; - } - return isExpanded ? editorHeight : 406; - }; - - return ( - <> -
      - - -
      - - - {isExpandable && ( - - )} -
      -
      -
      - - ); -} diff --git a/beta/src/components/MDX/Sandpack/DownloadButton.tsx b/beta/src/components/MDX/Sandpack/DownloadButton.tsx deleted file mode 100644 index ce9ca3569..000000000 --- a/beta/src/components/MDX/Sandpack/DownloadButton.tsx +++ /dev/null @@ -1,86 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import {useSandpack} from '@codesandbox/sandpack-react'; -import {IconArrowSmall} from '../../Icon/IconArrowSmall'; -export interface DownloadButtonProps {} - -export const DownloadButton: React.FC = () => { - const {sandpack} = useSandpack(); - const [supported, setSupported] = React.useState(false); - React.useEffect(() => { - // This detection will work in Chrome 97+ - if ( - (HTMLScriptElement as any).supports && - (HTMLScriptElement as any).supports('importmap') - ) { - setSupported(true); - } - }, []); - - if (!supported) { - return null; - } - - const downloadHTML = () => { - const css = sandpack.files['/styles.css']?.code ?? ''; - const code = sandpack.files['/App.js']?.code ?? ''; - const blob = new Blob([ - ` - - -
      - - - - - - - -`, - ]); - const url = window.URL.createObjectURL(blob); - const a = document.createElement('a'); - a.style.display = 'none'; - a.href = url; - a.download = 'sandbox.html'; - document.body.appendChild(a); - a.click(); - window.URL.revokeObjectURL(url); - }; - - return ( - - ); -}; diff --git a/beta/src/components/MDX/Sandpack/Error.tsx b/beta/src/components/MDX/Sandpack/Error.tsx deleted file mode 100644 index 257ce0369..000000000 --- a/beta/src/components/MDX/Sandpack/Error.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; - -interface ErrorType { - title?: string; - message: string; - column?: number; - line?: number; - path?: string; -} - -export function Error({error}: {error: ErrorType}) { - const {message, title} = error; - - return ( -
      -

      {title || 'Error'}

      -
      -        {message}
      -      
      -
      - ); -} diff --git a/beta/src/components/MDX/Sandpack/FilesDropdown.tsx b/beta/src/components/MDX/Sandpack/FilesDropdown.tsx deleted file mode 100644 index 68d068ad7..000000000 --- a/beta/src/components/MDX/Sandpack/FilesDropdown.tsx +++ /dev/null @@ -1,50 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; -import {IconChevron} from '../../Icon/IconChevron'; -import {useSandpack} from '@codesandbox/sandpack-react'; -import {Listbox} from '@headlessui/react'; - -const getFileName = (filePath: string): string => { - const lastIndexOfSlash = filePath.lastIndexOf('/'); - return filePath.slice(lastIndexOfSlash + 1); -}; - -export function FilesDropdown() { - const {sandpack} = useSandpack(); - const {openPaths, setActiveFile, activePath} = sandpack; - return ( - - - {({open}) => ( - - {getFileName(activePath)} - - - - - )} - - - {openPaths.map((filePath: string) => ( - - {getFileName(filePath)} - - ))} - - - ); -} diff --git a/beta/src/components/MDX/Sandpack/NavigationBar.tsx b/beta/src/components/MDX/Sandpack/NavigationBar.tsx deleted file mode 100644 index c42197c0f..000000000 --- a/beta/src/components/MDX/Sandpack/NavigationBar.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import {FileTabs, useSandpack} from '@codesandbox/sandpack-react'; -import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton'; -import {ResetButton} from './ResetButton'; -import {DownloadButton} from './DownloadButton'; -import {FilesDropdown} from './FilesDropdown'; - -export function NavigationBar({ - showDownload, - onReset, -}: { - showDownload: boolean; - onReset: () => void; -}) { - const {sandpack} = useSandpack(); - const [dropdownActive, setDropdownActive] = React.useState(false); - const {openPaths} = sandpack; - - const resizeHandler = React.useCallback(() => { - const width = window.innerWidth || document.documentElement.clientWidth; - if (!dropdownActive && width < 640) { - setDropdownActive(true); - } - if (dropdownActive && width >= 640) { - setDropdownActive(false); - } - }, [dropdownActive]); - - React.useEffect(() => { - if (openPaths.length > 1) { - resizeHandler(); - window.addEventListener('resize', resizeHandler); - return () => { - window.removeEventListener('resize', resizeHandler); - }; - } - return; - }, [openPaths.length, resizeHandler]); - - return ( -
      -
      - {dropdownActive ? : } -
      -
      - {showDownload && } - - -
      -
      - ); -} diff --git a/beta/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx b/beta/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx deleted file mode 100644 index 4e9d9f9ed..000000000 --- a/beta/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx +++ /dev/null @@ -1,31 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import {useCodeSandboxLink} from '@codesandbox/sandpack-react'; -import cn from 'classnames'; -import {IconNewPage} from '../../Icon/IconNewPage'; - -export const OpenInCodeSandboxButton = ({className}: {className?: string}) => { - const url = useCodeSandboxLink(); - - return ( - - - Fork - - - Fork - - - ); -}; diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx deleted file mode 100644 index 44c73c039..000000000 --- a/beta/src/components/MDX/Sandpack/Preview.tsx +++ /dev/null @@ -1,186 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -/* eslint-disable react-hooks/exhaustive-deps */ -import * as React from 'react'; -import {useSandpack, LoadingOverlay} from '@codesandbox/sandpack-react'; -import cn from 'classnames'; - -import {Error} from './Error'; -import {computeViewportSize, generateRandomId} from './utils'; - -type CustomPreviewProps = { - className?: string; - customStyle: Record; - isExpanded: boolean; -}; - -function useDebounced(value: any): any { - const ref = React.useRef(null); - const [saved, setSaved] = React.useState(value); - React.useEffect(() => { - clearTimeout(ref.current); - ref.current = setTimeout(() => { - setSaved(value); - }, 300); - }, [value]); - return saved; -} - -export function Preview({ - customStyle, - isExpanded, - className, -}: CustomPreviewProps) { - const {sandpack, listen} = useSandpack(); - const [isReady, setIsReady] = React.useState(false); - const [iframeComputedHeight, setComputedAutoHeight] = React.useState< - number | null - >(null); - - let { - error: rawError, - registerBundler, - unregisterBundler, - errorScreenRegisteredRef, - openInCSBRegisteredRef, - loadingScreenRegisteredRef, - } = sandpack; - - if ( - rawError && - rawError.message === '_csbRefreshUtils.prelude is not a function' - ) { - // Work around a noisy internal error. - rawError = null; - } - // It changes too fast, causing flicker. - const error = useDebounced(rawError); - - const clientId = React.useRef(generateRandomId()); - const iframeRef = React.useRef(null); - - // SandpackPreview immediately registers the custom screens/components so the bundler does not render any of them - // TODO: why are we doing this during render? - openInCSBRegisteredRef.current = true; - errorScreenRegisteredRef.current = true; - loadingScreenRegisteredRef.current = true; - - React.useEffect(() => { - const iframeElement = iframeRef.current!; - registerBundler(iframeElement, clientId.current); - - const unsub = listen((message: any) => { - if (message.type === 'resize') { - setComputedAutoHeight(message.height); - } else if (message.type === 'start') { - if (message.firstLoad) { - setIsReady(false); - } - } else if (message.type === 'test') { - // Does it make sense that we're listening to "test" event? - // Not really. Does it cause less flicker than "done"? Yes. - setIsReady(true); - } - }, clientId.current); - - return () => { - unsub(); - unregisterBundler(clientId.current); - }; - }, []); - - const viewportStyle = computeViewportSize('auto', 'portrait'); - const overrideStyle = error - ? { - // Don't collapse errors - maxHeight: undefined, - } - : null; - const hideContent = !isReady || error; - - // Allow content to be scrolled if it's too high to fit. - // Note we don't want this in the expanded state - // because it breaks position: sticky (and isn't needed anyway). - // We also don't want this for errors because they expand - // parent and making them scrollable is confusing. - let overflow; - if (!isExpanded && !error && isReady) { - overflow = 'auto'; - } - - // WARNING: - // The layout and styling here is convoluted and really easy to break. - // If you make changes to it, you need to test different cases: - // - Content -> (compile | runtime) error -> content editing flow should work. - // - Errors should expand parent height rather than scroll. - // - Long sandboxes should scroll unless "show more" is toggled. - // - Expanded sandboxes ("show more") have sticky previews and errors. - // - Sandboxes have autoheight based on content. - // - That autoheight should be measured correctly! (Check some long ones.) - // - You shouldn't see nested scrolls (that means autoheight is borked). - // - Ideally you shouldn't see a blank preview tile while recompiling. - // - Container shouldn't be horizontally scrollable (even while loading). - // - It should work on mobile. - // The best way to test it is to actually go through some challenges. - - return ( -
      -
      -
      - - -## Snake in React {/*snake-in-react*/} - -[Tom Occhino](http://tomocchino.com/) implemented Snake in 150 lines with React. - -> [Check the source on GitHub](https://github.com/tomocchino/react-snake/blob/master/src/snake.js) -> ->
      diff --git a/beta/src/pages/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md b/beta/src/pages/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md deleted file mode 100644 index 59a41733c..000000000 --- a/beta/src/pages/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: 'New in React v0.4: Prop Validation and Default Values' -author: [zpao] ---- - -Many of the questions we got following the public launch of React revolved around `props`, specifically that people wanted to do validation and to make sure their components had sensible defaults. - -## Validation {/*validation*/} - -Oftentimes you want to validate your `props` before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your `render` or `componentWillReceiveProps` functions, but that gets clunky fast. - -React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own. - -```js -React.createClass({ - propTypes: { - // An optional string prop named "description". - description: React.PropTypes.string, - - // A required enum prop named "category". - category: React.PropTypes.oneOf(['News','Photos']).isRequired, - - // A prop named "dialog" that requires an instance of Dialog. - dialog: React.PropTypes.instanceOf(Dialog).isRequired - }, - ... -}); -``` - -## Default Values {/*default-values*/} - -One common pattern we've seen with our React code is to do something like this: - -```js -React.createClass({ - render: function () { - var value = this.props.value || 'default value'; - return
      {value}
      ; - }, -}); -``` - -Do this for a few `props` across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way: - -```js -React.createClass({ - getDefaultProps: function() { - return { - value: 'default value' - }; - } - ... -}); -``` - -We will use the cached result of this function before each `render`. We also perform all validations before each `render` to ensure that you have all of the data you need in the right form before you try to use it. - ---- - -Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well. diff --git a/beta/src/pages/blog/2013/07/17/react-v0-4-0.md b/beta/src/pages/blog/2013/07/17/react-v0-4-0.md deleted file mode 100644 index 65a730234..000000000 --- a/beta/src/pages/blog/2013/07/17/react-v0-4-0.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: 'React v0.4.0' -author: [zpao] ---- - -Over the past 2 months we've been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we're proud to announce the availability of React v0.4! - -This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the [Google Group](https://groups.google.com/group/reactjs), and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next! - -React v0.4 has some big changes. We've also restructured the documentation to better communicate how to use React. We've summarized the changes below and linked to documentation where we think it will be especially useful. - -When you're ready, [go download it](/docs/installation.html)! - -### React {/*react*/} - -- Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily. -- Support for more DOM elements and attributes (e.g., ``) -- Improved server-side rendering APIs. `React.renderComponentToString(, callback)` allows you to use React on the server and generate markup which can be sent down to the browser. -- `prop` improvements: validation and default values. [Read our blog post for details...](/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html) -- Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](/docs/multiple-components.html) -- Removed `React.autoBind`. [Read our blog post for details...](/blog/2013/07/02/react-v0-4-autobind-by-default.html) -- Improvements to forms. We've written wrappers around ``, `` is not allowed. [Use `defaultValue` for initial content.](#providing-an-initial-value-for-a-text-area) +- If a text area receives a string `value` prop, it will be [treated as controlled.](#controlling-a-text-area-with-a-state-variable) +- A text area can't be both controlled and uncontrolled at the same time. +- A text area cannot switch between being controlled or uncontrolled over its lifetime. +- Every controlled text area needs an `onChange` event handler that synchronously updates its backing value. + +--- + +## Usage {/*usage*/} + +### Displaying a text area {/*displaying-a-text-area*/} + +Render `` is not supported. + + + +--- + +### Reading the text area value when submitting a form {/*reading-the-text-area-value-when-submitting-a-form*/} + +Add a [`
      `](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your textarea with a [`