diff --git a/.babelrc b/.babelrc deleted file mode 100644 index a8b9b8bbcd3..00000000000 --- a/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ['react', 'es2015', 'stage-1'], - "plugins": ['add-module-exports'] -} diff --git a/.circleci/config.yml b/.circleci/config.yml deleted file mode 100644 index 16c83a61d69..00000000000 --- a/.circleci/config.yml +++ /dev/null @@ -1,22 +0,0 @@ -version: 2 -jobs: - build: - docker: - - image: circleci/node:latest - steps: - - checkout - - restore_cache: - keys: - - dependencies-{{ checksum "package.json" }} - # fallback to using the latest cache if no exact match is found - - dependencies- - - run: - name: Install - command: yarn install - - save_cache: - paths: - - node_modules - key: dependencies-{{ checksum "package.json" }} - - run: - name: Check Prettier, ESLint, Flow - command: yarn ci-check diff --git a/.env.development b/.env.development new file mode 100644 index 00000000000..e69de29bb2d diff --git a/.env.production b/.env.production new file mode 100644 index 00000000000..e403f96b683 --- /dev/null +++ b/.env.production @@ -0,0 +1 @@ +NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT' \ No newline at end of file diff --git a/.eslintignore b/.eslintignore index 9425417154d..4738cb6975e 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,10 +1,3 @@ -node_modules/* - -# 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 a51454ef284..7bc6ab9333b 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,18 +1,37 @@ { - "extends": [ - "fbjs" - ], - "plugins": [ - "prettier", - "react" - ], - "parser": "babel-eslint", + "root": true, + "extends": "next/core-web-vitals", + "parser": "@typescript-eslint/parser", + "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler", "local-rules"], "rules": { - "relay/graphql-naming": 0, - "max-len": 0 + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": ["error", {"varsIgnorePattern": "^_"}], + "react-hooks/exhaustive-deps": "error", + "react/no-unknown-property": ["error", {"ignore": ["meta"]}], + "react-compiler/react-compiler": "error", + "local-rules/lint-markdown-code-blocks": "error" }, "env": { "node": true, - "browser": true - } + "commonjs": true, + "browser": true, + "es6": true + }, + "overrides": [ + { + "files": ["src/content/**/*.md"], + "parser": "./eslint-local-rules/parser", + "parserOptions": { + "sourceType": "module" + }, + "rules": { + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": "off", + "react-hooks/exhaustive-deps": "off", + "react/no-unknown-property": "off", + "react-compiler/react-compiler": "off", + "local-rules/lint-markdown-code-blocks": "error" + } + } + ] } diff --git a/.flowconfig b/.flowconfig deleted file mode 100644 index 836f6ec1eb0..00000000000 --- a/.flowconfig +++ /dev/null @@ -1,35 +0,0 @@ -[ignore] - -/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/ISSUE_TEMPLATE/0-bug.yml b/.github/ISSUE_TEMPLATE/0-bug.yml new file mode 100644 index 00000000000..56d2e8540f6 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/0-bug.yml @@ -0,0 +1,34 @@ +name: "🐛 Report a bug" +description: "Report a problem on the website." +title: "[Bug]: " +labels: ["bug: unconfirmed"] +body: + - type: textarea + attributes: + label: Summary + description: | + A clear and concise summary of what the bug is. + placeholder: | + Example bug report: + When I click the "Submit" button on "Feedback", nothing happens. + validations: + required: true + - type: input + attributes: + label: Page + description: | + What page(s) did you encounter this bug on? + placeholder: | + https://react.dev/ + validations: + required: true + - type: textarea + attributes: + label: Details + description: | + Please provide any additional details about the bug. + placeholder: | + Example details: + The "Submit" button is unresponsive. I've tried refreshing the page and using a different browser, but the issue persists. + validations: + required: false diff --git a/.github/ISSUE_TEMPLATE/1-typo.yml b/.github/ISSUE_TEMPLATE/1-typo.yml new file mode 100644 index 00000000000..c86557a1160 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/1-typo.yml @@ -0,0 +1,34 @@ +name: "🤦 Typo or mistake" +description: "Report a typo or mistake in the docs." +title: "[Typo]: " +labels: ["type: typos"] +body: + - type: textarea + attributes: + label: Summary + description: | + A clear and concise summary of what the mistake is. + placeholder: | + Example: + The code example on the "useReducer" page includes an unused variable `nextId`. + validations: + required: true + - type: input + attributes: + label: Page + description: | + What page is the typo on? + placeholder: | + https://react.dev/ + validations: + required: true + - type: textarea + attributes: + label: Details + description: | + Please provide a explanation for why this is a mistake. + placeholder: | + Example mistake: + In the "useReducer" section of the "API Reference" page, the code example under "Writing a reducer function" includes an unused variable `nextId` that should be removed. + validations: + required: false diff --git a/.github/ISSUE_TEMPLATE/2-suggestion.yml b/.github/ISSUE_TEMPLATE/2-suggestion.yml new file mode 100644 index 00000000000..ac0b480fe9f --- /dev/null +++ b/.github/ISSUE_TEMPLATE/2-suggestion.yml @@ -0,0 +1,34 @@ +name: "💡 Suggestions" +description: "Suggest a new page, section, or edit for an existing page." +title: "[Suggestion]: " +labels: ["type: documentation"] +body: + - type: textarea + attributes: + label: Summary + description: | + A clear and concise summary of what we should add. + placeholder: | + Example: + Add a new page for how to use React with TypeScript. + validations: + required: true + - type: input + attributes: + label: Page + description: | + What page is this about? + placeholder: | + https://react.dev/ + validations: + required: false + - type: textarea + attributes: + label: Details + description: | + Please provide a explanation for what you're suggesting. + placeholder: | + Example: + I think it would be helpful to have a page that explains how to use React with TypeScript. This could include a basic example of a component written in TypeScript, and a link to the TypeScript documentation. + validations: + required: true diff --git a/.github/ISSUE_TEMPLATE/3-framework.yml b/.github/ISSUE_TEMPLATE/3-framework.yml new file mode 100644 index 00000000000..a47295e1e87 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/3-framework.yml @@ -0,0 +1,116 @@ +name: "📄 Suggest new framework" +description: "I am a framework author applying to be included as a recommended framework." +title: "[Framework]: " +labels: ["type: framework"] +body: + - type: markdown + attributes: + value: | + ## Apply to be included as a recommended React framework + + _This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/start-a-new-react-project). If you are not a framework author, please contact the authors before submitting._ + + Our goal when recommending a framework is to start developers with a React project that solves common problems like code splitting, data fetching, routing, and HTML generation without any extra work later. We believe this will allow users to get started quickly with React, and scale their app to production. + + While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision). + + To be included, frameworks must meet the following criteria: + + - **Free & open-source**: must be open source and free to use. + - **Well maintained**. must be actively maintained, providing bug fixes and improvements. + - **Active community**: must have a sufficiently large and active community to support users. + - **Clear onboarding**: must have clear install steps to install the React version of the framework. + - **Ecosystem compatibility**: must support using the full range of libraries and tools in the React ecosystem. + - **Self-hosting option**: must support an option to self-host applications without losing access to features. + - **Developer experience**. must allow developers to be productive by supporting features like Fast Refresh. + - **User experience**. must provide built-in support for common problems like routing and data-fetching. + - **Compatible with our future vision for React**. React evolves over time, and frameworks that do not align with React’s direction risk isolating their users from the main React ecosystem over time. To be included on this page we must feel confident that the framework is setting its users up for success with React over time. + + Please note, we have reviewed most of the popular frameworks available today, so it is unlikely we have not considered your framework already. But if you think we missed something, please complete the application below. + - type: input + attributes: + label: Name + description: | + What is the name of your framework? + validations: + required: true + - type: input + attributes: + label: Homepage + description: | + What is the URL of your homepage? + validations: + required: true + - type: input + attributes: + label: Install instructions + description: | + What is the URL of your getting started guide? + validations: + required: true + - type: dropdown + attributes: + label: Is your framework open source? + description: | + We only recommend free and open source frameworks. + options: + - 'No' + - 'Yes' + validations: + required: true + - type: textarea + attributes: + label: Well maintained + description: | + Please describe how your framework is actively maintained. Include recent releases, bug fixes, and improvements as examples. + validations: + required: true + - type: textarea + attributes: + label: Active community + description: | + Please describe your community. Include the size of your community, and links to community resources. + validations: + required: true + - type: textarea + attributes: + label: Clear onboarding + description: | + Please describe how a user can install your framework with React. Include links to any relevant documentation. + validations: + required: true + - type: textarea + attributes: + label: Ecosystem compatibility + description: | + Please describe any limitations your framework has with the React ecosystem. Include any libraries or tools that are not compatible with your framework. + validations: + required: true + - type: textarea + attributes: + label: Self-hosting option + description: | + Please describe how your framework supports self-hosting. Include any limitations to features when self-hosting. Also include whether you require a server to deploy your framework. + validations: + required: true + - type: textarea + attributes: + label: Developer Experience + description: | + Please describe how your framework provides a great developer experience. Include any limitations to React features like React DevTools, Chrome DevTools, and Fast Refresh. + validations: + required: true + - type: textarea + attributes: + label: User Experience + description: | + Please describe how your framework helps developers create high quality user experiences by solving common use-cases. Include specifics for how your framework offers built-in support for code-splitting, routing, HTML generation, and data-fetching in a way that avoids client/server waterfalls by default. Include details on how you offer features such as SSG and SSR. + validations: + required: true + - type: textarea + attributes: + label: Compatible with our future vision for React + description: | + Please describe how your framework aligns with our future vision for React. Include how your framework will evolve with React over time, and your plans to support future React features like React Server Components. + validations: + required: true diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 00000000000..63e310e0bad --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,7 @@ +contact_links: + - name: 📃 Bugs in React + url: https://github.com/facebook/react/issues/new/choose + about: This issue tracker is not for bugs in React. Please file React issues here. + - name: 🤔 Questions and Help + url: https://reactjs.org/community/support.html + about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 0e1030408e2..7e4f6d2f2cb 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,9 +1,11 @@ + diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 00000000000..97f2a39ea0d --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,8 @@ +version: 2 +updates: + - package-ecosystem: "npm" + directory: "/" + schedule: + interval: "weekly" + # Disable Dependabot. Doing it here so it propagates to translation forks. + open-pull-requests-limit: 0 diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml new file mode 100644 index 00000000000..83e7f2e8a9c --- /dev/null +++ b/.github/workflows/analyze.yml @@ -0,0 +1,101 @@ +name: Analyze Bundle + +on: + pull_request: + push: + branches: + - main # change this if your default branch is named differently + workflow_dispatch: + +permissions: {} + +jobs: + analyze: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Set up node + uses: actions/setup-node@v4 + with: + node-version: '20.x' + cache: yarn + cache-dependency-path: yarn.lock + + - name: Restore cached node_modules + uses: actions/cache@v4 + with: + path: '**/node_modules' + key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }} + + - name: Install deps + run: yarn install --frozen-lockfile + + - name: Restore next build + uses: actions/cache@v4 + id: restore-build-cache + env: + cache-name: cache-next-build + with: + 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 + + # 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@0.5.0 report + + - name: Upload bundle + uses: actions/upload-artifact@v4 + with: + path: .next/analyze/__bundle_analysis.json + name: bundle_analysis.json + + - name: Download base branch bundle stats + uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e + if: success() && github.event.number + with: + workflow: analyze.yml + branch: ${{ github.event.pull_request.base.ref }} + name: bundle_analysis.json + 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. + # There are two configurable arguments that come from package.json: + # + # - budget: optional, set a budget (bytes) against which size changes are measured + # it's set to 350kb here by default, as informed by the following piece: + # https://infrequently.org/2021/03/the-performance-inequality-gap/ + # + # - red-status-percentage: sets the percent size increase where you get a red + # status indicator, defaults to 20% + # + # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis` + # entry in your package.json file. + - name: Compare with base branch bundle + if: success() && github.event.number + run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare + + - name: Upload analysis comment + uses: actions/upload-artifact@v4 + with: + name: analysis_comment.txt + path: .next/analyze/__bundle_analysis_comment.txt + + - name: Save PR number + run: echo ${{ github.event.number }} > ./pr_number + + - name: Upload PR number + uses: actions/upload-artifact@v4 + with: + name: pr_number + path: ./pr_number + + # The actual commenting happens in the other action, matching the guidance in + # https://securitylab.github.com/research/github-actions-preventing-pwn-requests/ diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml new file mode 100644 index 00000000000..fcac3773869 --- /dev/null +++ b/.github/workflows/analyze_comment.yml @@ -0,0 +1,60 @@ +name: Analyze Bundle (Comment) + +on: + workflow_run: + workflows: ['Analyze Bundle'] + types: + - completed + +permissions: + contents: read + issues: write + pull-requests: write + +jobs: + comment: + runs-on: ubuntu-latest + if: > + ${{ github.event.workflow_run.event == 'pull_request' && + github.event.workflow_run.conclusion == 'success' }} + steps: + - name: Download base branch bundle stats + uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e + with: + workflow: analyze.yml + run_id: ${{ github.event.workflow_run.id }} + name: analysis_comment.txt + path: analysis_comment.txt + + - name: Download PR number + uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e + with: + workflow: analyze.yml + run_id: ${{ github.event.workflow_run.id }} + name: pr_number + path: pr_number + + - name: Get comment body + 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) + echo "pr-number=$pr_number" >> $GITHUB_OUTPUT + + - name: Comment + uses: marocchino/sticky-pull-request-comment@52423e01640425a022ef5fd42c6fb5f633a02728 + with: + header: next-bundle-analysis + number: ${{ steps.get-comment-body.outputs.pr-number }} + message: ${{ steps.get-comment-body.outputs.body }} diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml new file mode 100644 index 00000000000..2f5b2a497ed --- /dev/null +++ b/.github/workflows/discord_notify.yml @@ -0,0 +1,32 @@ +name: Discord Notify + +on: + pull_request_target: + types: [opened, ready_for_review] + +permissions: {} + +jobs: + check_maintainer: + uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main + permissions: + # Used by check_maintainer + contents: read + with: + actor: ${{ github.event.pull_request.user.login }} + + notify: + if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }} + needs: check_maintainer + runs-on: ubuntu-latest + steps: + - name: Discord Webhook Action + uses: tsickert/discord-webhook@v6.0.0 + with: + webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }} + embed-author-name: ${{ github.event.pull_request.user.login }} + embed-author-url: ${{ github.event.pull_request.user.html_url }} + embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }} + embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}' + embed-description: ${{ github.event.pull_request.body }} + embed-url: ${{ github.event.pull_request.html_url }} diff --git a/.github/workflows/label_core_team_prs.yml b/.github/workflows/label_core_team_prs.yml new file mode 100644 index 00000000000..f9b3328ee51 --- /dev/null +++ b/.github/workflows/label_core_team_prs.yml @@ -0,0 +1,41 @@ +name: Label Core Team PRs + +on: + pull_request_target: + +permissions: {} + +env: + TZ: /usr/share/zoneinfo/America/Los_Angeles + # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout + SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1 + +jobs: + check_maintainer: + uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main + permissions: + # Used by check_maintainer + contents: read + with: + actor: ${{ github.event.pull_request.user.login }} + + label: + if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }} + runs-on: ubuntu-latest + needs: check_maintainer + permissions: + # Used to add labels on issues + issues: write + # Used to add labels on PRs + pull-requests: write + steps: + - name: Label PR as React Core Team + uses: actions/github-script@v7 + with: + script: | + github.rest.issues.addLabels({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: ${{ github.event.number }}, + labels: ['React Core Team'] + }); diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml new file mode 100644 index 00000000000..81a04601c21 --- /dev/null +++ b/.github/workflows/site_lint.yml @@ -0,0 +1,37 @@ +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] + +permissions: {} + +jobs: + lint: + runs-on: ubuntu-latest + + name: Lint on node 20.x and ubuntu-latest + + steps: + - uses: actions/checkout@v4 + - name: Use Node.js 20.x + uses: actions/setup-node@v4 + with: + node-version: 20.x + cache: yarn + cache-dependency-path: yarn.lock + + - name: Restore cached node_modules + uses: actions/cache@v4 + with: + path: '**/node_modules' + key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }} + + - name: Install deps + run: yarn install --frozen-lockfile + + - name: Lint codebase + run: yarn ci-check diff --git a/.gitignore b/.gitignore index dbe72d17694..99f4615e5a9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,41 @@ -.cache -.DS_STORE -.idea +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies node_modules -public +/.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 + +# rss +public/rss.xml diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 00000000000..dc0378c3488 --- /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 c9dc0490835..00000000000 --- a/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -8.4 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000000..96f1f96d2b3 --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +src/content/**/*.md diff --git a/.prettierrc b/.prettierrc index eb91e6abb75..19b54ad0599 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/.prettierrc.examples b/.prettierrc.examples deleted file mode 100644 index bd17fb7e3c8..00000000000 --- a/.prettierrc.examples +++ /dev/null @@ -1,8 +0,0 @@ -{ - "bracketSpacing": false, - "jsxBracketSameLine": true, - "parser": "flow", - "printWidth": 60, - "singleQuote": true, - "trailingComma": "es5" -} \ No newline at end of file diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 00000000000..f049d4c5317 --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,76 @@ +# Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to make participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, sex characteristics, gender identity and expression, +level of experience, education, socio-economic status, nationality, personal +appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or + advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic + address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies within all project spaces, and it also applies when +an individual is representing the project or its community in public spaces. +Examples of representing a project or community include using an official +project e-mail address, posting via an official social media account, or acting +as an appointed representative at an online or offline event. Representation of +a project may be further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at . All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, +available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html + +[homepage]: https://www.contributor-covenant.org + +For answers to common questions about this code of conduct, see +https://www.contributor-covenant.org/faq diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a39bdf94532..4c7e5ec74c2 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -8,23 +8,19 @@ Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](https://code.facebook.com/codeofconduct) so that you can understand what actions will and will not be tolerated. +## Technical Writing Tips + +This is a [good summary](https://medium.com/@kvosswinkel/coding-like-a-journalist-ee52360a16bc) for things to keep in mind when writing technical docs. + ## Guidelines for Text **Different sections intentionally have different styles.** 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. -**[Tutorial](https://reactjs.org/tutorial/tutorial.html)** is relatively informal, and is designed for people who prefer a hands-on approach to learning, and can tolerate skipping theory in favor of practice. Its goal is to give the reader a feel for a typical React workflow rather than to explain fundamentals in detail. Here we focus on *what* to do and spend less time on *how* or *why* we did it. It is extremely important to do a lot of hand-holding and unambiguously describe every single change. It should be possible for a beginner to mechanically follow every instruction, and still get to a working tic-tac-toe game. - -**[Quick Start](https://reactjs.org/docs/hello-world.html)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Quick Start builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Quick Start article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Quick Start also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them. This is, for example, why we introduce elements before components. Resist adding too much detail to Quick Start articles. They intentionally don't cover all corner cases, and focus on establishing firm foundations. - -**[Advanced Guides](https://reactjs.org/docs/jsx-in-depth.html)** are deep dives into topics that aren't essential for a beginner developer but that everyone bumps into sooner or later. They don't have a specific order, and target more experienced developers. If you have a set of recipes fitting a particular use case, and those recipes aren't opinionated (most React users would agree on them), this is the place to add them. - -**[Reference](https://reactjs.org/docs/react-api.html)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Quick Start or Advanced Guides should be mentioned in the reference documentation for the corresponding APIs. - -**[Contributing](https://reactjs.org/docs/how-to-contribute.html)** should stay up-to-date and be friendly to relatively experienced developers. +**[Learn React](https://react.dev/learn)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Learn React builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Learn React article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Learn React also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them. -**[FAQ](https://reactjs.org/docs/faq-ajax.html)** has a more conversational tone than the other sections. Here, it's fine to include some content that's not primarily concerned with React, as long as React users are overwhelmingly interested in it (e.g. recommendations on directory structure). It's also okay to show more than a single way to do something in the FAQ, and briefly discuss the tradeoffs. The FAQ prioritizes unblocking people with a working solution over explaining concepts in detail, and can be more opinionated than the rest of the docs, even providing popular library recommendations. +**[API Reference](https://react.dev/reference/react)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs. **Try to follow your own instructions.** @@ -66,7 +62,7 @@ Instead, **do** write this: ```js class MyComponent extends React.Component { constructor(props) { - super(props) + super(props); this.handleChange = this.handleChange.bind(this); this.state = {value: ''}; } @@ -83,6 +79,7 @@ Ignore this rule if you're specifically describing an experimental proposal. Mak - Use semicolons. - No space between function names and parens (`method() {}` not `method () {}`). - When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/). +- Always capitalize React concepts such as Hooks, Effects, and Transitions. ### Highlighting @@ -100,7 +97,7 @@ They tell the website to highlight specific lines. You can highlight a single line: ```` -```js{2} +```js {2} function hello() { // this line will get highlighted } @@ -110,7 +107,7 @@ function hello() { A range of lines: ```` -```js{2-4} +```js {2-4} function hello() { // these lines // will get @@ -122,7 +119,7 @@ function hello() { Or even multiple ranges: ```` -```js{2-4,6} +```js {2-4,6} function hello() { // these lines // will get diff --git a/README.md b/README.md index 3bd56d2db41..182192cb552 100644 --- a/README.md +++ b/README.md @@ -1,38 +1,42 @@ -# reactjs.org +# react.dev -This repo contains the source code and documentation powering [reactjs.org](https://reactjs.org/). +This repo contains the source code and documentation powering [react.dev](https://react.dev/). ## Getting started ### Prerequisites 1. Git -1. Node: install version 8.4 or greater +1. Node: any version starting with v16.8.0 or greater 1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) 1. A fork of the repo (for any contributions) -1. A clone of the [reactjs.org repo](https://github.com/reactjs/reactjs.org) on your local machine +1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine ### Installation -1. `cd reactjs.org` to go into the project root -1. `yarn` to install the website's npm dependencies +1. `cd react.dev` to go into the project root +3. `yarn` to install the website's npm dependencies ### Running locally -1. `yarn dev` to start the hot-reloading development server (powered by [Gatsby](https://www.gatsbyjs.org)) -1. `open http://localhost:8000` to open the site in your favorite browser +1. `yarn dev` to start the development server (powered by [Next.js](https://nextjs.org/)) +1. `open http://localhost:3000` to open the site in your favorite browser ## Contributing +### Guidelines + +The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/react.dev/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections. + ### Create a branch -1. `git checkout master` from any folder in your local `reactjs.org` repository -1. `git pull origin master` to ensure you have the latest main code +1. `git checkout main` from any folder in your local `react.dev` repository +1. `git pull origin main` to ensure you have the latest main code 1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch ### Make the change -1. Follow the "Running locally" instructions +1. Follow the ["Running locally"](#running-locally) instructions 1. Save the files and check in the browser 1. Changes to React components in `src` will hot-reload 1. Changes to markdown files in `content` will hot-reload @@ -41,22 +45,19 @@ This repo contains the source code and documentation powering [reactjs.org](http ### Test the change 1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile. -1. Run `yarn check-all` from the project root. (This will run Prettier, ESLint, and Flow.) +2. Run `yarn check-all`. (This will run Prettier, ESLint and validate types.) ### Push it -1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fixed header logo on Android`) to stage and commit your changes +1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes 1. `git push my-fork-name the-name-of-my-branch` -1. Go to the [reactjs.org repo](https://github.com/reactjs/reactjs.org) and you should see recently pushed branches. +1. Go to the [react.dev repo](https://github.com/reactjs/react.dev) and you should see recently pushed branches. 1. Follow GitHub's instructions. -1. If possible, include screenshots of visual changes. A Netlify build will also be automatically created once you make your PR so other people can see your change. +1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub. ## Translation -If you are interesting in translating `reactjs.org`, please join the Crowdin. - -* [Crowdin - React](https://crowdin.com/project/react) - -## Troubleshooting +If you are interested in translating `react.dev`, please see the current translation efforts [here](https://github.com/reactjs/react.dev/issues/4135). -- `yarn reset` to clear the local cache +## License +Content submitted to [react.dev](https://react.dev/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md) file. diff --git a/colors.js b/colors.js new file mode 100644 index 00000000000..2b282c820c6 --- /dev/null +++ b/colors.js @@ -0,0 +1,102 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +module.exports = { + // Text colors + primary: '#23272F', // gray-90 + 'primary-dark': '#F6F7F9', // gray-5 + secondary: '#404756', // gray-70 + 'secondary-dark': '#EBECF0', // gray-10 + tertiary: '#5E687E', // gray-50 + 'tertiary-dark': '#99A1B3', // gray-30 + link: '#087EA4', // blue-50 + 'link-dark': '#58C4DC', // blue-40 + syntax: '#EBECF0', // gray-10 + wash: '#FFFFFF', + 'wash-dark': '#23272F', // gray-90 + card: '#F6F7F9', // gray-05 + 'card-dark': '#343A46', // gray-80 + highlight: '#E6F7FF', // blue-10 + 'highlight-dark': 'rgba(88,175,223,.1)', + border: '#EBECF0', // gray-10 + 'border-dark': '#343A46', // gray-80 + 'secondary-button': '#EBECF0', // gray-10 + 'secondary-button-dark': '#404756', // gray-70 + brand: '#087EA4', // blue-40 + 'brand-dark': '#58C4DC', // blue-40 + + // Gray + 'gray-95': '#16181D', + 'gray-90': '#23272F', + 'gray-80': '#343A46', + 'gray-70': '#404756', + 'gray-60': '#4E5769', + 'gray-50': '#5E687E', + 'gray-40': '#78839B', + 'gray-30': '#99A1B3', + 'gray-20': '#BCC1CD', + 'gray-15': '#D0D3DC', + 'gray-10': '#EBECF0', + 'gray-5': '#F6F7F9', + + // Blue + 'blue-80': '#043849', + 'blue-60': '#045975', + 'blue-50': '#087EA4', + 'blue-40': '#149ECA', // Brand Blue + 'blue-30': '#58C4DC', // unused + 'blue-20': '#ABE2ED', + 'blue-10': '#E6F7FF', // todo: doesn't match illustrations + 'blue-5': '#E6F6FA', + + // Yellow + 'yellow-60': '#B65700', + 'yellow-50': '#C76A15', + 'yellow-40': '#DB7D27', // unused + 'yellow-30': '#FABD62', // unused + 'yellow-20': '#FCDEB0', // unused + 'yellow-10': '#FDE7C7', + 'yellow-5': '#FEF5E7', + + // Purple + 'purple-60': '#2B3491', // unused + 'purple-50': '#575FB7', + 'purple-40': '#6B75DB', + 'purple-30': '#8891EC', + 'purple-20': '#C3C8F5', // unused + 'purple-10': '#E7E9FB', + 'purple-5': '#F3F4FD', + + // Green + 'green-60': '#2B6E62', + 'green-50': '#388F7F', + 'green-40': '#44AC99', + 'green-30': '#7FCCBF', + 'green-20': '#ABDED5', + 'green-10': '#E5F5F2', + 'green-5': '#F4FBF9', + + // RED + 'red-60': '#712D28', + 'red-50': '#A6423A', // unused + 'red-40': '#C1554D', + 'red-30': '#D07D77', + 'red-20': '#E5B7B3', // unused + 'red-10': '#F2DBD9', // unused + 'red-5': '#FAF1F0', + + // MISC + 'code-block': '#99a1b30f', // gray-30 @ 6% + 'gradient-blue': '#58C4DC', // Only used for the landing gradient for now. + github: { + highlight: '#fffbdd', + }, +}; diff --git a/content/404.md b/content/404.md deleted file mode 100644 index ab9ba1d60cf..00000000000 --- a/content/404.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: single -title: Page Not Found -permalink: 404.html ---- - -We couldn't find what you were looking for. - -Please contact the owner of the site that linked you to the original URL and let them know their link is broken. diff --git a/content/acknowledgements.yml b/content/acknowledgements.yml deleted file mode 100644 index a8ebfacb320..00000000000 --- a/content/acknowledgements.yml +++ /dev/null @@ -1,1130 +0,0 @@ ---- -- '839' -- Aaron Ackerman -- Aaron Cannon -- Aaron Franks -- Aaron Gelter -- Abhay Nikam -- Abhishek Soni -- Adam -- Adam Bloomston -- Adam Krebs -- Adam Mark -- Adam Solove -- Adam Stankiewicz -- Adam Timberlake -- Adam Zapletal -- Addy Osmani -- Adrian Sieber -- Aesop Wolf -- Ahmad Wali Sidiqi -- Alan Plum -- Alan Souza -- Alan deLevie -- Alastair Hole -- Alex -- Alex Babkov -- Alex Baumgertner -- Alex Boatwright -- Alex Boyd -- Alex Dajani -- Alex Jacobs -- Alex Katopodis -- Alex Lopatin -- Alex Mykyta -- Alex Pien -- Alex Smith -- Alex Zelenskiy -- Alex Zherdev -- Alexander -- Alexander Shtuchkin -- Alexander Solovyov -- Alexander Tseung -- Alexandre Gaudencio -- Alexandre Kirszenberg -- Alexey Raspopov -- Alexey Shamrin -- Ali Taheri Moghaddar -- Ali Ukani -- Alireza Mostafizi -- Almero Steyn -- Amanvir Sangha -- Amjad Masad -- Anastasia A -- Andre Giron -- Andre Z Sanchez -- Andreas Möller -- Andreas Savvides -- Andreas Svensson -- Andres Kalle -- Andres Suarez -- Andrew Clark -- Andrew Cobby -- Andrew Davey -- Andrew Henderson -- Andrew Imm -- Andrew Kulakov -- Andrew Lo -- Andrew Poliakov -- Andrew Rasmussen -- Andrew Rota -- Andrew Sokolov -- Andrew Zich -- Andrey Marchenko -- Andrey Okonetchnikov -- Andrey Popp -- Andrey Safronov -- Andy Edwards -- Ankeet Maini -- Anthony van der Hoorn -- Anto Aravinth -- Antonio Ruberto -- Antti Ahti -- António Nuno Monteiro -- Anuj Tomar -- Anuja Ware -- AoDev -- April Arcus -- Areeb Malik -- Aria Buckles -- Aria Stewart -- Arian Faurtosh -- Arni Fannar -- Arshabh Kumar Agarwal -- Artem Nezvigin -- Arthur Gunn -- Ashish -- Austin Wright -- Avinash Kondeti -- Ayman Osman -- B.Orlov -- BDav24 -- BEAUDRU Manuel -- Baraa Hamodi -- Bartosz Kaszubowski -- Basarat Ali Syed -- Battaile Fauber -- Beau Smith -- Ben Anderson -- Ben Berman -- Ben Brooks -- Ben Foxall -- Ben Halpern -- Ben Jaffe -- Ben Moss -- Ben Newman -- Ben Ripkens -- Benedikt Meurer -- Benjamin Keen -- Benjamin Leiken -- Benjamin Woodruff -- Benjy Cui -- Benoit Girard -- Benton Rochester -- Bernard Lin -- Bill Blanchard -- Bill Fisher -- Billy Shih -- Blaine Hatab -- Blaine Kasten -- Bob Eagan -- Bob Ralian -- Bob Renwick -- Bobby -- Bogdan Chadkin -- Bojan Mihelac -- Boris Yankov -- Brad Vogel -- Bradford -- Bradley Spaulding -- Brandon Bloom -- Brandon Dail -- Brandon Tilley -- Brenard Cubacub -- Brent Vatne -- Brian Cooke -- Brian Emil Hartz -- Brian Holt -- Brian Hsu -- Brian Kim -- Brian Kung -- Brian Reavis -- Brian Rue -- Brian Vaughn -- Bruce Harris -- Bruno Heridet -- Bruno Škvorc -- Bryan Braun -- CT Wu -- Cam Song -- Cam Spiers -- Cameron Chamberlain -- Cameron Matheson -- Carolina Powers -- Carter Chung -- Cassus Adam Banko -- Cat Chen -- Cedric Sohrauer -- Cesar William Alvarenga -- Chad Fawcett -- Changsoon Bok -- Charles Marsh -- Charlie Garcia -- Chase Adams -- Cheng Lou -- Chitharanjan Das -- Chris -- Chris Bolin -- Chris Grovers -- Chris Ha -- Chris Pearce -- Chris Rebert -- Chris Sciolla -- Christian Alfoni -- Christian Oliff -- Christian Roman -- Christoffer Sawicki -- Christoph Pojer -- Christophe Hurpeau -- Christopher Monsanto -- Claudio Brandolino -- Clay Allsopp -- Clay Miller -- Clement Hoang -- CodinCat -- Cody Reichert -- Colin Wren -- Connor McSheffrey -- Conor Hastings -- Constantin Gavrilete -- Cory House -- Cotton Hou -- Craig Akimoto -- Cristovao Verstraeten -- DQNEO -- Dai Nguyen -- Damian Nicholson -- Damien Pellier -- Damien Soulard -- Dan Abramov -- Dan Fox -- Dan Schafer -- DanZeuss -- Daniel Carlsson -- Daniel Cousens -- Daniel Friesen -- Daniel Gasienica -- Daniel Hejl -- Daniel Hejl -- Daniel Liburd -- Daniel Lo Nigro -- Daniel Mané -- Daniel Miladinov -- Daniel Rodgers-Pryor -- Daniel Rosenwasser -- Daniel Rotter -- Daniel Schonfeld -- Daniela Borges -- Danilo Vitoriano -- Danny Ben-David -- Danny Hurlburt -- Darcy -- Daryl Lau -- Darío Javier Cravero -- Dave Galbraith -- Dave Lunny -- Dave Voyles -- David Aurelio -- David Baker -- David Beitey -- David Ed Mellum -- David Goldberg -- David Granado -- David Greenspan -- David Hellsing -- David Hu -- David Khourshid -- David Mininger -- David Neubauer -- David Percy -- Dean Shi -- Denis Laxalde -- Denis Pismenny -- Denis Sokolov -- Deniss Jacenko -- Dennis Johnson -- Desmond Brand -- Devedse -- Devinsuit -- Devon Blandin -- Devon Harvey -- Dheeraj Kumar -- Dhyey Thakore -- Diego Muracciole -- Dima Beznos -- Dimzel Sobolev -- Dmitri Zaitsev -- Dmitrii Abramov -- Dmitriy Kubyshkin -- Dmitriy Rozhkov -- Dmitry Blues -- Dmitry Mazuro -- Dmitry Zhuravlev-Nevsky -- Domenico Matteo -- Dominic Gannaway -- Don Abrams -- Dongsheng Liu -- Duke Pham -- Dustan Kasten -- Dustin Getz -- Dylan Harrington -- Dylan Kirby -- Edgar (Algebr) -- Eduard -- Eduardo Garcia -- Edvin Erikson -- Elaine Fang -- Eli White -- Enguerran -- Eoin Hennessy -- Eric Churchill -- Eric Clemmons -- Eric Douglas -- Eric Eastwood -- Eric Elliott -- Eric Florenzano -- Eric Matthys -- Eric Nakagawa -- Eric O'Connell -- Eric Pitcher -- Eric Sakmar -- Eric Schoffstall -- Erik Harper -- Erik Hellman -- Espen Hovlandsdal -- Esteban -- Eugene -- EugeneGarbuzov -- Evan Coonrod -- Evan Jacobs -- Evan Scott -- Evan Vosberg -- Fabio M. Costa -- Fabrizio Castellarin -- Faheel Ahmad -- Fatih -- Federico Rampazzo -- Felipe Oliveira Carvalho -- Felix Gnass -- Felix Kling -- Fernando Alex Helwanger -- Fernando Correia -- Fernando Montoya -- Filip Hoško -- Filip Spiridonov -- Flarnie Marchan -- Fokke Zandbergen -- Frank Yan -- Frankie Bagnardi -- François Chalifour -- François-Xavier Bois -- Fraser Haer -- Fred Zhao -- Freddy Rangel -- Fyodor Ivanishchev -- G Scott Olson -- G. Kay Lee -- Gabe Levi -- Gabriel Lett Viviani -- Gajus Kuizinas -- Gant Laborde -- Gareth Nicholson -- Garmash Nikolay -- Garren Smith -- Garrett McCullough -- Gavin McQuistin -- Gaëtan Renaudeau -- Geert Pasteels -- Geert-Jan Brits -- George A Sisco III -- Georgii Dolzhykov -- Gert Hengeveld -- Giamir Buoncristiani -- Gil Chen-Zion -- Gilbert -- Giorgio Polvara -- Giuseppe -- Glen Mailer -- Grant Timmerman -- Greg Hurrell -- Greg Palmer -- Greg Perkins -- Greg Roodt -- Gregory -- Grgur Grisogono -- Griffin Michl -- Guangqiang Dong -- Guido Bouman -- Guilherme Oenning -- Guilherme Ruiz -- Guillaume Claret -- Harry Hull -- Harry Marr -- Harry Moreno -- Harshad Sabne -- Hekar Khani -- Hendrik Swanepoel -- Henrik Nyh -- Henry Harris -- Henry Wong -- Henry Zhu -- Hideo Matsumoto -- Hikaru Suido -- Hiroyuki Wada -- Hou Chia -- Huang-Wei Chang -- Hugo Agbonon -- Hugo Jobling -- Hyeock Kwon -- Héctor Ramos -- Héliton Nordt -- Ian Obermiller -- Ian Sutherland -- Ignacio Carbajo -- Igor Scekic -- Ike Peters -- Ilia Pavlenkov -- Ilya Gelman -- Ilya Shuklin -- Ilyá Belsky -- Ingvar Stepanyan -- Irae Carvalho -- Isaac Salier-Hellendag -- Islam Sharabash -- Iurii Kucherov -- Ivan -- Ivan Kozik -- Ivan Krechetov -- Ivan Vergiliev -- Ivan Zotov -- J. Andrew Brassington -- J. Renée Beach -- JD Isaacks -- JJ Weber -- JW -- Jack -- Jack Cross -- Jack Ford -- Jack Zhang -- Jackie Wung -- Jackson Huang -- Jacob Gable -- Jacob Greenleaf -- Jacob Lamont -- Jae Hun Lee -- Jae Hun Ro -- Jaeho Lee -- Jaime Mingo -- Jake Boone -- Jake Worth -- Jakub Malinowski -- James -- James Brantly -- James Burnett -- James Friend -- James Ide -- James Long -- James Pearce -- James Seppi -- James South -- James Wen -- Jamie Wong -- Jamis Charles -- Jamison Dance -- Jan Hancic -- Jan Kassens -- Jan Raasch -- Jan Schär -- Jane Manchun Wong -- Jared Forsyth -- Jared Fox -- Jarrod Mosen -- Jason -- Jason Bonta -- Jason Grlicky -- Jason Ly -- Jason Miller -- Jason Quense -- Jason Trill -- Jason Webster -- Jay Jaeho Lee -- Jay Phelps -- Jayen Ashar -- Jean Lauliac -- Jed Watson -- Jeff Barczewski -- Jeff Carpenter -- Jeff Chan -- Jeff Hicken -- Jeff Kolesky -- Jeff Morrison -- Jeff Welch -- Jeffrey Lin -- Jeffrey Wan -- Jen Wong -- Jeremy Fairbank -- Jess Telford -- Jesse Skinner -- Jignesh Kakadiya -- Jim OBrien -- Jim Sproch -- Jiminikiz -- Jimmy Jea -- Jing Chen -- Jinwoo Oh -- Jinxiu Lee -- Jirat Ki -- Jiyeon Seo -- Jody McIntyre -- Joe Critchley -- Joe Stein -- Joel Auterson -- Joel Denning -- Joel Sequeira -- Johan Tinglöf -- Johannes Baiter -- Johannes Emerich -- Johannes Lumpe -- John Heroy -- John Longanecker -- John Ryan -- John Watson -- John-David Dalton -- Jon Beebe -- Jon Bretman -- Jon Chester -- Jon Hester -- Jon Madison -- Jon Scott Clark -- Jon Tewksbury -- Jonas Enlund -- Jonas Gebhardt -- Jonathan Hsu -- Jonathan Persson -- Jordan Harband -- Jordan Walke -- Jorrit Schippers -- Joseph Nudell -- Joseph Savona -- Josh Bassett -- Josh Duck -- Josh Hunt -- Josh Perez -- Josh Yudaken -- Joshua Evans -- Joshua Go -- Joshua Goldberg -- Joshua Ma -- João Valente -- Juan -- Juan Serrano -- Julen Ruiz Aizpuru -- Julian Viereck -- Julien Bordellier -- Julio Lopez -- Jun Kim -- Jun Wu -- Juraj Dudak -- Justas Brazauskas -- Justin -- Justin Grant -- Justin Jaffray -- Justin Robison -- Justin Woo -- KB -- Kale -- Kamron Batman -- Karl Horky -- Karl Mikkelsen -- Karpich Dmitry -- Karthik Balakrishnan -- Karthik Chintapalli -- Kateryna -- Kaylee Knowles -- KeicaM -- Keito Uchiyama -- Ken Powers -- Kenneth Chau -- Kent C. Dodds -- Kevin Cheng -- Kevin Coughlin -- Kevin Huang -- Kevin Lacker -- Kevin Lau -- Kevin Lin -- Kevin Old -- Kevin Robinson -- Kevin Suttle -- Kewei Jiang -- Keyan Zhang -- Kier Borromeo -- Kiho · Cham -- KimCoding -- Kirk Steven Hansen -- Kit Randel -- Kite -- Kohei TAKATA -- Koo Youngmin -- Krystian Karczewski -- Kunal Mehta -- Kurt Furbush -- Kurt Ruppel -- Kurt Weiberth -- Kyle Kelley -- Kyle Mathews -- Laurence Rowe -- Laurent Etiemble -- Lee Byron -- Lee Jaeyoung -- Lee Sanghyeon -- Lei -- Leland Richardson -- Leon Fedotov -- Leon Yip -- Leonardo YongUk Kim -- Levi Buzolic -- Levi McCallum -- Lewis Blackwood -- Liangzhen Zhu -- Lily -- Linus Unnebäck -- Lipis -- Liz -- Logan Allen -- Lovisa Svallingson -- Lucas -- Ludovico Fischer -- Luigy Leon -- Luke Belliveau -- Luke Horvat -- Lutz Rosema -- MICHAEL JACKSON -- MIKAMI Yoshiyuki -- Maciej Kasprzyk -- Maher Beg -- Maksim Shastsel -- Manas -- Marcelo Alves -- Marcin K. -- Marcin Kwiatkowski -- Marcin Mazurek -- Marcin Szczepanski -- Marcio Puga -- Marcos Ojeda -- Marcy Sutton -- Mariano Desanze -- Mario Souto -- Marius Skaar Ludvigsen -- Marjan -- Mark Anderson -- Mark Funk -- Mark Hintz -- Mark IJbema -- Mark Murphy -- Mark Pedrotti -- Mark Penner -- Mark Richardson -- Mark Rushakoff -- Mark Sun -- Marks Polakovs -- Marlon Landaverde -- Marshall Bowers -- Marshall Roch -- Martin Andert -- Martin Hochel -- Martin Hujer -- Martin Jul -- Martin Konicek -- Martin Mihaylov -- Martin V -- Masaki KOBAYASHI -- Mateusz Burzyński -- Mathieu M-Gosselin -- Mathieu Savy -- Matias Singers -- Matsunoki -- Matt Brookes -- Matt Dunn-Rankin -- Matt Harrison -- Matt Huggins -- Matt Stow -- Matt Zabriskie -- Matthew Dapena-Tretter -- Matthew Herbst -- Matthew Hodgson -- Matthew Johnston -- Matthew King -- Matthew Looi -- Matthew Miner -- Matthew Shotton -- Matthias Le Brun -- Matti Nelimarkka -- Mattijs Kneppers -- Max Donchenko -- Max F. Albrecht -- Max Heiber -- Max Stoiber -- Maxi Ferreira -- Maxim Abramchuk -- Maxwel D'souza -- Merrick Christensen -- Mert Kahyaoğlu -- Michael Chan -- Michael Jackson -- Michael McDermott -- Michael O'Brien -- Michael Randers-Pehrson -- Michael Ridgway -- Michael Sinov -- Michael Terry -- Michael Warner -- Michael Wiencek -- Michael Ziwisky -- Michal Srb -- Michał Ordon -- Michał Pierzchała -- Michele Bertoli -- Michelle Todd -- Michiya -- Mihai Parparita -- Mike D Pilsbury -- Mike Groseclose -- Mike Nordick -- Mikhail Osher -- Mikolaj Dadela -- Miles Johnson -- Miller Medeiros -- Minwe LUO -- Minwei Xu -- Miorel Palii -- Mitchel Humpherys -- Mitermayer Reis -- Moacir Rosa -- Mojtaba Dashtinejad -- Morhaus -- Moshe Kolodny -- Mouad Debbar -- Murad -- Murray M. Moss -- Murtaza Haveliwala -- NE-SmallTown -- Nadeesha Cabral -- Naman Goel -- Nate -- Nate Hunzaker -- Nate Lee -- Nate Norberg -- Nathan Hardy -- Nathan Smith -- Nathan White -- Nee -- Neo -- Neri Marschik -- NestorTejero -- Nguyen Truong Duy -- Nicholas Bergson-Shilcock -- Nicholas Clawson -- Nick Balestra -- Nick Fitzgerald -- Nick Gavalas -- Nick Kasten -- Nick Merwin -- Nick Presta -- Nick Raienko -- Nick Thompson -- Nick Williams -- Nik Nyby -- Nikita Lebedev -- Niklas Boström -- Nikoloz Buligini -- Nima Jahanshahi -- Ning Xia -- Niole Nelson -- Nolan Lawson -- Nuno Campos -- OJ Kwon -- Oiva Eskola -- Oleg -- Oleksii Markhovskyi -- Oliver Zeigermann -- Olivier Tassinari -- Omid Hezaveh -- Oscar Bolmsten -- Oskari Mantere -- Owen Coutts -- Pablo Lacerda de Miranda -- Paolo Moretti -- Pascal Hartig -- Patrick -- Patrick Finnigan -- Patrick Laughlin -- Patrick Stapleton -- Paul Benigeri -- Paul Harper -- Paul Kehrer -- Paul Manta -- Paul O’Shannessy -- Paul Seiffert -- Paul Shen -- Pedro Nauck -- Pete Hunt -- Peter Blazejewicz -- Peter Cottle -- Peter Jaros -- Peter Newnham -- Peter Ruibal -- Petri Lehtinen -- Petri Lievonen -- Phil Quinn -- Phil Rajchgot -- Philip Jackson -- Philipp Spieß -- Pieter De Baets -- Pieter Vanderwerff -- Piotr Czajkowski -- Piper Chester -- Pontus Abrahamsson -- Pouja Nikray -- Prathamesh Sonpatki -- Prayag Verma -- Preston Parry -- Qin Junwen -- RSG -- Rachel D. Cartwright -- Rafael -- Rafael Angeline -- Rafal Dittwald -- Ragnar Þór Valgeirsson -- Rahul Gupta -- Rainer Oviir -- Raito Bezarius -- Rajat Sehgal -- Rajiv Tirumalareddy -- Ram Kaniyur -- Randall Randall -- Ray -- Ray Dai -- Raymond Ha -- Reed Loden -- Remko Tronçon -- Ricardo -- Rich Harris -- Richard -- Richard D. Worth -- Richard Feldman -- Richard Kho -- Richard Littauer -- Richard Livesey -- Richard Maisano -- Richard Roncancio -- Richard Wood -- Richie Thomas -- Rick Beerendonk -- Rick Ford -- Riley Tomasek -- Rob Arnold -- Robert Binna -- Robert Chang -- Robert Haritonov -- Robert Kielty -- Robert Knight -- Robert Martin -- Robert Sedovsek -- Robin Berjon -- Robin Frischmann -- Robin Ricard -- Roderick Hsiao -- Rodrigo Pombo -- Rohan Nair -- Roman Liutikov -- Roman Matusevich -- Roman Pominov -- Roman Vanesyan -- Rui Araújo -- Russ -- Ryan Lahfa -- Ryan Seddon -- Ryo Shibayama -- Sahat Yalkabov -- Saif Hakim -- Saiichi Hashimoto -- Sakina Crocker -- Sam Balana -- Sam Beveridge -- Sam Saccone -- Sam Selikoff -- Samer Buna -- Samuel -- Samuel Hapák -- Samuel Reed -- Samuel Scheiderich -- Samy Al Zahrani -- Sander Spies -- Sasha Aickin -- Sassan Haradji -- Satoshi Nakajima -- Scott -- Scott Burch -- Scott Feeney -- Sean Gransee -- Sean Kinsey -- Sean Smith -- Seba -- Sebastian Markbåge -- Sebastian McKenzie -- Senin Roman -- Seoh Char -- Sercan Eraslan -- Serg -- Sergey Generalov -- Sergey Rubanov -- Seyi Adebajo -- Shane O'Sullivan -- Shaun Trennery -- ShihChi Huang -- Shim Won -- Shinnosuke Watanabe -- Shogun Sea -- Shota Kubota -- Shripad K -- Shubheksha Jalan -- Shuhei Kagawa -- Sibi -- Simen Bekkhus -- Simon Højberg -- Simon Welsh -- Simone Vittori -- Skasi -- Snowmanzzz(Zhengzhong Zhao) -- Soichiro Kawamura -- Soo Jae Hwang -- Sophia -- Sophia Westwood -- Sophie Alpert -- Sota Ohara -- Spen Taylor -- Spencer Ahrens -- Spencer Handley -- Sriram Thiagarajan -- Stefan Dombrowski -- Stephen John Sorensen -- Stephen Murphy -- Stephie -- Sterling Cobb -- Steve Baker -- Steve Mao -- Steven Luscher -- Steven Syrek -- Steven Vachon -- Stolenkid -- Stoyan Stefanov -- Stuart Harris -- SunHuawei -- Sundeep Malladi -- Sung Won Cho -- Sunny Juneja -- Sunny Ripert -- Superlaziness -- Sven Helmberger -- Sverre Johansen -- Swaroop SM -- Sébastien Lorber -- Sławomir Laskowski -- Taegon Kim -- Taeho Kim -- Taehwan, No -- Tanase Hagi -- Tanner -- Tay Yang Shun -- Ted Kim -- TedPowers -- Tengfei Guo -- Teodor Szente -- Tetsuharu OHZEKI -- Tetsuya Hasegawa -- Thibaut Rizzi -- Thomas Aylott -- Thomas Boyt -- Thomas Broadley -- Thomas Reggi -- Thomas Röggla -- Thomas Shaddox -- Thomas Shafer -- ThomasCrvsr -- Tiago Fernandez -- Tienchai Wirojsaksaree -- Tim Routowicz -- Tim Schaub -- Timothy Yung -- Timur Carpeev -- Tobias Reiss -- Tom Duncalf -- Tom Gasson -- Tom Haggie -- Tom Hauburger -- Tom MacWright -- Tom Occhino -- Tomasz Kołodziejski -- Tomoya Suzuki -- Tomáš Hromada -- Tony Rossi -- Tony Spiro -- Toru Kobayashi -- Trevor Smith -- Trinh Hoang Nhu -- Troy DeMonbreun -- Tsung Hung -- Tyler Brock -- Tyler Buchea -- Tyler Deitz -- Ujjwal Ojha -- Uladzimir Havenchyk -- Usman -- Ustin Zarubin -- Vadim Chernysh -- Valentin Shergin -- Van der Auwermeulen Grégoire -- Varayut Lerdkanlayanawat -- Varun Bhuvanendran -- Varun Rau -- Vasiliy Loginevskiy -- Vedat Mahir YILMAZ -- Veljko Tornjanski -- Vesa Laakso -- Victor Alvarez -- Victor Homyakov -- Victor Koenders -- Victoria Quirante -- Vikash Agrawal -- Ville Immonen -- Vincent Riemer -- Vincent Siao -- Vincent Taing -- Vipul A M -- Vitaliy Potapov -- Vitaly Kramskikh -- Vitor Balocco -- Vjeux -- Vladimir Kovpak -- Vladimir Tikunov -- Volkan Unsal -- Wander Wang -- Wayne Larsen -- Weizenlol -- Whien -- WickyNilliams -- Will Myers -- William Hoffmann -- Wincent Colaiuta -- Wout Mertens -- Xavier Morel -- XuefengWu -- Yakov Dalinchuk -- Yan Li -- Yasar icli -- Yaxian -- YouBao Nong -- Yuichi Hagio -- Yura Chuchola -- Yuriy Dybskiy -- Yusong Liu -- Yutaka Nakajima -- Yuval Dekel -- Zac Braddy -- Zac Smith -- Zach Bruggeman -- Zach Ramaekers -- Zacharias -- Zeke Sikelianos -- Zhangjd -- adraeth -- ankitml -- arush -- bel3atar -- brafdlog -- brillout -- chen -- chocolateboy -- cjshawMIT -- clariroid -- claudiopro -- cloudy1 -- comerc -- cutbko -- davidxi -- dfrownfelter -- djskinner -- dongmeng.ldm -- everdimension -- gillchristian -- gitanupam -- guoyong yi -- hanumanthan -- hao.huang -- hjmoss -- hkal -- iamchenxin -- iamdoron -- iawia002 -- imagentleman -- imjanghyuk -- inkinworld -- jaaberg -- jddxf -- jinmmd -- koh-taka -- kohashi85 -- ksvitkovsky -- laiso -- lamo2k123 -- leeyoungalias -- li.li -- lucas -- maxprafferty -- mdogadailo -- mfijas -- mguidotto -- mondaychen -- najisawas -- neeldeep -- newvlad -- nhducit -- ogom -- pingan1927 -- rgarifullin -- saiyagg -- scloudyy -- segmentationfaulter -- shifengchen -- songawee -- starkch -- sugarshin -- tokikuch -- ventuno -- wacii -- wali-s -- walrusfruitcake -- yiminghe -- youmoo -- yuntao.qyt -- z.ky -- zhangjg -- zhangs -- zombieJ -- zwhitchcox -- "Árni Hermann Reynisson" -- "元彦" -- "凌恒" -- "张敏" -- "王晓勇" -- "龙海燕" \ No newline at end of file diff --git a/content/authors.yml b/content/authors.yml deleted file mode 100644 index 5fd72964ed3..00000000000 --- a/content/authors.yml +++ /dev/null @@ -1,84 +0,0 @@ -# Map of short name to more information. `name` will be used but if you don't -# want to use your real name, just use whatever. If url is included, your name -# will be a link to the provided url. -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: http://dan.cx/ -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 -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://sophiealpert.com -steveluscher: - name: Steven Luscher - url: https://twitter.com/steveluscher -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 diff --git a/content/blog/2013-06-02-jsfiddle-integration.md b/content/blog/2013-06-02-jsfiddle-integration.md deleted file mode 100644 index 43922bcc7fc..00000000000 --- a/content/blog/2013-06-02-jsfiddle-integration.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: JSFiddle Integration -author: [vjeux] ---- - -[JSFiddle](https://jsfiddle.net) 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](http://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) is also available. - - - diff --git a/content/blog/2013-06-05-why-react.md b/content/blog/2013-06-05-why-react.md deleted file mode 100644 index 79e5af0baaf..00000000000 --- a/content/blog/2013-06-05-why-react.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Why did we build React? -author: [petehunt] ---- - -There are a lot of JavaScript MVC frameworks out there. Why did we build React -and why would you want to use it? - -## React isn't an MVC framework. - -React is a library for building composable user interfaces. It encourages -the creation of reusable UI components which present data that changes over -time. - -## React doesn't use templates. - -Traditionally, web application UIs are built using templates or HTML directives. -These templates dictate the full set of abstractions that you are allowed to use -to build your UI. - -React approaches building user interfaces differently by breaking them into -**components**. This means React uses a real, full featured programming language -to render views, which we see as an advantage over templates for a few reasons: - -- **JavaScript is a flexible, powerful programming language** with the ability - to build abstractions. This is incredibly important in large applications. -- By unifying your markup with its corresponding view logic, React can actually - make views **easier to extend and maintain**. -- By baking an understanding of markup and content into JavaScript, there's - **no manual string concatenation** and therefore less surface area for XSS - vulnerabilities. - -We've also created [JSX](/docs/jsx-in-depth.html), an optional syntax -extension, in case you prefer the readability of HTML to raw JavaScript. - -## Reactive updates are dead simple. - -React really shines when your data changes over time. - -In a traditional JavaScript application, you need to look at what data changed -and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS, -which provides a declarative interface via directives and data binding [requires -a linking function to manually update DOM nodes](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation). - -React takes a different approach. - -When your component is first initialized, the `render` method is called, -generating a lightweight representation of your view. From that representation, -a string of markup is produced, and injected into the document. When your data -changes, the `render` method is called again. In order to perform updates as -efficiently as possible, we diff the return value from the previous call to -`render` with the new one, and generate a minimal set of changes to be applied -to the DOM. - -> The data returned from `render` is neither a string nor a DOM node -- it's a -> lightweight description of what the DOM should look like. - -We call this process **reconciliation**. Check out -[this jsFiddle](http://jsfiddle.net/2h6th4ju/) to see an example of -reconciliation in action. - -Because this re-render is so fast (around 1ms for TodoMVC), the developer -doesn't need to explicitly specify data bindings. We've found this approach -makes it easier to build apps. - -## HTML is just the beginning. - -Because React has its own lightweight representation of the document, we can do -some pretty cool things with it: - -- Facebook has dynamic charts that render to `` instead of HTML. -- Instagram is a "single page" web app built entirely with React and - `Backbone.Router`. Designers regularly contribute React code with JSX. -- We've built internal prototypes that run React apps in a web worker and use - React to drive **native iOS views** via an Objective-C bridge. -- You can run React - [on the server](https://github.com/petehunt/react-server-rendering-example) - for SEO, performance, code sharing and overall flexibility. -- Events behave in a consistent, standards-compliant way in all browsers - (including IE8) and automatically use - [event delegation](http://davidwalsh.name/event-delegate). - -Head on over to https://reactjs.org to check out what we have -built. Our documentation is geared towards building apps with the framework, -but if you are interested in the nuts and bolts -[get in touch](/support.html) with us! - -Thanks for reading! diff --git a/content/blog/2013-06-12-community-roundup.md b/content/blog/2013-06-12-community-roundup.md deleted file mode 100644 index c8d4af256f0..00000000000 --- a/content/blog/2013-06-12-community-roundup.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: "Community Round-up #1" -author: [vjeux] ---- - -React was open sourced two weeks ago and it's time for a little round-up of what has been going on. - -## Khan Academy Question Editor - -It looks like [Sophie Alpert](http://sophiebits.com/) is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for her contributions in form of pull requests, bug reports and presence on IRC ([#reactjs on Freenode](irc://chat.freenode.net/reactjs)). Sophie wrote about her experience using React: - -> I just rewrote a 2000-line project in React and have now made a handful of pull requests to React. Everything about React I've seen so far seems really well thought-out and I'm proud to be the first non-FB/IG production user of React. -> -> The project that I rewrote in React (and am continuing to improve) is the Khan Academy question editor which content creators can use to enter questions and hints that will be presented to students: ->
-> -> [Read the full post...](http://sophiebits.com/2013/06/09/using-react-to-speed-up-khan-academy.html) - -## Pimp my Backbone.View (by replacing it with React) - -[Paul Seiffert](https://blog.mayflower.de/) wrote a blog post that explains how to integrate React into Backbone applications. - -> React has some interesting concepts for JavaScript view objects that can be used to eliminate this one big problem I have with Backbone.js. -> -> As in most MVC implementations (although React is probably just a VC implementation), a view is one portion of the screen that is managed by a controlling object. This object is responsible for deciding when to re-render the view and how to react to user input. With React, these view-controllers objects are called components. A component knows how to render its view and how to handle to the user's interaction with it. -> -> The interesting thing is that React is figuring out by itself when to re-render a view and how to do this in the most efficient way. -> -> [Read the full post...](https://blog.mayflower.de/3937-Backbone-React.html) - -## Using facebook's React with require.js - -[Mario Mueller](http://blog.xenji.com/) wrote a menu component in React and was able to easily integrate it with require.js, EventEmitter2 and bower. - -> I recently stumbled upon facebook's React library, which is a JavaScript library for building reusable frontend components. Even if this lib is only at version 0.3.x it behaves very stable, it is fast and is fun to code. I'm a big fan of require.js, so I tried to use React within the require.js eco system. It was not as hard as expected and here are some examples and some thoughts about it. -> -> [Read the full post...](http://blog.xenji.com/2013/06/facebooks-react-require-js.html) - -## Origins of React - -[Pete Hunt](http://www.petehunt.net/blog/) explained what differentiates React from other JavaScript libraries in [a previous blog post](/blog/2013/06/05/why-react.html). [Lee Byron](http://leebyron.com/) gives another perspective on Quora: - -> React isn't quite like any other popular JavaScript libraries, and it solves a very specific problem: complex UI rendering. It's also intended to be used along side many other popular libraries. For example, React works well with Backbone.js, amongst many others. -> -> React was born out of frustrations with the common pattern of writing two-way data bindings in complex MVC apps. React is an implementation of one-way data bindings. -> -> [Read the full post...](https://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX) diff --git a/content/blog/2013-06-19-community-roundup-2.md b/content/blog/2013-06-19-community-roundup-2.md deleted file mode 100644 index 3350d68216a..00000000000 --- a/content/blog/2013-06-19-community-roundup-2.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: "Community Round-up #2" -author: [vjeux] ---- - -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. - -## Some quick thoughts on React - -[Andrew Greig](http://www.andrewgreig.com/) made a blog post that gives a high level description of what React is. - -> I have been using Facebooks recently released JavaScript framework called React.js for the last few days and have managed to obtain a rather high level understanding of how it works and formed a good perspective on how it fits in to the entire javascript framework ecosystem. -> -> Basically, React is not an MVC framework. It is not a replacement for Backbone or Knockout or Angular, instead it is designed to work with existing frameworks and help extend their functionality. -> -> It is designed for building big UIs. The type where you have lots of reusable components that are handling events and presenting and changing some backend data. In a traditional MVC app, React fulfils the role of the View. So you would still need to handle the Model and Controller on your own. -> -> I found the best way to utilise React was to pair it with Backbone, with React replacing the Backbone View, or to write your own Model/Data object and have React communicate with that. -> -> [Read the full post...](http://www.andrewgreig.com/637/) - -## React and Socket.IO Chat Application - -[Danial Khosravi](https://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO. - -> A week ago I was playing with AngularJS and [this little chat application](https://github.com/btford/angular-socket-io-im) which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in [EchoJS](http://www.echojs.com/) and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app. ->
-> -> [Read the full post...](https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/) - -## React and Other Frameworks - -[Pete Hunt](http://www.petehunt.net/blog/) wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React. - -> To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular's directives instead. So I took the first Google hit for "AngularJS directive tutorial" (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...] -> -> We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive. -> -> [Read the full post...](https://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look) - -In the same vein, [Markov Twain](https://twitter.com/markov_twain/status/345702941845499906) re-implemented the examples on the front-page [with Ember](http://jsbin.com/azihiw/2/edit) and [Vlad Yazhbin](https://twitter.com/vla) re-implemented the tutorial [with Angular](http://jsfiddle.net/vla/Cdrse/). - -## Web Components: React & x-tags - -Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.vjeux.com/) wrote a proof of concept that shows how to implement them using React. - -> Using [x-tags](http://www.x-tags.org/) from Mozilla, we can write custom tags within the DOM. This is a great opportunity to be able to write reusable components without being tied to a particular library. I wrote [x-react](https://github.com/vjeux/react-xtags/) to have them being rendered in React. ->
-> -> [Read the full post...](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html) - -## React TodoMVC Example - -[TodoMVC.com](http://todomvc.com/) is a website that collects various implementations of the same basic Todo app. [Pete Hunt](http://www.petehunt.net/blog/) wrote an idiomatic React version. - -> Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps. -> -> To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today. ->
-> -> [Read the source code...](https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react) - -## JSX is not HTML - -Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences: - - - [Whitespace removal](/docs/jsx-is-not-html.html) - - [HTML Entities](/docs/jsx-is-not-html.html) - - [Comments](/docs/jsx-is-not-html.html) - - [Custom HTML Attributes](/docs/jsx-is-not-html.html) diff --git a/content/blog/2013-06-21-react-v0-3-3.md b/content/blog/2013-06-21-react-v0-3-3.md deleted file mode 100644 index f09bf8a6f10..00000000000 --- a/content/blog/2013-06-21-react-v0-3-3.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: "React v0.3.3" -author: [zpao] ---- - -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. - - -## react-tools - -* Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`. -* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache. -* Freeze our esprima dependency. - - -## React - -* Allow reusing the same DOM node to render different components. e.g. `React.renderComponent(
, domNode); React.renderComponent(, domNode);` will work now. - - -## JSXTransformer - -* Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files. diff --git a/content/blog/2013-06-27-community-roundup-3.md b/content/blog/2013-06-27-community-roundup-3.md deleted file mode 100644 index 69041ea09c9..00000000000 --- a/content/blog/2013-06-27-community-roundup-3.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: "Community Round-up #3" -author: [vjeux] ---- - -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. - -## Moving From Backbone To React - -[Clay Allsopp](https://twitter.com/clayallsopp) successfully ported [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/), a fairly big, interaction-heavy JavaScript app, to React. - -> [](http://usepropeller.com/blog/posts/from-backbone-to-react/)Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code. -> -> React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The "elements" you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...] -> -> We moved about 20 different Backbone view classes to React over the past few weeks, including the live-preview pane that you see in our little iOS demo. Most importantly, it's allowed us to put energy into making each component work great on its own, instead of spending extra cycles to ensure they function in unison. For that reason, we think React is a more scalable way to build view-intensive apps than Backbone alone, and it doesn't require you to drop-everything-and-refactor like a move to Ember or Angular would demand. -> -> [Read the full post...](http://usepropeller.com/blog/posts/from-backbone-to-react/) - -## Grunt Task for JSX - -[Eric Clemmons](https://ericclemmons.github.io/) wrote a task for [Grunt](http://gruntjs.com/) that applies the JSX transformation to your JavaScript files. It also works with [Browserify](http://browserify.org/) if you want all your files to be concatenated and minified together. - -> Grunt task for compiling Facebook React's .jsx templates into .js -> -> ```javascript -> grunt.initConfig({ -> react: { -> app: { -> options: { extension: 'js' }, -> files: { 'path/to/output/dir': 'path/to/jsx/templates/dir' } -> ``` -> -> It also works great with `grunt-browserify`! -> -> ```javascript -> browserify: { -> options: { -> transform: [ require('grunt-react').browserify ] -> }, -> app: { -> src: 'path/to/source/main.js', -> dest: 'path/to/target/output.js' -> ``` -> -> [Check out the project ...](https://github.com/ericclemmons/grunt-react) - -## Backbone/Handlebars Nested Views - -[Joel Burget](http://joelburget.com/) wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars. - -> The problem here is that we're trying to maniplate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render. -> -> What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future). -> -> So while our view is conceptually hierarchical, due to the fact that it has to go through a flat textual representation, we need to do a lot of extra work to reassemble that structure after rendering. -> -> [Read the full post...](http://joelburget.com/react/) - -## JSRomandie Meetup - -[Renault John Lecoultre](https://twitter.com/renajohn/) from [BugBuster](http://www.bugbuster.com) did a React introduction talk at a JS meetup called [JS Romandie](https://twitter.com/jsromandie) last week. - - - -## CoffeeScript integration - -[Vjeux](http://blog.vjeux.com/) used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript. - -> Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable. -> -> ```javascript -> {div, h3, textarea} = React.DOM -> (div {className: 'MarkdownEditor'}, [ -> (h3 {}, 'Input'), -> (textarea {onKeyUp: @handleKeyUp, ref: 'textarea'}, -> @state.value -> ) -> ]) -> ``` -> -> [Read the full post...](http://blog.vjeux.com/2013/javascript/react-coffeescript.html) - -## Tutorial in Plain JavaScript - -We've seen a lot of people comparing React with various frameworks. [Ricardo Tomasi](http://ricardo.cc/) decided to re-implement the tutorial without any framework, just plain JavaScript. - -> Facebook & Instagram launched the React framework and an accompanying tutorial. Developer Vlad Yazhbin decided to rewrite that using AngularJS. The end result is pretty neat, but if you're like me you will not actually appreciate the HTML speaking for itself and doing all the hard work. So let's see what that looks like in plain javascript. -> -> [Read the full post...](http://ricardo.cc/2013/06/07/react-tutorial-rewritten-in-plain-javascript.html) diff --git a/content/blog/2013-07-02-react-v0-4-autobind-by-default.md b/content/blog/2013-07-02-react-v0-4-autobind-by-default.md deleted file mode 100644 index c8e5155ff96..00000000000 --- a/content/blog/2013-07-02-react-v0-4-autobind-by-default.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: "New in React v0.4: Autobind by Default" -author: [zpao] ---- - -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. - - -## What is React.autoBind? - -If you take a look at most of our current examples, you'll see us using `React.autoBind` for event handlers. This is used in place of `Function.prototype.bind`. Remember that in JS, [function calls are late-bound](https://bonsaiden.github.io/JavaScript-Garden/#function.this). That means that if you simply pass a function around, the `this` used inside won't necessarily be the `this` you expect. `Function.prototype.bind` creates a new, properly bound, function so that when called, `this` is exactly what you expect it to be. - -Before we launched React, we would write this: - -```js{4} -React.createClass({ - onClick: function(event) {/* do something with this */}, - render: function() { - return + + + +

That's right!

+ + +``` + + + +Manipulating the UI imperatively works well enough for isolated examples, but it gets exponentially more difficult to manage in more complex systems. Imagine updating a page full of different forms like this one. Adding a new UI element or a new interaction would require carefully checking all existing code to make sure you haven't introduced a bug (for example, forgetting to show or hide something). + +React was built to solve this problem. + +In React, you don't directly manipulate the UI--meaning you don't enable, disable, show, or hide components directly. Instead, you **declare what you want to show,** and React figures out how to update the UI. Think of getting into a taxi and telling the driver where you want to go instead of telling them exactly where to turn. It's the driver's job to get you there, and they might even know some shortcuts you haven't considered! + + + +## Thinking about UI declaratively {/*thinking-about-ui-declaratively*/} + +You've seen how to implement a form imperatively above. To better understand how to think in React, you'll walk through reimplementing this UI in React below: + +1. **Identify** your component's different visual states +2. **Determine** what triggers those state changes +3. **Represent** the state in memory using `useState` +4. **Remove** any non-essential state variables +5. **Connect** the event handlers to set the state + +### Step 1: Identify your component's different visual states {/*step-1-identify-your-components-different-visual-states*/} + +In computer science, you may hear about a ["state machine"](https://en.wikipedia.org/wiki/Finite-state_machine) being in one of several “states”. If you work with a designer, you may have seen mockups for different "visual states". React stands at the intersection of design and computer science, so both of these ideas are sources of inspiration. + +First, you need to visualize all the different "states" of the UI the user might see: + +* **Empty**: Form has a disabled "Submit" button. +* **Typing**: Form has an enabled "Submit" button. +* **Submitting**: Form is completely disabled. Spinner is shown. +* **Success**: "Thank you" message is shown instead of a form. +* **Error**: Same as Typing state, but with an extra error message. + +Just like a designer, you'll want to "mock up" or create "mocks" for the different states before you add logic. For example, here is a mock for just the visual part of the form. This mock is controlled by a prop called `status` with a default value of `'empty'`: + + + +```js +export default function Form({ + status = 'empty' +}) { + if (status === 'success') { + return

That's right!

+ } + return ( + <> +

City quiz

+

+ In which city is there a billboard that turns air into drinkable water? +

+
+ ` 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 [`