diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 0d31b1fff..f049d4c53 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,5 +1,76 @@ # Code of Conduct -Facebook has adopted a Code of Conduct that we expect project participants to adhere to. -Please read the [full text](https://code.fb.com/codeofconduct/) -so that you can understand what actions will and will not be tolerated. \ No newline at end of file +## 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/content/blog/2017-07-26-error-handling-in-react-16.md b/content/blog/2017-07-26-error-handling-in-react-16.md index 7625de7b4..455fd001a 100644 --- a/content/blog/2017-07-26-error-handling-in-react-16.md +++ b/content/blog/2017-07-26-error-handling-in-react-16.md @@ -111,4 +111,4 @@ Error boundaries preserve the declarative nature of React, and behave as you wou React 15 included a very limited support for error boundaries under a different method name: `unstable_handleError`. This method no longer works, and you will need to change it to `componentDidCatch` in your code starting from the first 16 beta release. -For this change, we’ve provided [a codemod](https://github.com/reactjs/react-codemod#error-boundaries) to automatically migrate your code. +For this change, we’ve provided a [codemod](https://github.com/reactjs/react-codemod#error-boundaries) to automatically migrate your code. diff --git a/content/blog/2019-08-15-new-react-devtools.md b/content/blog/2019-08-15-new-react-devtools.md index 1841a51de..8e52dfae3 100644 --- a/content/blog/2019-08-15-new-react-devtools.md +++ b/content/blog/2019-08-15-new-react-devtools.md @@ -60,6 +60,9 @@ git clone https://github.com/facebook/react-devtools cd react-devtools +# Checkout the previous release branch +git checkout v3 + # Install dependencies and build the unpacked extension yarn install yarn build:extension diff --git a/content/community/conferences.md b/content/community/conferences.md index 5c5ca4156..068dae73d 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -80,7 +80,12 @@ February 27 & 28, 2020 in Sydney, Australia ### Render-Atlanta 2020 {#render-atlanta-2020} May 4-6, 2020. Atlanta, GA, USA. -[Website](https://renderatl.com) +[Website](https://renderatl.com) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) + +### React Finland 2020 {#react-finland-2020} +May 26-29 in Helsinki, Finland + +[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland) ### React Next 2020 {#react-next-2020} June 15, 2020. Tel Aviv, Israel. diff --git a/content/community/courses.md b/content/community/courses.md index 0de2c69d5..47e33eccf 100644 --- a/content/community/courses.md +++ b/content/community/courses.md @@ -8,6 +8,8 @@ permalink: community/courses.html ## Free Courses {#free-courses} +- [Glitch: React Starter Kit](https://glitch.com/culture/react-starter-kit/) - A free, 5-part video course with interactive code examples that will help you learn React. + - [Codecademy: React 101](https://www.codecademy.com/learn/react-101) - Codecademy's introductory course for React. - [Egghead.io: Start Learning React](https://egghead.io/courses/start-learning-react) - This series will explore the basic fundamentals of React to get you started. diff --git a/content/community/meetups.md b/content/community/meetups.md index 3263915a7..ebc3ed296 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -144,6 +144,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [New York, NY - ReactJS](https://www.meetup.com/NYC-Javascript-React-Group/) * [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/) * [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/) +* [New York, NY - useReactNYC](https://www.meetup.com/useReactNYC/) * [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/) * [Philadelphia, PA - ReactJS](https://www.meetup.com/RQ-React/) * [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/) diff --git a/content/community/support.md b/content/community/support.md index 65ce8b3b0..c392b86a1 100644 --- a/content/community/support.md +++ b/content/community/support.md @@ -12,6 +12,8 @@ React has a community of millions of developers. On this page we've listed some React-related communities that you can be a part of; see the other pages in this section for additional online and in-person learning materials. +Before participating in React's communities, [please read our Code of Conduct](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md). We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) and we expect that all community members adhere to the guidelines within. + ## Stack Overflow {#stack-overflow} Stack Overflow is a popular forum to ask code-level questions or if you're stuck with a specific error. Read through the [existing questions](https://stackoverflow.com/questions/tagged/reactjs) tagged with **reactjs** or [ask your own](https://stackoverflow.com/questions/ask?tags=reactjs)! diff --git a/content/community/tools-debugging.md b/content/community/tools-debugging.md index 5416f7eb8..c2bf257e3 100644 --- a/content/community/tools-debugging.md +++ b/content/community/tools-debugging.md @@ -5,4 +5,4 @@ layout: community permalink: community/debugging-tools.html --- - * **[React Developer Tools](https://github.com/facebook/react-devtools):** an extension available for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), [Firefox](https://addons.mozilla.org/firefox/addon/react-devtools/), and as a [standalone app](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools) that allows you to inspect the React component hierarchy in the Chrome Developer Tools. + * **[React Developer Tools](https://github.com/facebook/react-devtools):** an extension available for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), [Firefox](https://addons.mozilla.org/firefox/addon/react-devtools/), and as a [standalone app](https://github.com/facebook/react/tree/master/packages/react-devtools) that allows you to inspect the React component hierarchy in the Chrome Developer Tools. diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md index 00c370aa9..7846aa1c5 100644 --- a/content/docs/codebase-overview.md +++ b/content/docs/codebase-overview.md @@ -217,7 +217,11 @@ React Fiber のアーキテクチャに関して[ここ](https://github.com/acdl ### イベントシステム {#event-system} +<<<<<<< HEAD React は React DOM と React Native の両方で動作し、レンダラに依存しない合成 (synthetic) イベントシステムを実装しています。ソースコードは [`packages/events`](https://github.com/facebook/react/tree/master/packages/events) に格納されています。 +======= +React implements a synthetic event system which is agnostic of the renderers and works both with React DOM and React Native. Its source code is located in [`packages/react-events`](https://github.com/facebook/react/tree/master/packages/react-events). +>>>>>>> 8b30ae43439818009213da86eca872a3d869c5eb このイベントシステムのコードについて[深く掘り下げた動画](https://www.youtube.com/watch?v=dRo_egw7tBc)（66 分）があります。 diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md index 12bdaffe9..4aa70f035 100644 --- a/content/docs/getting-started.md +++ b/content/docs/getting-started.md @@ -119,7 +119,11 @@ React の[基本コンセプト](/docs/hello-world.html)について慣れてき ## バージョン管理されたドキュメント {#versioned-documentation} +<<<<<<< HEAD このドキュメントは常に最新の stable 版の React に準拠しています。React 16 からは古いバージョンのドキュメントも[別のページ](/versions)から閲覧できます。古いバージョンのドキュメントは各バージョンリリース時のスナップショットであり、更新をかけることはありません。 +======= +This documentation always reflects the latest stable version of React. Since React 16, you can find older versions of the documentation on a [separate page](/versions). Note that documentation for past versions is snapshotted at the time of the release, and isn't being continuously updated. +>>>>>>> 8b30ae43439818009213da86eca872a3d869c5eb ## 他に聞きたいことは？ {#something-missing} diff --git a/content/docs/how-to-contribute.md b/content/docs/how-to-contribute.md index f0b4b784b..3be81eeca 100644 --- a/content/docs/how-to-contribute.md +++ b/content/docs/how-to-contribute.md @@ -11,9 +11,15 @@ redirect_from: React は Facebook の最初のオープンソースプロジェクトの 1 つで現在も非常に活発に開発されており、[facebook.com](https://www.facebook.com) 上のあらゆる人々にコードを届けることにも使用されています。私たちはこのプロジェクトへの貢献をできるだけ簡単かつ透明性の高いものにするために努力していますが、まだ完全ではありません。このドキュメントがプロジェクトへの貢献の手順を明確にし、あなたの持つ疑問を解決できれば幸いです。 +<<<<<<< HEAD ### [行動規範](https://code.facebook.com/codeofconduct) {#code-of-conduct} Facebook が採用するプロジェクト参加者に期待する行動規範があります。[全文](https://code.facebook.com/codeofconduct)を読んでください、そうすれば参加者はどのような行動を取ればよいか、またどのような行動が許容されないのか理解できるでしょう。 +======= +### [Code of Conduct](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md) {#code-of-conduct} + +Facebook has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it. Please read [the full text](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated. +>>>>>>> 8b30ae43439818009213da86eca872a3d869c5eb ### オープンな開発 {#open-development} @@ -21,7 +27,11 @@ React に関する開発作業はすべて [GitHub](https://github.com/facebook/ ### ブランチの構成 {#branch-organization} +<<<<<<< HEAD 私たちは [`master` branch](https://github.com/facebook/react/tree/master) を全てのテストが通るベストな状態に保つために努力しています。しかし素早い開発のため、あなたのアプリケーションと互換性がないかもしれない API の変更を行うことがあります。そのため [最新安定版の React](/downloads.html) を利用することをお勧めします。 +======= +We will do our best to keep the [`master` branch](https://github.com/facebook/react/tree/master) in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We recommend that you use [the latest stable version of React](/versions.html). +>>>>>>> 8b30ae43439818009213da86eca872a3d869c5eb プルリクエストを送信する場合は、`master` ブランチに対して行ってください。私たちはメジャーバージョンの安定版ブランチを別々に管理していますが、それらへのプルリクエストは直接受け付けません。代わりに、master から最新の安定したメジャーバージョンへコードを壊さない cherry-pick を行います。 diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index 689f95421..c506cee7f 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -145,7 +145,7 @@ Webpack v4 以降では本番 (production) モードでコードの minify を const TerserPlugin = require('terser-webpack-plugin'); module.exports = { - mode: 'production' + mode: 'production', optimization: { minimizer: [new TerserPlugin({ /* additional options here */ })], }, diff --git a/content/docs/reference-test-renderer.md b/content/docs/reference-test-renderer.md index 9f8c51255..253f97068 100644 --- a/content/docs/reference-test-renderer.md +++ b/content/docs/reference-test-renderer.md @@ -149,7 +149,11 @@ testRenderer.toJSON() testRenderer.toTree() ``` +<<<<<<< HEAD レンダーされたツリーを表すオブジェクトを返します。`toJSON()` とは異なり、このツリーはより詳細なものであり、ユーザー定義のコンポーネントも含んでいます。テストレンダラを利用して自作のアサーションライブラリを作成している場合以外は、おそらくこのメソッドが必要となることはないでしょう。 +======= +Return an object representing the rendered tree. The representation is more detailed than the one provided by `toJSON()`, and includes the user-written components. You probably don't need this method unless you're writing your own assertion library on top of the test renderer. +>>>>>>> 8b30ae43439818009213da86eca872a3d869c5eb ### `testRenderer.update()` {#testrendererupdate} diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 3a48c9479..677f9fa33 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -14,7 +14,11 @@ permalink: docs/render-props.html )}/> ``` +<<<<<<< HEAD レンダープロップを用いたライブラリとしては、[React Router](https://reacttraining.com/react-router/web/api/Route/render-func) や [Downshift](https://github.com/paypal/downshift) などがあります。 +======= +Libraries that use render props include [React Router](https://reacttraining.com/react-router/web/api/Route/render-func), [Downshift](https://github.com/paypal/downshift) and [Formik](https://github.com/jaredpalmer/formik). +>>>>>>> 8b30ae43439818009213da86eca872a3d869c5eb このドキュメントでは、レンダープロップが役立つ理由と、その実装手順について解説します。 diff --git a/content/docs/testing-recipes.md b/content/docs/testing-recipes.md index 609d3d74a..dd7efa5b4 100644 --- a/content/docs/testing-recipes.md +++ b/content/docs/testing-recipes.md @@ -14,8 +14,9 @@ Common testing patterns for React components. On this page, we will primarily use function components. However, these testing strategies don't depend on implementation details, and work just as well for class components too. -- [Setup/Teardown ](#setup--teardown) +- [Setup/Teardown](#setup--teardown) - [`act()`](#act) +- [Rendering](#rendering) - [Data Fetching](#data-fetching) - [Mocking Modules](#mocking-modules) - [Events](#events) diff --git a/content/docs/testing.md b/content/docs/testing.md index c067777c4..8335dc388 100644 --- a/content/docs/testing.md +++ b/content/docs/testing.md @@ -28,7 +28,11 @@ React コンポーネントをテストするのにはいくつか方法があ ### 推奨ツール {#tools} +<<<<<<< HEAD **[Jest](https://facebook.github.io/jest/)** は [`jsdom`](#mocking-a-rendering-surface) を通じて DOM にアクセスできる JavaScript のテストランナーです。jsdom はブラウザの模倣環境にすぎませんが、React コンポーネントをテストするのには十分なことが多いです。Jest は [モジュール](#mocking-modules) や [タイマー](#mocking-timers) のモックのような機能を組み合わせて、高速にイテレーションを回すことができ、コードをどう実行するかをよりコントロールできます。 +======= +**[Jest](https://facebook.github.io/jest/)** is a JavaScript test runner that lets you access the DOM via [`jsdom`](/docs/testing-environments.html#mocking-a-rendering-surface). While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking [modules](/docs/testing-environments.html#mocking-modules) and [timers](/docs/testing-environments.html#mocking-timers) so you can have more control over how the code executes. +>>>>>>> 8b30ae43439818009213da86eca872a3d869c5eb **[React Testing Library](https://testing-library.com/react)** は実装の詳細に依存せずに React コンポーネントをテストすることができるツールセットです。このアプローチはリファクタリングを容易にし、さらにアクセスビリティのベスト・プラクティスへと手向けてくれます。コンポーネントを children 抜きに「浅く」レンダリングする方法は提供していませんが、Jest のようなテストランナーで [モック](/docs/testing-recipes.html#mocking-modules) することで可能です。 diff --git a/content/footerNav.yml b/content/footerNav.yml new file mode 100644 index 000000000..f4a6728dc --- /dev/null +++ b/content/footerNav.yml @@ -0,0 +1,43 @@ +community: + title: Community + +docs: + title: Docs + +more: + title: More + items: + - title: Tutorial + to: /tutorial/tutorial.html + - title: Blog + to: /blog + - title: Acknowledgements + to: /acknowledgements.html + - title: React Native + to: https://facebook.github.io/react-native/ + external: true + +channels: + title: Channels + items: + - title: GitHub + to: https://github.com/facebook/react + external: true + - title: Stack Overflow + to: https://stackoverflow.com/questions/tagged/reactjs + external: true + - title: Discussion Forums + to: https://reactjs.org/community/support.html#popular-discussion-forums + external: true + - title: Reactiflux Chat + to: https://discord.gg/0ZcbPKXt5bZjGY5n + external: true + - title: DEV Community + to: https://dev.to/t/react + external: true + - title: Facebook + to: https://www.facebook.com/react + external: true + - title: Twitter + to: https://twitter.com/reactjs + external: true diff --git a/content/headerNav.yml b/content/headerNav.yml new file mode 100644 index 000000000..325a95c48 --- /dev/null +++ b/content/headerNav.yml @@ -0,0 +1,13 @@ +items: + - title: Docs + to: /docs/getting-started.html + activeSelector: /docs/ + - title: Tutorial + to: /tutorial/tutorial.html + activeSelector: /tutorial + - title: Blog + to: /blog/ + activeSelector: /blog + - title: Community + to: /community/support.html + activeSelector: /community diff --git a/content/languages.yml b/content/languages.yml index cd9d70744..51fb6f8af 100644 --- a/content/languages.yml +++ b/content/languages.yml @@ -59,6 +59,10 @@ translated_name: हिन्दी code: hi status: 0 +- name: Hungarian + translated_name: magyar + code: hu + status: 0 - name: Armenian translated_name: Հայերեն code: hy @@ -174,7 +178,7 @@ - name: Vietnamese translated_name: Tiếng Việt code: vi - status: 0 + status: 1 - name: Simplified Chinese translated_name: 简体中文 code: zh-hans diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 66aaa9f77..371822eae 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -335,7 +335,11 @@ Square の `render` メソッド内に書かれた `onClick` ハンドラ内で React DevTools を使えば React コンポーネントの props と state を確認できます。 +<<<<<<< HEAD インストールした後は、ページ上の任意の要素で右クリックして、"Inspect" をクリックして開発者向けツールを開いてください。React タブが右端のタブとして表示されます。 +======= +After installing React DevTools, you can right-click on any element on the page, click "Inspect" to open the developer tools, and the React tabs ("⚛️ Components" and "⚛️ Profiler") will appear as the last tabs to the right. Use "⚛️ Components" to inspect the component tree. +>>>>>>> 8b30ae43439818009213da86eca872a3d869c5eb **ただし、開発者向けツールを CodePen で動作させるには追加のステップが必要です：** diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js index 99159c11a..245794a0a 100644 --- a/src/components/LayoutFooter/Footer.js +++ b/src/components/LayoutFooter/Footer.js @@ -10,10 +10,14 @@ import ExternalFooterLink from './ExternalFooterLink'; import FooterLink from './FooterLink'; import FooterNav from './FooterNav'; import MetaTitle from 'templates/components/MetaTitle'; +import SectionLinks from './SectionLinks'; import React from 'react'; import {colors, media} from 'theme'; import {sectionListCommunity, sectionListDocs} from 'utils/sectionList'; +// $FlowFixMe +import navFooter from '../../../content/footerNav.yml'; + import ossLogoPng from 'images/oss_logo.png'; const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => ( @@ -60,7 +64,11 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => ( }, }}> +<<<<<<< HEAD ドキュメント +======= + {navFooter.docs.title} +>>>>>>> 8b30ae43439818009213da86eca872a3d869c5eb {sectionListDocs.map(section => { const defaultItem = section.items[0]; return ( @@ -73,6 +81,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => ( })} +<<<<<<< HEAD チャンネル ( コミュニティ +======= + {navFooter.channels.title} + + + + {navFooter.community.title} + + Code of Conduct + +>>>>>>> 8b30ae43439818009213da86eca872a3d869c5eb {sectionListCommunity.map(section => ( ( ))} +<<<<<<< HEAD その他 チュートリアル Blog @@ -138,6 +159,10 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => ( rel="noopener"> React Native +======= + {navFooter.more.title} + +>>>>>>> 8b30ae43439818009213da86eca872a3d869c5eb
+ links.map(item => { + if (item.external) { + return ( + + {item.title} + + ); + } + + return ( + + {item.title} + + ); + }); + +export default SectionLinks; diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js index e0a285e84..f12eb5a71 100644 --- a/src/components/LayoutHeader/Header.js +++ b/src/components/LayoutHeader/Header.js @@ -14,6 +14,9 @@ import {version} from 'site-constants'; import ExternalLinkSvg from 'templates/components/ExternalLinkSvg'; import DocSearch from './DocSearch'; +// $FlowFixMe +import navHeader from '../../../content/headerNav.yml'; + import logoSvg from 'icons/logo.svg'; const Header = ({location}: {location: Location}) => ( @@ -120,26 +123,14 @@ const Header = ({location}: {location: Location}) => ( 'linear-gradient(to right, transparent, black 20px, black 90%, transparent)', }, }}> - - - - + {navHeader.items.map(link => ( + + ))}