From 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 20 Mar 2019 13:03:43 -0700 Subject: [PATCH 01/19] Update languages for Simplified Chinese completion (#1854) * Update languages for Simplified Chinese completion * Update languages.yml --- content/languages.yml | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/content/languages.yml b/content/languages.yml index 5e0958260..524c41c73 100644 --- a/content/languages.yml +++ b/content/languages.yml @@ -66,11 +66,15 @@ - name: Italian translated_name: Italiano code: it - status: 0 + status: 1 - name: Japanese translated_name: 日本語 code: ja status: 2 +- name: Georgian + translated_name: ქართული + code: ka + status: 0 - name: Central Khmer translated_name: ភាសាខ្មែរ code: km @@ -126,6 +130,7 @@ - name: Swedish translated_name: Svenska code: sv + status: 0 - name: Tamil translated_name: தமிழ் code: ta @@ -134,6 +139,10 @@ translated_name: తెలుగు code: te status: 0 +- name: Thai + translated_name: ไทย + code: th + status: 0 - name: Turkish translated_name: Türkçe code: tr @@ -157,7 +166,7 @@ - name: Simplified Chinese translated_name: 简体中文 code: zh-hans - status: 1 + status: 2 - name: Traditional Chinese translated_name: 繁體中文 code: zh-hant From f22b82d4bc3326c6645dd68d0a2c1816f571b650 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Sat, 23 Mar 2019 06:01:45 +0000 Subject: [PATCH 02/19] Translation for the page 'Navigation -> docs/nav.yml' (#137) * docs/nav: translated Translated titles and references when needed Added some terms to the glossary Signed-off-by: Alessandro De Blasis * As suggested * As suggested --- GLOSSARY.md | 6 ++ ...react-components-elements-and-instances.md | 2 +- .../2017-09-08-dom-attributes-in-react-16.md | 2 +- content/docs/accessibility.md | 2 +- content/docs/add-react-to-a-website.md | 2 +- content/docs/addons-animation.md | 2 +- content/docs/cdn-links.md | 2 +- content/docs/codebase-overview.md | 6 +- content/docs/create-a-new-react-app.md | 2 +- content/docs/design-principles.md | 2 +- content/docs/faq-ajax.md | 2 +- content/docs/faq-functions.md | 2 +- content/docs/faq-internals.md | 4 +- content/docs/faq-state.md | 2 +- content/docs/faq-structure.md | 2 +- content/docs/faq-styling.md | 2 +- content/docs/faq-versioning.md | 2 +- content/docs/forwarding-refs.md | 2 +- content/docs/fragments.md | 2 +- content/docs/getting-started.md | 2 +- content/docs/higher-order-components.md | 4 +- content/docs/hooks-custom.md | 2 +- content/docs/hooks-effect.md | 2 +- content/docs/hooks-faq.md | 78 ++++++++-------- content/docs/hooks-intro.md | 2 +- content/docs/hooks-overview.md | 2 +- content/docs/hooks-reference.md | 2 +- content/docs/hooks-rules.md | 2 +- content/docs/hooks-state.md | 2 +- content/docs/how-to-contribute.md | 2 +- content/docs/implementation-notes.md | 2 +- .../docs/integrating-with-other-libraries.md | 2 +- content/docs/jsx-in-depth.md | 2 +- content/docs/nav.yml | 88 +++++++++---------- content/docs/optimizing-performance.md | 2 +- content/docs/portals.md | 2 +- content/docs/react-without-jsx.md | 2 +- content/docs/reconciliation.md | 2 +- content/docs/reference-glossary.md | 2 +- content/docs/refs-and-the-dom.md | 2 +- content/docs/static-type-checking.md | 2 +- content/docs/typechecking-with-proptypes.md | 2 +- content/docs/uncontrolled-components.md | 2 +- 43 files changed, 133 insertions(+), 127 deletions(-) diff --git a/GLOSSARY.md b/GLOSSARY.md index 4a98d6f62..9f2a41104 100644 --- a/GLOSSARY.md +++ b/GLOSSARY.md @@ -5,6 +5,8 @@ Glossary of the translations of technical and React-specific terms. ## Untranslatable terms - props (**core concept**) - state (**core concept**) +- hooks (**core concept**) +- ref (**core concept**) - footer - bug - browser @@ -21,6 +23,10 @@ Glossary of the translations of technical and React-specific terms. - console - warning - form/forms +- render props +- strict mode +- web components +- build steps # Common Translations diff --git a/content/blog/2015-12-18-react-components-elements-and-instances.md b/content/blog/2015-12-18-react-components-elements-and-instances.md index dd71836d0..9cb4ea25b 100644 --- a/content/blog/2015-12-18-react-components-elements-and-instances.md +++ b/content/blog/2015-12-18-react-components-elements-and-instances.md @@ -350,7 +350,7 @@ React will ask the `Form` component what element tree it returns, given those `p } ``` -This is a part of the process that React calls [reconciliation](/docs/reconciliation.html) which starts when you call [`ReactDOM.render()`](/docs/top-level-api.html#reactdom.render) or [`setState()`](/docs/component-api.html#setstate). By the end of the reconciliation, React knows the result DOM tree, and a renderer like `react-dom` or `react-native` applies the minimal set of changes necessary to update the DOM nodes (or the platform-specific views in case of React Native). +This is a part of the process that React calls [riconciliazione](/docs/reconciliation.html) which starts when you call [`ReactDOM.render()`](/docs/top-level-api.html#reactdom.render) or [`setState()`](/docs/component-api.html#setstate). By the end of the reconciliation, React knows the result DOM tree, and a renderer like `react-dom` or `react-native` applies the minimal set of changes necessary to update the DOM nodes (or the platform-specific views in case of React Native). This gradual refining process is also the reason React apps are easy to optimize. If some parts of your component tree become too large for React to visit efficiently, you can tell it to [skip this “refining” and diffing certain parts of the tree if the relevant props have not changed](/docs/advanced-performance.html). It is very fast to calculate whether the props have changed if they are immutable, so React and immutability work great together, and can provide great optimizations with the minimal effort. diff --git a/content/blog/2017-09-08-dom-attributes-in-react-16.md b/content/blog/2017-09-08-dom-attributes-in-react-16.md index 31c66e53e..54c091fec 100644 --- a/content/blog/2017-09-08-dom-attributes-in-react-16.md +++ b/content/blog/2017-09-08-dom-attributes-in-react-16.md @@ -80,7 +80,7 @@ Just like before, React lets you pass `data-` and `aria-` attributes freely: This has not changed. -[Accessibility](/docs/accessibility.html) is very important, so even though React 16 passes any attributes through, it still validates that `aria-` props have correct names in development mode, just like React 15 did. +[Accessibilità](/docs/accessibility.html) is very important, so even though React 16 passes any attributes through, it still validates that `aria-` props have correct names in development mode, just like React 15 did. ## Migration Path {#migration-path} diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md index e6cacba3b..c4056da1a 100644 --- a/content/docs/accessibility.md +++ b/content/docs/accessibility.md @@ -1,6 +1,6 @@ --- id: accessibility -title: Accessibility +title: Accessibilità permalink: docs/accessibility.html --- diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index a97b44d45..746999e2b 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -1,6 +1,6 @@ --- id: add-react-to-a-website -title: Add React to a Website +title: Aggiungere React Ad Un Sito permalink: docs/add-react-to-a-website.html redirect_from: - "docs/add-react-to-an-existing-app.html" diff --git a/content/docs/addons-animation.md b/content/docs/addons-animation.md index a619af76e..913396833 100644 --- a/content/docs/addons-animation.md +++ b/content/docs/addons-animation.md @@ -173,7 +173,7 @@ It is also possible to use custom class names for each of the steps in your tran In order for it to apply transitions to its children, the `ReactCSSTransitionGroup` must already be mounted in the DOM or the prop `transitionAppear` must be set to `true`. -The example below would **not** work, because the `ReactCSSTransitionGroup` is being mounted along with the new item, instead of the new item being mounted within it. Compare this to the [Getting Started](#getting-started) section above to see the difference. +The example below would **not** work, because the `ReactCSSTransitionGroup` is being mounted along with the new item, instead of the new item being mounted within it. Compare this to the [Primi Passi](#getting-started) section above to see the difference. ```javascript{4,6,13} render() { diff --git a/content/docs/cdn-links.md b/content/docs/cdn-links.md index 73e3e8171..506adbb93 100644 --- a/content/docs/cdn-links.md +++ b/content/docs/cdn-links.md @@ -1,6 +1,6 @@ --- id: cdn-links -title: CDN Links +title: Collegamenti a CDN permalink: docs/cdn-links.html prev: create-a-new-react-app.html next: hello-world.html diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md index f80264aa8..aa7a0edb6 100644 --- a/content/docs/codebase-overview.md +++ b/content/docs/codebase-overview.md @@ -1,6 +1,6 @@ --- id: codebase-overview -title: Codebase Overview +title: Panoramica sul Codice layout: contributing permalink: docs/codebase-overview.html prev: how-to-contribute.html @@ -165,7 +165,7 @@ The "core" of React includes all the [top-level `React` APIs](/docs/top-level-ap * `React.Component` * `React.Children` -**React core only includes the APIs necessary to define components.** It does not include the [reconciliation](/docs/reconciliation.html) algorithm or any platform-specific code. It is used both by React DOM and React Native components. +**React core only includes the APIs necessary to define components.** It does not include the [riconciliazione](/docs/reconciliation.html) algorithm or any platform-specific code. It is used both by React DOM and React Native components. The code for React core is located in [`packages/react`](https://github.com/facebook/react/tree/master/packages/react) in the source tree. It is available on npm as the [`react`](https://www.npmjs.com/package/react) package. The corresponding standalone browser build is called `react.js`, and it exports a global called `React`. @@ -189,7 +189,7 @@ The only other officially supported renderer is [`react-art`](https://github.com ### Reconcilers {#reconcilers} -Even vastly different renderers like React DOM and React Native need to share a lot of logic. In particular, the [reconciliation](/docs/reconciliation.html) algorithm should be as similar as possible so that declarative rendering, custom components, state, lifecycle methods, and refs work consistently across platforms. +Even vastly different renderers like React DOM and React Native need to share a lot of logic. In particular, the [riconciliazione](/docs/reconciliation.html) algorithm should be as similar as possible so that declarative rendering, custom components, state, lifecycle methods, and refs work consistently across platforms. To solve this, different renderers share some code between them. We call this part of React a "reconciler". When an update such as `setState()` is scheduled, the reconciler calls `render()` on components in the tree and mounts, updates, or unmounts them. diff --git a/content/docs/create-a-new-react-app.md b/content/docs/create-a-new-react-app.md index e1985e72f..9db6dce8b 100644 --- a/content/docs/create-a-new-react-app.md +++ b/content/docs/create-a-new-react-app.md @@ -1,6 +1,6 @@ --- id: create-a-new-react-app -title: Create a New React App +title: Creare una Nuova App React permalink: docs/create-a-new-react-app.html redirect_from: - "docs/add-react-to-a-new-app.html" diff --git a/content/docs/design-principles.md b/content/docs/design-principles.md index 936ed7548..5f6adaf60 100644 --- a/content/docs/design-principles.md +++ b/content/docs/design-principles.md @@ -1,6 +1,6 @@ --- id: design-principles -title: Design Principles +title: Principi di Design layout: contributing permalink: docs/design-principles.html prev: implementation-notes.html diff --git a/content/docs/faq-ajax.md b/content/docs/faq-ajax.md index 102e1c07e..996ebc810 100644 --- a/content/docs/faq-ajax.md +++ b/content/docs/faq-ajax.md @@ -1,6 +1,6 @@ --- id: faq-ajax -title: AJAX and APIs +title: AJAX ed APIs permalink: docs/faq-ajax.html layout: docs category: FAQ diff --git a/content/docs/faq-functions.md b/content/docs/faq-functions.md index 75143c43f..1323591ae 100644 --- a/content/docs/faq-functions.md +++ b/content/docs/faq-functions.md @@ -1,6 +1,6 @@ --- id: faq-functions -title: Passing Functions to Components +title: Passare Funzioni ai Componenti permalink: docs/faq-functions.html layout: docs category: FAQ diff --git a/content/docs/faq-internals.md b/content/docs/faq-internals.md index da7f96be0..a2133cdc6 100644 --- a/content/docs/faq-internals.md +++ b/content/docs/faq-internals.md @@ -1,6 +1,6 @@ --- id: faq-internals -title: Virtual DOM and Internals +title: Virtual DOM ed Interni permalink: docs/faq-internals.html layout: docs category: FAQ @@ -8,7 +8,7 @@ category: FAQ ### What is the Virtual DOM? {#what-is-the-virtual-dom} -The virtual DOM (VDOM) is a programming concept where an ideal, or "virtual", representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM. This process is called [reconciliation](/docs/reconciliation.html). +The virtual DOM (VDOM) is a programming concept where an ideal, or "virtual", representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM. This process is called [riconciliazione](/docs/reconciliation.html). This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app. diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index c2b7b6657..89bb8a416 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -1,6 +1,6 @@ --- id: faq-state -title: Component State +title: State dei Componenti permalink: docs/faq-state.html layout: docs category: FAQ diff --git a/content/docs/faq-structure.md b/content/docs/faq-structure.md index 4241a04dd..1e3627fa0 100644 --- a/content/docs/faq-structure.md +++ b/content/docs/faq-structure.md @@ -1,6 +1,6 @@ --- id: faq-structure -title: File Structure +title: Struttura dei File permalink: docs/faq-structure.html layout: docs category: FAQ diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index ddc955e3d..317f19a96 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -1,6 +1,6 @@ --- id: faq-styling -title: Styling and CSS +title: Stili e CSS permalink: docs/faq-styling.html layout: docs category: FAQ diff --git a/content/docs/faq-versioning.md b/content/docs/faq-versioning.md index b51ea4895..6de2613fc 100644 --- a/content/docs/faq-versioning.md +++ b/content/docs/faq-versioning.md @@ -1,6 +1,6 @@ --- id: faq-versioning -title: Versioning Policy +title: Regole di Versionamento permalink: docs/faq-versioning.html layout: docs category: FAQ diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 3318d8499..edada2741 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -1,6 +1,6 @@ --- id: forwarding-refs -title: Forwarding Refs +title: Inoltrare Refs permalink: docs/forwarding-refs.html --- diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 04de0463b..c5ef2338e 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -1,6 +1,6 @@ --- id: fragments -title: Fragments +title: Frammenti permalink: docs/fragments.html --- diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md index 92993a8a0..643b54e2f 100644 --- a/content/docs/getting-started.md +++ b/content/docs/getting-started.md @@ -1,6 +1,6 @@ --- id: getting-started -title: Getting Started +title: Primi Passi permalink: docs/getting-started.html next: add-react-to-a-website.html redirect_from: diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index a7a123abe..6b8064b36 100644 --- a/content/docs/higher-order-components.md +++ b/content/docs/higher-order-components.md @@ -1,6 +1,6 @@ --- id: higher-order-components -title: Higher-Order Components +title: Componenti di Ordine Superiore permalink: docs/higher-order-components.html --- @@ -320,7 +320,7 @@ Higher-order components come with a few caveats that aren't immediately obvious ### Don't Use HOCs Inside the render Method {#dont-use-hocs-inside-the-render-method} -React's diffing algorithm (called reconciliation) uses component identity to determine whether it should update the existing subtree or throw it away and mount a new one. If the component returned from `render` is identical (`===`) to the component from the previous render, React recursively updates the subtree by diffing it with the new one. If they're not equal, the previous subtree is unmounted completely. +React's diffing algorithm (called riconciliazione) uses component identity to determine whether it should update the existing subtree or throw it away and mount a new one. If the component returned from `render` is identical (`===`) to the component from the previous render, React recursively updates the subtree by diffing it with the new one. If they're not equal, the previous subtree is unmounted completely. Normally, you shouldn't need to think about this. But it matters for HOCs because it means you can't apply a HOC to a component within the render method of a component: diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index a252ac3f3..0708662bb 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -1,6 +1,6 @@ --- id: hooks-custom -title: Building Your Own Hooks +title: Hooks Personalizzati permalink: docs/hooks-custom.html next: hooks-reference.html prev: hooks-rules.html diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index 73d6a3d2c..9206c8e08 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -1,6 +1,6 @@ --- id: hooks-state -title: Using the Effect Hook +title: Usare l'Hook Effect permalink: docs/hooks-effect.html next: hooks-rules.html prev: hooks-state.html diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md index 7d2953293..c030ead07 100644 --- a/content/docs/hooks-faq.md +++ b/content/docs/hooks-faq.md @@ -1,6 +1,6 @@ --- id: hooks-faq -title: Hooks FAQ +title: FAQ sugli Hooks permalink: docs/hooks-faq.html prev: hooks-reference.html --- @@ -18,44 +18,44 @@ This page answers some of the frequently asked questions about [Hooks](/docs/hoo ).join('\n') --> -* **[Adoption Strategy](#adoption-strategy)** - * [Which versions of React include Hooks?](#which-versions-of-react-include-hooks) - * [Do I need to rewrite all my class components?](#do-i-need-to-rewrite-all-my-class-components) - * [What can I do with Hooks that I couldn't with classes?](#what-can-i-do-with-hooks-that-i-couldnt-with-classes) - * [How much of my React knowledge stays relevant?](#how-much-of-my-react-knowledge-stays-relevant) - * [Should I use Hooks, classes, or a mix of both?](#should-i-use-hooks-classes-or-a-mix-of-both) - * [Do Hooks cover all use cases for classes?](#do-hooks-cover-all-use-cases-for-classes) - * [Do Hooks replace render props and higher-order components?](#do-hooks-replace-render-props-and-higher-order-components) - * [What do Hooks mean for popular APIs like Redux connect() and React Router?](#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router) - * [Do Hooks work with static typing?](#do-hooks-work-with-static-typing) - * [How to test components that use Hooks?](#how-to-test-components-that-use-hooks) - * [What exactly do the lint rules enforce?](#what-exactly-do-the-lint-rules-enforce) -* **[From Classes to Hooks](#from-classes-to-hooks)** - * [How do lifecycle methods correspond to Hooks?](#how-do-lifecycle-methods-correspond-to-hooks) - * [How can I do data fetching with Hooks?](#how-can-i-do-data-fetching-with-hooks) - * [Is there something like instance variables?](#is-there-something-like-instance-variables) - * [Should I use one or many state variables?](#should-i-use-one-or-many-state-variables) - * [Can I run an effect only on updates?](#can-i-run-an-effect-only-on-updates) - * [How to get the previous props or state?](#how-to-get-the-previous-props-or-state) - * [Why am I seeing stale props or state inside my function?](#why-am-i-seeing-stale-props-or-state-inside-my-function) - * [How do I implement getDerivedStateFromProps?](#how-do-i-implement-getderivedstatefromprops) - * [Is there something like forceUpdate?](#is-there-something-like-forceupdate) - * [Can I make a ref to a function component?](#can-i-make-a-ref-to-a-function-component) - * [How can I measure a DOM node?](#how-can-i-measure-a-dom-node) - * [What does const [thing, setThing] = useState() mean?](#what-does-const-thing-setthing--usestate-mean) -* **[Performance Optimizations](#performance-optimizations)** - * [Can I skip an effect on updates?](#can-i-skip-an-effect-on-updates) - * [Is it safe to omit functions from the list of dependencies?](#is-it-safe-to-omit-functions-from-the-list-of-dependencies) - * [What can I do if my effect dependencies change too often?](#what-can-i-do-if-my-effect-dependencies-change-too-often) - * [How do I implement shouldComponentUpdate?](#how-do-i-implement-shouldcomponentupdate) - * [How to memoize calculations?](#how-to-memoize-calculations) - * [How to create expensive objects lazily?](#how-to-create-expensive-objects-lazily) - * [Are Hooks slow because of creating functions in render?](#are-hooks-slow-because-of-creating-functions-in-render) - * [How to avoid passing callbacks down?](#how-to-avoid-passing-callbacks-down) - * [How to read an often-changing value from useCallback?](#how-to-read-an-often-changing-value-from-usecallback) -* **[Under the Hood](#under-the-hood)** - * [How does React associate Hook calls with components?](#how-does-react-associate-hook-calls-with-components) - * [What is the prior art for Hooks?](#what-is-the-prior-art-for-hooks) +- [Adoption Strategy {#adoption-strategy}](#adoption-strategy-adoption-strategy) + - [Which versions of React include Hooks? {#which-versions-of-react-include-hooks}](#which-versions-of-react-include-hooks-which-versions-of-react-include-hooks) + - [Do I need to rewrite all my class components? {#do-i-need-to-rewrite-all-my-class-components}](#do-i-need-to-rewrite-all-my-class-components-do-i-need-to-rewrite-all-my-class-components) + - [What can I do with Hooks that I couldn't with classes? {#what-can-i-do-with-hooks-that-i-couldnt-with-classes}](#what-can-i-do-with-hooks-that-i-couldnt-with-classes-what-can-i-do-with-hooks-that-i-couldnt-with-classes) + - [How much of my React knowledge stays relevant? {#how-much-of-my-react-knowledge-stays-relevant}](#how-much-of-my-react-knowledge-stays-relevant-how-much-of-my-react-knowledge-stays-relevant) + - [Should I use Hooks, classes, or a mix of both? {#should-i-use-hooks-classes-or-a-mix-of-both}](#should-i-use-hooks-classes-or-a-mix-of-both-should-i-use-hooks-classes-or-a-mix-of-both) + - [Do Hooks cover all use cases for classes? {#do-hooks-cover-all-use-cases-for-classes}](#do-hooks-cover-all-use-cases-for-classes-do-hooks-cover-all-use-cases-for-classes) + - [Do Hooks replace render props and higher-order components? {#do-hooks-replace-render-props-and-higher-order-components}](#do-hooks-replace-render-props-and-higher-order-components-do-hooks-replace-render-props-and-higher-order-components) + - [What do Hooks mean for popular APIs like Redux `connect()` and React Router? {#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router}](#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router-what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router) + - [Do Hooks work with static typing? {#do-hooks-work-with-static-typing}](#do-hooks-work-with-static-typing-do-hooks-work-with-static-typing) + - [How to test components that use Hooks? {#how-to-test-components-that-use-hooks}](#how-to-test-components-that-use-hooks-how-to-test-components-that-use-hooks) + - [What exactly do the lint rules enforce? {#what-exactly-do-the-lint-rules-enforce}](#what-exactly-do-the-lint-rules-enforce-what-exactly-do-the-lint-rules-enforce) +- [From Classes to Hooks {#from-classes-to-hooks}](#from-classes-to-hooks-from-classes-to-hooks) + - [How do lifecycle methods correspond to Hooks? {#how-do-lifecycle-methods-correspond-to-hooks}](#how-do-lifecycle-methods-correspond-to-hooks-how-do-lifecycle-methods-correspond-to-hooks) + - [How can I do data fetching with Hooks?](#how-can-i-do-data-fetching-with-hooks) + - [Is there something like instance variables? {#is-there-something-like-instance-variables}](#is-there-something-like-instance-variables-is-there-something-like-instance-variables) + - [Should I use one or many state variables? {#should-i-use-one-or-many-state-variables}](#should-i-use-one-or-many-state-variables-should-i-use-one-or-many-state-variables) + - [Can I run an effect only on updates? {#can-i-run-an-effect-only-on-updates}](#can-i-run-an-effect-only-on-updates-can-i-run-an-effect-only-on-updates) + - [How to get the previous props or state? {#how-to-get-the-previous-props-or-state}](#how-to-get-the-previous-props-or-state-how-to-get-the-previous-props-or-state) + - [Why am I seeing stale props or state inside my function? {#why-am-i-seeing-stale-props-or-state-inside-my-function}](#why-am-i-seeing-stale-props-or-state-inside-my-function-why-am-i-seeing-stale-props-or-state-inside-my-function) + - [How do I implement `getDerivedStateFromProps`? {#how-do-i-implement-getderivedstatefromprops}](#how-do-i-implement-getderivedstatefromprops-how-do-i-implement-getderivedstatefromprops) + - [Is there something like forceUpdate? {#is-there-something-like-forceupdate}](#is-there-something-like-forceupdate-is-there-something-like-forceupdate) + - [Can I make a ref to a function component? {#can-i-make-a-ref-to-a-function-component}](#can-i-make-a-ref-to-a-function-component-can-i-make-a-ref-to-a-function-component) + - [How can I measure a DOM node? {#how-can-i-measure-a-dom-node}](#how-can-i-measure-a-dom-node-how-can-i-measure-a-dom-node) + - [What does `const [thing, setThing] = useState()` mean? {#what-does-const-thing-setthing--usestate-mean}](#what-does-const-thing-setthing--usestate-mean-what-does-const-thing-setthing--usestate-mean) +- [Performance Optimizations {#performance-optimizations}](#performance-optimizations-performance-optimizations) + - [Can I skip an effect on updates? {#can-i-skip-an-effect-on-updates}](#can-i-skip-an-effect-on-updates-can-i-skip-an-effect-on-updates) + - [Is it safe to omit functions from the list of dependencies? {#is-it-safe-to-omit-functions-from-the-list-of-dependencies}](#is-it-safe-to-omit-functions-from-the-list-of-dependencies-is-it-safe-to-omit-functions-from-the-list-of-dependencies) + - [What can I do if my effect dependencies change too often?](#what-can-i-do-if-my-effect-dependencies-change-too-often) + - [How do I implement `shouldComponentUpdate`? {#how-do-i-implement-shouldcomponentupdate}](#how-do-i-implement-shouldcomponentupdate-how-do-i-implement-shouldcomponentupdate) + - [How to memoize calculations? {#how-to-memoize-calculations}](#how-to-memoize-calculations-how-to-memoize-calculations) + - [How to create expensive objects lazily? {#how-to-create-expensive-objects-lazily}](#how-to-create-expensive-objects-lazily-how-to-create-expensive-objects-lazily) + - [Are Hooks slow because of creating functions in render? {#are-hooks-slow-because-of-creating-functions-in-render}](#are-hooks-slow-because-of-creating-functions-in-render-are-hooks-slow-because-of-creating-functions-in-render) + - [How to avoid passing callbacks down? {#how-to-avoid-passing-callbacks-down}](#how-to-avoid-passing-callbacks-down-how-to-avoid-passing-callbacks-down) + - [How to read an often-changing value from `useCallback`? {#how-to-read-an-often-changing-value-from-usecallback}](#how-to-read-an-often-changing-value-from-usecallback-how-to-read-an-often-changing-value-from-usecallback) +- [Under the Hood {#under-the-hood}](#under-the-hood-under-the-hood) + - [How does React associate Hook calls with components? {#how-does-react-associate-hook-calls-with-components}](#how-does-react-associate-hook-calls-with-components-how-does-react-associate-hook-calls-with-components) + - [What is the prior art for Hooks? {#what-is-the-prior-art-for-hooks}](#what-is-the-prior-art-for-hooks-what-is-the-prior-art-for-hooks) ## Adoption Strategy {#adoption-strategy} diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 9470d614d..d6697aafa 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -1,6 +1,6 @@ --- id: hooks-intro -title: Introducing Hooks +title: Introduzione agli Hooks permalink: docs/hooks-intro.html next: hooks-overview.html --- diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index df958dc6d..8224c3a67 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -1,6 +1,6 @@ --- id: hooks-overview -title: Hooks at a Glance +title: Panoramica sugli Hooks permalink: docs/hooks-overview.html next: hooks-state.html prev: hooks-intro.html diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 98c2e14c0..fe4cd3975 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -1,6 +1,6 @@ --- id: hooks-reference -title: Hooks API Reference +title: API di Riferimento degli Hooks permalink: docs/hooks-reference.html prev: hooks-custom.html next: hooks-faq.html diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index dbac9cffd..cdfee8bc7 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -1,6 +1,6 @@ --- id: hooks-rules -title: Rules of Hooks +title: Regole degli Hooks permalink: docs/hooks-rules.html next: hooks-custom.html prev: hooks-effect.html diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index 052aecb33..8fe037efa 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -1,6 +1,6 @@ --- id: hooks-state -title: Using the State Hook +title: Usare l'Hook State permalink: docs/hooks-state.html next: hooks-effect.html prev: hooks-overview.html diff --git a/content/docs/how-to-contribute.md b/content/docs/how-to-contribute.md index 46d5d626a..1aab09f39 100644 --- a/content/docs/how-to-contribute.md +++ b/content/docs/how-to-contribute.md @@ -1,6 +1,6 @@ --- id: how-to-contribute -title: How to Contribute +title: Come Contribuire layout: contributing permalink: docs/how-to-contribute.html next: codebase-overview.html diff --git a/content/docs/implementation-notes.md b/content/docs/implementation-notes.md index a035a5edf..2f766b123 100644 --- a/content/docs/implementation-notes.md +++ b/content/docs/implementation-notes.md @@ -1,6 +1,6 @@ --- id: implementation-notes -title: Implementation Notes +title: Note sull'Implementazione layout: contributing permalink: docs/implementation-notes.html prev: codebase-overview.html diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 5bc8b2570..fb2128a78 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -1,6 +1,6 @@ --- id: integrating-with-other-libraries -title: Integrating with Other Libraries +title: Integrazione Con Altre Librerie permalink: docs/integrating-with-other-libraries.html --- diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md index d63921df8..be64180fb 100644 --- a/content/docs/jsx-in-depth.md +++ b/content/docs/jsx-in-depth.md @@ -1,6 +1,6 @@ --- id: jsx-in-depth -title: JSX In Depth +title: JSX In Dettaglio permalink: docs/jsx-in-depth.html redirect_from: - "docs/jsx-spread.html" diff --git a/content/docs/nav.yml b/content/docs/nav.yml index eb45bc5b5..8b2500f07 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -1,13 +1,13 @@ -- title: Installation +- title: Installazione items: - id: getting-started - title: Getting Started + title: Primi Passi - id: add-react-to-a-website - title: Add React to a Website + title: Aggiungere React Ad Un Sito - id: create-a-new-react-app - title: Create a New React App + title: Creare una Nuova App React - id: cdn-links - title: CDN Links + title: Collegamenti a CDN - title: Concetti Chiave isOrdered: true items: @@ -35,10 +35,10 @@ title: Composizione vs Ereditarità - id: thinking-in-react title: Pensare in React -- title: Advanced Guides +- title: Guide Avanzate items: - id: accessibility - title: Accessibility + title: Accessibilità - id: code-splitting title: Code-Splitting - id: context @@ -46,37 +46,37 @@ - id: error-boundaries title: Contenitori di Errori - id: forwarding-refs - title: Forwarding Refs + title: Inoltrare Refs - id: fragments - title: Fragments + title: Frammenti - id: higher-order-components - title: Higher-Order Components + title: Componenti di Ordine Superiore - id: integrating-with-other-libraries - title: Integrating with Other Libraries + title: Integrazione Con Altre Librerie - id: jsx-in-depth - title: JSX In Depth + title: JSX In Dettaglio - id: optimizing-performance - title: Optimizing Performance + title: Ottimizzare le Prestazioni - id: portals - title: Portals + title: Portali - id: react-without-es6 - title: React Without ES6 + title: React senza ES6 - id: react-without-jsx - title: React Without JSX + title: React senza JSX - id: reconciliation - title: Reconciliation + title: Riconciliazione - id: refs-and-the-dom - title: Refs and the DOM + title: Refs ed il DOM - id: render-props title: Render Props - id: static-type-checking - title: Static Type Checking + title: Controllo Tipi Statico - id: strict-mode title: Strict Mode - id: typechecking-with-proptypes - title: Typechecking With PropTypes + title: Controllo Tipi con PropTypes - id: uncontrolled-components - title: Uncontrolled Components + title: Componenti Non Controllati - id: web-components title: Web Components - title: API di Riferimento @@ -103,51 +103,51 @@ - id: javascript-environment-requirements title: Requisiti Ambiente JS - id: glossary - title: Glossary -- title: Hooks (New) + title: Glossario +- title: Hooks (Novità) isOrdered: true items: - id: hooks-intro - title: Introducing Hooks + title: Introduzione agli Hooks - id: hooks-overview - title: Hooks at a Glance + title: Panoramica sugli Hooks - id: hooks-state - title: Using the State Hook + title: Usare l'Hook State - id: hooks-effect - title: Using the Effect Hook + title: Usare l'Hook Effect - id: hooks-rules - title: Rules of Hooks + title: Regole degli Hooks - id: hooks-custom - title: Building Your Own Hooks + title: Hooks Personalizzati - id: hooks-reference - title: Hooks API Reference + title: API di Riferimento degli Hooks - id: hooks-faq - title: Hooks FAQ -- title: Contributing + title: FAQ sugli Hooks +- title: Contribuire items: - id: how-to-contribute - title: How to Contribute + title: Come Contribuire - id: codebase-overview - title: Codebase Overview + title: Panoramica sul Codice - id: implementation-notes - title: Implementation Notes + title: Note sull'Implementazione - id: design-principles - title: Design Principles + title: Principi di Design - title: FAQ items: - id: faq-ajax - title: AJAX and APIs + title: AJAX ed APIs - id: faq-build - title: Babel, JSX, and Build Steps + title: Babel, JSX, e Build Steps - id: faq-functions - title: Passing Functions to Components + title: Passare Funzioni ai Componenti - id: faq-state - title: Component State + title: State dei Componenti - id: faq-styling - title: Styling and CSS + title: Stili e CSS - id: faq-structure - title: File Structure + title: Struttura dei File - id: faq-versioning - title: Versioning Policy + title: Regole di Versionamento - id: faq-internals - title: Virtual DOM and Internals + title: Virtual DOM ed Interni diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index e42bad7b7..a4735b820 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -1,6 +1,6 @@ --- id: optimizing-performance -title: Optimizing Performance +title: Ottimizzare le Prestazioni permalink: docs/optimizing-performance.html redirect_from: - "docs/advanced-performance.html" diff --git a/content/docs/portals.md b/content/docs/portals.md index 650121396..140c4b8f4 100644 --- a/content/docs/portals.md +++ b/content/docs/portals.md @@ -1,6 +1,6 @@ --- id: portals -title: Portals +title: Portali permalink: docs/portals.html --- diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index 85cdba45f..c9b6bb709 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -1,6 +1,6 @@ --- id: react-without-jsx -title: React Without JSX +title: React senza JSX permalink: docs/react-without-jsx.html --- diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index 1624bfbde..2b0c691c5 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -1,6 +1,6 @@ --- id: reconciliation -title: Reconciliation +title: Riconciliazione permalink: docs/reconciliation.html --- diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index e91fa9eef..708bf24ad 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -161,6 +161,6 @@ Handling events with React elements has some syntactic differences: * React event handlers are named using camelCase, rather than lowercase. * With JSX you pass a function as the event handler, rather than a string. -## [Reconciliation](/docs/reconciliation.html) {#reconciliation} +## [Riconciliazione](/docs/reconciliation.html) {#reconciliation} When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called "reconciliation". diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 9b56fcc9f..e875ddd02 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -1,6 +1,6 @@ --- id: refs-and-the-dom -title: Refs and the DOM +title: Refs ed il DOM redirect_from: - "docs/working-with-the-browser.html" - "docs/more-about-refs.html" diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 074e7f139..cb1a42f17 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -1,6 +1,6 @@ --- id: static-type-checking -title: Static Type Checking +title: Controllo Tipi Statico permalink: docs/static-type-checking.html prev: typechecking-with-proptypes.html next: refs-and-the-dom.html diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 4004e7820..5857654f6 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -1,6 +1,6 @@ --- id: typechecking-with-proptypes -title: Typechecking With PropTypes +title: Controllo Tipi con PropTypes permalink: docs/typechecking-with-proptypes.html redirect_from: - "docs/react-api.html#typechecking-with-proptypes" diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md index 10b6eab28..f53ac3074 100644 --- a/content/docs/uncontrolled-components.md +++ b/content/docs/uncontrolled-components.md @@ -1,6 +1,6 @@ --- id: uncontrolled-components -title: Uncontrolled Components +title: Componenti Non Controllati permalink: docs/uncontrolled-components.html --- From e744030ad0c65bcd062b27ca1f442b1dd1c8f1dc Mon Sep 17 00:00:00 2001 From: Saransh Kataria Date: Mon, 25 Mar 2019 12:41:48 -0700 Subject: [PATCH 03/19] removed line as functions can have state now too (#1783) * removed line as functions can have state now too * removed this.setState line from docs --- content/docs/reference-glossary.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index e91fa9eef..bdf3587a5 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -122,7 +122,7 @@ class Welcome extends React.Component { A component needs `state` when some data associated with it changes over time. For example, a `Checkbox` component might need `isChecked` in its state, and a `NewsFeed` component might want to keep track of `fetchedPosts` in its state. -The most important difference between `state` and `props` is that `props` are passed from a parent component, but `state` is managed by the component itself. A component cannot change its `props`, but it can change its `state`. To do so, it must call `this.setState()`. Only components defined as classes can have state. +The most important difference between `state` and `props` is that `props` are passed from a parent component, but `state` is managed by the component itself. A component cannot change its `props`, but it can change its `state`. For each particular piece of changing data, there should be just one component that "owns" it in its state. Don't try to synchronize states of two different components. Instead, [lift it up](/docs/lifting-state-up.html) to their closest shared ancestor, and pass it down as props to both of them. From ee4188ba072e349ea04a4884ffc08e65ae0c2b57 Mon Sep 17 00:00:00 2001 From: Jenn Creighton Date: Mon, 25 Mar 2019 17:07:34 -0400 Subject: [PATCH 04/19] remove ReactWeek from Conference list (#1864) --- content/community/conferences.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/content/community/conferences.md b/content/community/conferences.md index ea8613c78..833e44c40 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -52,11 +52,6 @@ June 21, 2019 Chicago, Illinois USA [Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop) -### React Week '19 {#RWNY19} -July 15-21, 2019. New York City, USA - -[Website](https://reactweek.nyc) - [Twitter](https://twitter.com/ReactWeek) - ### React Rally 2019 August 22-23, 2019. Salt Lake City, USA. From 448b7f1a2093011279227ca2e5189e4b9228c306 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 25 Mar 2019 22:49:13 -0700 Subject: [PATCH 05/19] Remove ReactNYC meetup from the list --- content/community/meetups.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/community/meetups.md b/content/community/meetups.md index d397a4535..b3f099c81 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -130,7 +130,6 @@ 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 - ReactNYC](https://www.meetup.com/ReactNYC/) * [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/) * [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/) * [Pittsburgh, PA - ReactJS/React Native](https://www.meetup.com/ReactPgh/) From a1a7ec3a04617ba00de6169a35a7cb4f84811935 Mon Sep 17 00:00:00 2001 From: pixelyunicorn Date: Mon, 25 Mar 2019 22:56:24 -0700 Subject: [PATCH 06/19] Added RQ React meetup in Philadelphia (#1866) --- content/community/meetups.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/community/meetups.md b/content/community/meetups.md index b3f099c81..4c18b1311 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -131,6 +131,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/) * [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/) * [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/) * [Pittsburgh, PA - ReactJS/React Native](https://www.meetup.com/ReactPgh/) * [Portland, OR - ReactJS](https://www.meetup.com/Portland-ReactJS/) From 6faeeb809f4f27a34575f881038042f4dd97ef54 Mon Sep 17 00:00:00 2001 From: pavan Date: Tue, 26 Mar 2019 11:28:15 +0530 Subject: [PATCH 07/19] Adding immer in the list of immutable libraries (#1839) * Adding immer in the list of immutable libraries * Update optimizing-performance.md --- content/docs/optimizing-performance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index e42bad7b7..959332976 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -430,6 +430,6 @@ x === z; // true In this case, since a new reference is returned when mutating `x`, we can use a reference equality check `(x === y)` to verify that the new value stored in `y` is different than the original value stored in `x`. -Two other libraries that can help use immutable data are [seamless-immutable](https://github.com/rtfeldman/seamless-immutable) and [immutability-helper](https://github.com/kolodny/immutability-helper). +Other libraries that can help use immutable data include [Immer](https://github.com/mweststrate/immer), [immutability-helper](https://github.com/kolodny/immutability-helper), and [seamless-immutable](https://github.com/rtfeldman/seamless-immutable). Immutable data structures provide you with a cheap way to track changes on objects, which is all we need to implement `shouldComponentUpdate`. This can often provide you with a nice performance boost. From ee61fecb52fa325008625f7bce6b82449a916355 Mon Sep 17 00:00:00 2001 From: Paolo Guerra Date: Tue, 26 Mar 2019 07:37:25 +0100 Subject: [PATCH 08/19] Add translation for API Reference > Test Utilities (#133) * add translation for test utilities * fix translation * fix knit/typos --- content/docs/addons-test-utils.md | 98 +++++++++++++++---------------- content/docs/hooks-faq.md | 4 +- 2 files changed, 51 insertions(+), 51 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 6cf2af081..0fc80cdfd 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -6,22 +6,22 @@ layout: docs category: Reference --- -**Importing** +**Importazione** ```javascript import ReactTestUtils from 'react-dom/test-utils'; // ES6 -var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm +var ReactTestUtils = require('react-dom/test-utils'); // ES5 con npm ``` -## Overview {#overview} +## Panoramica {#overview} -`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](https://jestjs.io/docs/tutorial-react). +`ReactTestUtils` rende semplice testare i componenti React all'interno del framework di test che preferisci. In Facebook usiamo [Jest](https://facebook.github.io/jest/) per scrivere test in JavaScript. Impara come utilizzare Jest tramite il sito ufficiale [React Tutorial](https://jestjs.io/docs/tutorial-react). -> Note: +> Nota: > -> We recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to enable and encourage writing tests that use your components as the end users do. +> Suggeriamo l'utilizzo di [`react-testing-library`](https://git.io/react-testing-library), concepito per abilitare e favorire la scrittura di test che simulano il reale utilizzo dei componenti. > -> Alternatively, Airbnb has released a testing utility called [Enzyme](https://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output. +> In alternativa, Airbnb ha rilasciato una libreria per i test chiamata [Enzyme](https://airbnb.io/enzyme/), che semplifica le operazioni di verifica, manipolazione ed analisi dell'output dei tuoi componenti. - [`act()`](#act) - [`mockComponent()`](#mockcomponent) @@ -40,17 +40,17 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm - [`renderIntoDocument()`](#renderintodocument) - [`Simulate`](#simulate) -## Reference {#reference} +## Riferimento {#reference} ### `act()` {#act} -To prepare a component for assertions, wrap the code rendering it and performing updates inside an `act()` call. This makes your test run closer to how React works in the browser. +Per preparare un componente per le verifiche, racchiudi il codice che lo renderizza e lo aggiorna all'interno di una chiamata `act()`. Questo permette di simulare un comportamento che si avvicina a quello reale di React. ->Note +>Nota > ->If you use `react-test-renderer`, it also provides an `act` export that behaves the same way. +>Se utilizzi `react-test-renderer`, hai a disposizione un modulo `act` che funziona allo stesso modo. -For example, let's say we have this `Counter` component: +Ad esempio, prendiamo in considerazione il seguente componente `Counter`: ```js class Counter extends React.Component { @@ -60,10 +60,10 @@ class Counter extends React.Component { this.handleClick = this.handleClick.bind(this); } componentDidMount() { - document.title = `You clicked ${this.state.count} times`; + document.title = `Hai cliccato ${this.state.count} volte`; } componentDidUpdate() { - document.title = `You clicked ${this.state.count} times`; + document.title = `Hai cliccato ${this.state.count} volte`; } handleClick() { this.setState(state => ({ @@ -73,9 +73,9 @@ class Counter extends React.Component { render() { return (
-

You clicked {this.state.count} times

+

Hai cliccato {this.state.count} volte

); @@ -83,7 +83,7 @@ class Counter extends React.Component { } ``` -Here is how we can test it: +Possiamo testarlo in questo modo: ```js{3,20-22,29-31} import React from 'react'; @@ -104,25 +104,25 @@ afterEach(() => { }); it('can render and update a counter', () => { - // Test first render and componentDidMount + // Testa il primo render e componentDidMount act(() => { ReactDOM.render(, container); }); const button = container.querySelector('button'); const label = container.querySelector('p'); - expect(label.textContent).toBe('You clicked 0 times'); - expect(document.title).toBe('You clicked 0 times'); + expect(label.textContent).toBe('Hai cliccato 0 volte'); + expect(document.title).toBe('Hai cliccato 0 volte'); - // Test second render and componentDidUpdate + // Testa il secondo render e componentDidUpdate act(() => { button.dispatchEvent(new MouseEvent('click', {bubbles: true})); }); - expect(label.textContent).toBe('You clicked 1 times'); - expect(document.title).toBe('You clicked 1 times'); + expect(label.textContent).toBe('Hai cliccato 1 volte'); + expect(document.title).toBe('Hai cliccato 1 volte'); }); ``` -Don't forget that dispatching DOM events only works when the DOM container is added to the `document`. You can use a helper like [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) to reduce the boilerplate code. +Non dimenticare che generare degli eventi DOM ha effetto solamente quando il contenitore dello stesso è aggiunto al `document`. Puoi usare una libreria come [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) per aumentare la pulizia del codice. * * * @@ -135,11 +135,11 @@ mockComponent( ) ``` -Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple `
` (or other tag if `mockTagName` is provided) containing any provided children. +Passare il mock di un componente a questo metodo consente di migliorarlo, mettendo a disposizione delle funzionalità che permettono di utilizzare quest'ultimo come un componente React base. Il componente diventerà quindi un semplice `
` (o un altro tag se è presente `mockTagNme`), che conterrà degli eventuali componenti figli. -> Note: +> Nota: > -> `mockComponent()` is a legacy API. We recommend using [shallow rendering](/docs/shallow-renderer.html) or [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead. +> `mockComponent()` è un'API legacy. Raccomandiamo l'utilizzo di [shallow rendering](/docs/shallow-renderer.html) oppure [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock). * * * @@ -149,7 +149,7 @@ Pass a mocked component module to this method to augment it with useful methods isElement(element) ``` -Returns `true` if `element` is any React element. +Ritorna `true` se `element` è un qualsiasi componente React. * * * @@ -162,7 +162,7 @@ isElementOfType( ) ``` -Returns `true` if `element` is a React element whose type is of a React `componentClass`. +Ritorna `true` se `element` è un componente React di tipo `componentClass`. * * * @@ -172,7 +172,7 @@ Returns `true` if `element` is a React element whose type is of a React `compone isDOMComponent(instance) ``` -Returns `true` if `instance` is a DOM component (such as a `
` or ``). +Ritorna `true` se `instance` è un componente DOM (come un `
` o uno ``). * * * @@ -182,7 +182,7 @@ Returns `true` if `instance` is a DOM component (such as a `
` or ``). isCompositeComponent(instance) ``` -Returns `true` if `instance` is a user-defined component, such as a class or a function. +Ritorna `true` se `instance` è un componente definito dall'utente, come una classe o una funzione. * * * @@ -195,7 +195,7 @@ isCompositeComponentWithType( ) ``` -Returns `true` if `instance` is a component whose type is of a React `componentClass`. +Ritorna `true` se `instance` è un componente di tipo `componentClass`. * * * @@ -208,7 +208,7 @@ findAllInRenderedTree( ) ``` -Traverse all components in `tree` and accumulate all components where `test(component)` is `true`. This is not that useful on its own, but it's used as a primitive for other test utils. +Scorre tutti i componenti nel `tree` e li accumula dove `test(component)` è `true`. Questo di per sè non è molto utile, ma è utilizzato come base in altre librerie di test. * * * @@ -221,7 +221,7 @@ scryRenderedDOMComponentsWithClass( ) ``` -Finds all DOM elements of components in the rendered tree that are DOM components with the class name matching `className`. +Trova tutti gli elementi DOM dei componenti renderizzati, il cui nome della classe corrisponde a `className`. * * * @@ -234,7 +234,7 @@ findRenderedDOMComponentWithClass( ) ``` -Like [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one. +Come [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) ma si aspetta un solo risultato, ritornandolo oppure generando un'eccezione in caso di più risultati. * * * @@ -247,7 +247,7 @@ scryRenderedDOMComponentsWithTag( ) ``` -Finds all DOM elements of components in the rendered tree that are DOM components with the tag name matching `tagName`. +Trova tutti gli elementi DOM dei componenti renderizzati che corrispondo al nome specifico del tag `tagName`. * * * @@ -260,7 +260,7 @@ findRenderedDOMComponentWithTag( ) ``` -Like [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one. +Come [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) ma si aspetta un solo risultato, ritornandolo oppure generando un'eccezione in caso di più risultati. * * * @@ -273,7 +273,7 @@ scryRenderedComponentsWithType( ) ``` -Finds all instances of components with type equal to `componentClass`. +Trova tutte le istanze dei componenti il cui tipo è `componentClass`. * * * @@ -286,7 +286,7 @@ findRenderedComponentWithType( ) ``` -Same as [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one. +Come [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) ma si aspetta un solo risultato, ritornandolo oppure generando un'eccezione in caso di più risultati. *** @@ -296,20 +296,20 @@ Same as [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) bu renderIntoDocument(element) ``` -Render a React element into a detached DOM node in the document. **This function requires a DOM.** It is effectively equivalent to: +Renderizza un elemento React in un nodo DOM separato, all'interno del documento. **Questa funzione richiede un DOM.** Equivale a: ```js const domContainer = document.createElement('div'); ReactDOM.render(element, domContainer); ``` -> Note: +> Nota: > -> You will need to have `window`, `window.document` and `window.document.createElement` globally available **before** you import `React`. Otherwise React will think it can't access the DOM and methods like `setState` won't work. +> Dovrai avere `window`, `window.document` e `window.document.createElement` disponibili globalmente **prima** di importare `React`. Altrimenti React penserà di non poter accedere al DOM, e metodi come `setState` non funzioneranno. * * * -## Other Utilities {#other-utilities} +## Altre Utilities {#other-utilities} ### `Simulate` {#simulate} @@ -320,11 +320,11 @@ Simulate.{eventName}( ) ``` -Simulate an event dispatch on a DOM node with optional `eventData` event data. +Simula la generazione di un evento su un nodo DOM, con un `eventData` opzionale. -`Simulate` has a method for [every event that React understands](/docs/events.html#supported-events). +`Simulate` ha un metodo per [ogni evento che React supporta](/docs/events.html#supported-events). -**Clicking an element** +**Cliccare un elemento** ```javascript // @@ -332,7 +332,7 @@ const node = this.button; ReactTestUtils.Simulate.click(node); ``` -**Changing the value of an input field and then pressing ENTER.** +**Cambiare il valore di un campo input e quindi premere ENTER** ```javascript // this.textInput = node} /> @@ -342,8 +342,8 @@ ReactTestUtils.Simulate.change(node); ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); ``` -> Note +> Nota > -> You will have to provide any event property that you're using in your component (e.g. keyCode, which, etc...) as React is not creating any of these for you. +> Dovrai fornire qualsiasi proprietà agli eventi che usi nel tuo componente (ad esempio, keyCode, which, etc...), visto che React non ne definisce automaticamente nessuna. * * * diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md index c030ead07..0e1bbcb5b 100644 --- a/content/docs/hooks-faq.md +++ b/content/docs/hooks-faq.md @@ -209,7 +209,7 @@ There are a few more heuristics, and they might change over time as we fine-tune * `componentDidCatch` and `getDerivedStateFromError`: There are no Hook equivalents for these methods yet, but they will be added soon. -### How can I do data fetching with Hooks? +### How can I do data fetching with Hooks? {#how-can-i-do-data-fetching-with-hooks} Here is a [small demo](https://codesandbox.io/s/jvvkoo8pq3) to get you started. To learn more, check out [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) about data fetching with Hooks. @@ -654,7 +654,7 @@ function ProductDetails({ fetchProduct }) Note that in the above example we **need** to keep the function in the dependencies list. This ensures that a change in the `productId` prop of `ProductPage` automatically triggers a refetch in the `ProductDetails` component. -### What can I do if my effect dependencies change too often? +### What can I do if my effect dependencies change too often? {#what-can-i-do-if-my-effect-dependencies-change-too-often} Sometimes, your effect may be using reading state that changes too often. You might be tempted to omit that state from a list of dependencies, but that usually leads to bugs: From 2304fa1a7c34b719c10cca1023003e22bf0fd137 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmad=20Awais=20=E2=9A=A1=EF=B8=8F?= Date: Wed, 27 Mar 2019 00:36:15 +0500 Subject: [PATCH 09/19] =?UTF-8?q?=F0=9F=93=A6=20NEW:=20Add=20React.js=20La?= =?UTF-8?q?hore=20Meetup=20Group=20(#1873)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR adds a relatively new sub-meetup-group of a Cloud Developers meetup group in the city of Lahore. --- content/community/meetups.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/community/meetups.md b/content/community/meetups.md index 4c18b1311..8bd1155d0 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -88,6 +88,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet ## Pakistan {#pakistan} * [Karachi](https://www.facebook.com/groups/902678696597634/) +* [Lahore](https://www.facebook.com/groups/ReactjsLahore/) ## Peru {#peru} * [Lima](https://www.meetup.com/ReactJS-Peru/) From 4541a8ff10f7f95ce1fdde1fbb9ae9280ec30b43 Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 27 Mar 2019 19:15:43 -0700 Subject: [PATCH 10/19] Update languages.yml --- content/languages.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/languages.yml b/content/languages.yml index 524c41c73..1660cecb7 100644 --- a/content/languages.yml +++ b/content/languages.yml @@ -146,7 +146,7 @@ - name: Turkish translated_name: Türkçe code: tr - status: 1 + status: 2 - name: Ukrainian translated_name: Українська code: uk From c6f99a6d9a7d69138a5ea243b3b83cab710f7769 Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 27 Mar 2019 19:16:47 -0700 Subject: [PATCH 11/19] Add kannada to languages --- content/languages.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/content/languages.yml b/content/languages.yml index 1660cecb7..844607526 100644 --- a/content/languages.yml +++ b/content/languages.yml @@ -79,6 +79,10 @@ translated_name: ភាសាខ្មែរ code: km status: 0 +- name: Kannada + translated_name: ಕನ್ನಡ + code: kn + status: 0 - name: Korean translated_name: 한국어 code: ko From 2753191ee2a4fa9a1ecd13fb62aac2a975d9c749 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 28 Mar 2019 00:17:49 -0700 Subject: [PATCH 12/19] Bump React versions --- package.json | 4 ++-- src/site-constants.js | 2 +- yarn.lock | 28 ++++++++++++++-------------- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index f1628e72e..3e255133b 100644 --- a/package.json +++ b/package.json @@ -46,8 +46,8 @@ "normalize.css": "^8.0.0", "prettier": "^1.7.4", "prismjs": "^1.15.0", - "react": "16.8.3", - "react-dom": "16.8.3", + "react": "16.8.6", + "react-dom": "16.8.6", "react-helmet": "^5.2.0", "react-live": "1.8.0-0", "remarkable": "^1.7.1", diff --git a/src/site-constants.js b/src/site-constants.js index f26103279..4618432e0 100644 --- a/src/site-constants.js +++ b/src/site-constants.js @@ -8,7 +8,7 @@ // NOTE: We can't just use `location.toString()` because when we are rendering // the SSR part in node.js we won't have a proper location. const urlRoot = 'https://reactjs.org'; -const version = '16.8.4'; +const version = '16.8.6'; const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js'; export {babelURL, urlRoot, version}; diff --git a/yarn.lock b/yarn.lock index a3859f100..246285339 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10220,15 +10220,15 @@ react-dev-utils@^4.2.1: strip-ansi "3.0.1" text-table "0.2.0" -react-dom@16.8.3: - version "16.8.3" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.3.tgz#ae236029e66210783ac81999d3015dfc475b9c32" - integrity sha512-ttMem9yJL4/lpItZAQ2NTFAbV7frotHk5DZEHXUOws2rMmrsvh1Na7ThGT0dTzUIl6pqTOi5tYREfL8AEna3lA== +react-dom@16.8.6: + version "16.8.6" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f" + integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.13.3" + scheduler "^0.13.6" react-error-overlay@^3.0.0: version "3.0.0" @@ -10282,15 +10282,15 @@ react-side-effect@^1.1.0: exenv "^1.2.1" shallowequal "^1.0.1" -react@16.8.3: - version "16.8.3" - resolved "https://registry.yarnpkg.com/react/-/react-16.8.3.tgz#c6f988a2ce895375de216edcfaedd6b9a76451d9" - integrity sha512-3UoSIsEq8yTJuSu0luO1QQWYbgGEILm+eJl2QN/VLDi7hL+EN18M3q3oVZwmVzzBJ3DkM7RMdRwBmZZ+b4IzSA== +react@16.8.6: + version "16.8.6" + resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe" + integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.13.3" + scheduler "^0.13.6" read-all-stream@^3.0.0: version "3.1.0" @@ -10964,10 +10964,10 @@ sax@>=0.6.0, sax@^1.2.4, sax@~1.2.1, sax@~1.2.4: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== -scheduler@^0.13.3: - version "0.13.3" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.3.tgz#bed3c5850f62ea9c716a4d781f9daeb9b2a58896" - integrity sha512-UxN5QRYWtpR1egNWzJcVLk8jlegxAugswQc984lD3kU7NuobsO37/sRfbpTdBjtnD5TBNFA2Q2oLV5+UmPSmEQ== +scheduler@^0.13.6: + version "0.13.6" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889" + integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" From 3a2cb73ffa1e1650f28612b4d8a5f9836f37d569 Mon Sep 17 00:00:00 2001 From: Alessio Minichiello Date: Thu, 28 Mar 2019 21:08:32 +0000 Subject: [PATCH 13/19] Translation for the page 'Lifting State Up' (#139) * Translation for the page 'Lifting State Up' * Fix for prettier failed on CI * Update content/docs/lifting-state-up.md Co-Authored-By: lssmn * Update content/docs/lifting-state-up.md Co-Authored-By: lssmn * Update content/docs/lifting-state-up.md Co-Authored-By: lssmn * Update content/docs/lifting-state-up.md Co-Authored-By: lssmn * Update content/docs/lifting-state-up.md Co-Authored-By: lssmn --- content/docs/lifting-state-up.md | 240 +++++++++++++++---------------- content/docs/nav.yml | 2 +- examples/lifting-state-up/1.js | 45 ++++++ examples/lifting-state-up/2.js | 51 +++++++ examples/lifting-state-up/3.js | 116 +++++++++++++++ 5 files changed, 333 insertions(+), 121 deletions(-) create mode 100644 examples/lifting-state-up/1.js create mode 100644 examples/lifting-state-up/2.js create mode 100644 examples/lifting-state-up/3.js diff --git a/content/docs/lifting-state-up.md b/content/docs/lifting-state-up.md index 449330cfd..569c7ab9b 100644 --- a/content/docs/lifting-state-up.md +++ b/content/docs/lifting-state-up.md @@ -1,6 +1,6 @@ --- id: lifting-state-up -title: Lifting State Up +title: Spostare lo stato permalink: docs/lifting-state-up.html prev: forms.html next: composition-vs-inheritance.html @@ -9,85 +9,85 @@ redirect_from: - "docs/flux-todo-list.html" --- -Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor. Let's see how this works in action. +Spesso, l'aggiornamento di diversi componenti dipende dagli stessi dati. Raccomandiamo di spostare lo stato condiviso in alto nella gerarchia fino al loro antenato più vicino. Vediamo come questo avviene in pratica. -In this section, we will create a temperature calculator that calculates whether the water would boil at a given temperature. +In questa sezione creeremo un calcolatore della temperatura che calcola se l'acqua bolle ad una data temperatura. -We will start with a component called `BoilingVerdict`. It accepts the `celsius` temperature as a prop, and prints whether it is enough to boil the water: +Iniziamo con un componente chiamato `VerdettoEbollizione`. Questo, accetta la temperatura tramite la prop `celsius` e ritorna che sia sufficiente a far bollire l'acqua o no: ```js{3,5} -function BoilingVerdict(props) { +function VerdettoEbollizione(props) { if (props.celsius >= 100) { - return

The water would boil.

; + return

L'acqua bollirebbe.

; } - return

The water would not boil.

; + return

L'acqua non bollirebbe.

; } ``` -Next, we will create a component called `Calculator`. It renders an `` that lets you enter the temperature, and keeps its value in `this.state.temperature`. +Successivamente, creiamo un componente chiamato `Calcolatore`. Esso renderizza un `` che permette di inserire la temperatura e mantiene il suo valore in `this.state.temperatura`. -Additionally, it renders the `BoilingVerdict` for the current input value. +Inoltre, restituisce `VerdettoEbollizione` per il valore di input corrente. ```js{5,9,13,17-21} -class Calculator extends React.Component { +class Calcolatore extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); - this.state = {temperature: ''}; + this.state = {temperatura: ''}; } handleChange(e) { - this.setState({temperature: e.target.value}); + this.setState({temperatura: e.target.value}); } render() { - const temperature = this.state.temperature; + const temperatura = this.state.temperatura; return (
- Enter temperature in Celsius: + Inserisci la temperatura in gradi Celsius: - +
); } } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOBm?editors=0010) +**[Prova su CodeSandbox](codesandbox://lifting-state-up/1.js)** -## Adding a Second Input {#adding-a-second-input} +## Aggiunta di un secondo input {#adding-a-second-input} -Our new requirement is that, in addition to a Celsius input, we provide a Fahrenheit input, and they are kept in sync. +Il nostro nuovo requisito è che, oltre a un input in gradi Celsius, forniamo un input in gradi Fahrenheit e l'aggiornamento dei due deve essere sincronizzato. -We can start by extracting a `TemperatureInput` component from `Calculator`. We will add a new `scale` prop to it that can either be `"c"` or `"f"`: +Possiamo iniziare estraendo un componente `InputTemperatura` da `Calcolatore`. Aggiungiamo una nuova prop `scala` ad esso che può essere `"c"` o `"f"`: ```js{1-4,19,22} -const scaleNames = { +const scale = { c: 'Celsius', f: 'Fahrenheit' }; -class TemperatureInput extends React.Component { +class InputTemperatura extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); - this.state = {temperature: ''}; + this.state = {temperatura: ''}; } handleChange(e) { - this.setState({temperature: e.target.value}); + this.setState({temperatura: e.target.value}); } render() { - const temperature = this.state.temperature; - const scale = this.props.scale; + const temperatura = this.state.temperatura; + const scala = this.props.scala; return (
- Enter temperature in {scaleNames[scale]}: - Inserisci la temperatura in gradi {scale[scala]}: +
); @@ -95,30 +95,30 @@ class TemperatureInput extends React.Component { } ``` -We can now change the `Calculator` to render two separate temperature inputs: +Ora possiamo cambiare il `Calcolatore` per renderizzare due input di temperatura separati: ```js{5,6} -class Calculator extends React.Component { +class Calcolatore extends React.Component { render() { return (
- - + +
); } } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBryx?editors=0010) +**[Prova su CodeSandbox](codesandbox://lifting-state-up/2.js)** -We have two inputs now, but when you enter the temperature in one of them, the other doesn't update. This contradicts our requirement: we want to keep them in sync. +Ora abbiamo due input, ma quando si inserisce la temperatura in uno di essi, l'altro non si aggiorna. Questo non soddisfa il nostro requisito: vogliamo mantenerli sincronizzati. -We also can't display the `BoilingVerdict` from `Calculator`. The `Calculator` doesn't know the current temperature because it is hidden inside the `TemperatureInput`. +Inoltre, non possiamo mostrare `VerdettoEbollizione` da `Calcolatore`. Il `Calcolatore` non conosce la temperatura corrente perché è nascosta all'interno di `InputTemperatura`. -## Writing Conversion Functions {#writing-conversion-functions} +## Scrittura Delle Funzioni Di Conversione {#writing-conversion-functions} -First, we will write two functions to convert from Celsius to Fahrenheit and back: +Innanzitutto, scriviamo due funzioni per convertire da Celsius a Fahrenheit e viceversa: ```js function toCelsius(fahrenheit) { @@ -130,101 +130,101 @@ function toFahrenheit(celsius) { } ``` -These two functions convert numbers. We will write another function that takes a string `temperature` and a converter function as arguments and returns a string. We will use it to calculate the value of one input based on the other input. +Queste due funzioni convertono i numeri. Scriviamo un'altra funzione che accetta come argomenti una stringa `temperatura` e una funzione `converti`, e restituisce una stringa. La useremo per calcolare il valore di un input basato su un altro. -It returns an empty string on an invalid `temperature`, and it keeps the output rounded to the third decimal place: +La funzione restituisce una stringa vuota per una `temperatura` non valida e arrotonda l'output alla terza cifra decimale: ```js -function tryConvert(temperature, convert) { - const input = parseFloat(temperature); +function conversione(temperatura, converti) { + const input = parseFloat(temperatura); if (Number.isNaN(input)) { return ''; } - const output = convert(input); + const output = converti(input); const rounded = Math.round(output * 1000) / 1000; return rounded.toString(); } ``` -For example, `tryConvert('abc', toCelsius)` returns an empty string, and `tryConvert('10.22', toFahrenheit)` returns `'50.396'`. +Ad esempio, `conversione('abc', toCelsius)` restituisce una stringa vuota, e `conversione('10 .22', toFahrenheit)` restituisce `'50.396'`. -## Lifting State Up {#lifting-state-up} +## Spostare lo stato "in alto" {#lifting-state-up} -Currently, both `TemperatureInput` components independently keep their values in the local state: +Attualmente, entrambi i componenti `InputTemperatura` mantengono in modo indipendente i loro valori nello stato locale: ```js{5,9,13} -class TemperatureInput extends React.Component { +class InputTemperatura extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); - this.state = {temperature: ''}; + this.state = {temperatura: ''}; } handleChange(e) { - this.setState({temperature: e.target.value}); + this.setState({temperatura: e.target.value}); } render() { - const temperature = this.state.temperature; + const temperatura = this.state.temperatura; // ... ``` -However, we want these two inputs to be in sync with each other. When we update the Celsius input, the Fahrenheit input should reflect the converted temperature, and vice versa. +Tuttavia, vogliamo che i valori di questi due input siano sincronizzati tra loro. Quando aggiorniamo l'input Celsius, l'input Fahrenheit dovrebbe aggiornare la temperatura convertita e viceversa. -In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called "lifting state up". We will remove the local state from the `TemperatureInput` and move it into the `Calculator` instead. +In React, la condivisione dello stato si ottiene spostandolo verso il più vicino antenato comune dei componenti che ne hanno bisogno. Questo processo viene detto "spostare lo stato verso l'alto" (_lifting state up_). Rimuoviamo lo stato locale da `InputTemperatura` e invece lo spostiamo nel `Calcolatore`. -If the `Calculator` owns the shared state, it becomes the "source of truth" for the current temperature in both inputs. It can instruct them both to have values that are consistent with each other. Since the props of both `TemperatureInput` components are coming from the same parent `Calculator` component, the two inputs will always be in sync. +Se il `Calcolatore` possiede lo stato condiviso, diventa la "unica fonte di verità" per la temperatura corrente in entrambi gli input. Può istruire entrambi ad avere valori coerenti l'uno con l'altro. Poiché le props di entrambi i componenti `InputTemperatura` provengono dallo stesso componente `Calcolatore` padre, i due input saranno sempre sincronizzati. -Let's see how this works step by step. +Vediamo come funziona passo dopo passo. -First, we will replace `this.state.temperature` with `this.props.temperature` in the `TemperatureInput` component. For now, let's pretend `this.props.temperature` already exists, although we will need to pass it from the `Calculator` in the future: +Per prima cosa sostituiremo `this.state.temperatura` con `this.props.temperatura` nel componente `InputTemperatura`. Per ora, facciamo finta che `this.props.temperatura` esista già, anche se dovremo successivamente passarla dal `Calcolatore`: ```js{3} render() { - // Before: const temperature = this.state.temperature; - const temperature = this.props.temperature; + // Prima: const temperatura = this.state.temperatura; + const temperatura = this.props.temperatura; // ... ``` -We know that [props are read-only](/docs/components-and-props.html#props-are-read-only). When the `temperature` was in the local state, the `TemperatureInput` could just call `this.setState()` to change it. However, now that the `temperature` is coming from the parent as a prop, the `TemperatureInput` has no control over it. +Sappiamo già che [le props sono in sola lettura](/docs/components-and-props.html#props-are-read-only). Quando `temperatura` era nello stato locale, `InputTemperatura` poteva semplicemente chiamare `this.setState()` per cambiarla. Tuttavia, ora che la `temperatura` viene come prop dal componente genitore, `InputTemperatura` non ha alcun controllo su di esso. -In React, this is usually solved by making a component "controlled". Just like the DOM `` accepts both a `value` and an `onChange` prop, so can the custom `TemperatureInput` accept both `temperature` and `onTemperatureChange` props from its parent `Calculator`. +In React, questo è solitamente risolto rendendo un componente "controllato". Proprio come nel DOM, `` accetta sia una prop `value` che una prop `onChange`, quindi il componente personalizzato `InputTemperatura` accetta sia la prop `temperatura` che `onChangeTemperatura` dal suo `Calcolatore` padre. -Now, when the `TemperatureInput` wants to update its temperature, it calls `this.props.onTemperatureChange`: +Ora, quando `InputTemperatura` vuole aggiornare la sua temperatura, chiama `this.props.onChangeTemperatura`: ```js{3} handleChange(e) { - // Before: this.setState({temperature: e.target.value}); - this.props.onTemperatureChange(e.target.value); + // Prima: this.setState({temperatura: e.target.value}); + this.props.onChangeTemperatura(e.target.value); // ... ``` ->Note: +> Nota: > ->There is no special meaning to either `temperature` or `onTemperatureChange` prop names in custom components. We could have called them anything else, like name them `value` and `onChange` which is a common convention. +> Non vi è alcun significato speciale nei nomi delle props `temperatura` o `onChangeTemperatura` nei componenti personalizzati. Avremmo potuto chiamarle in qualsiasi altro modo, come chiamarle `value` e `onChange`, come da convenzione comune. -The `onTemperatureChange` prop will be provided together with the `temperature` prop by the parent `Calculator` component. It will handle the change by modifying its own local state, thus re-rendering both inputs with the new values. We will look at the new `Calculator` implementation very soon. +La prop `onChangeTemperatura` viene fornita insieme alla prop `temperatura` dal componente padre `Calcolatore`. Gestirà i cambiamenti nel proprio stato locale, ri-renderizzando poi gli input con i nuovi valori. A breve, vedremo la nuova implementazione di `Calcolatore`. -Before diving into the changes in the `Calculator`, let's recap our changes to the `TemperatureInput` component. We have removed the local state from it, and instead of reading `this.state.temperature`, we now read `this.props.temperature`. Instead of calling `this.setState()` when we want to make a change, we now call `this.props.onTemperatureChange()`, which will be provided by the `Calculator`: +Prima di immergerti nei cambiamenti del `Calcolatore`, ricapitoliamo le modifiche al componente `InputTemperatura`. Abbiamo rimosso lo stato locale e invece di leggere `this.state.temperatura`, ora leggiamo `this.props.temperatura`. Invece di chiamare `this.setState()` quando vogliamo apportare una modifica, ora chiamiamo `this.props.onChangeTemperatura()`, che sarà fornita dal `Calcolatore`: ```js{8,12} -class TemperatureInput extends React.Component { +class InputTemperatura extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); } handleChange(e) { - this.props.onTemperatureChange(e.target.value); + this.props.onChangeTemperatura(e.target.value); } render() { - const temperature = this.props.temperature; - const scale = this.props.scale; + const temperatura = this.props.temperatura; + const scala = this.props.scala; return (
- Enter temperature in {scaleNames[scale]}: - Inserisci la temperatura in {scale[scala]}: +
); @@ -232,66 +232,66 @@ class TemperatureInput extends React.Component { } ``` -Now let's turn to the `Calculator` component. +Ora passiamo al componente `Calcolatore`. -We will store the current input's `temperature` and `scale` in its local state. This is the state we "lifted up" from the inputs, and it will serve as the "source of truth" for both of them. It is the minimal representation of all the data we need to know in order to render both inputs. +Memorizzeremo `temperatura` e `scale` dall'input corrente nel suo stato locale. Questo è lo stato che abbiamo "spostato su" dagli input, e servirà da "unica fonte di verità" per entrambi. È la rappresentazione minima di tutti i dati di cui dobbiamo essere a conoscenza per renderizzare entrambi gli input. -For example, if we enter 37 into the Celsius input, the state of the `Calculator` component will be: +Ad esempio, se inseriamo 37 nell'input Celsius, lo stato del componente `Calcolatore` è: ```js { - temperature: '37', - scale: 'c' + temperatura: '37', + scala: 'c' } ``` -If we later edit the Fahrenheit field to be 212, the state of the `Calculator` will be: +Se in seguito modifichiamo il campo in Fahrenheit come 212, lo stato del `Calcolatore` è: ```js { - temperature: '212', - scale: 'f' + temperatura: '212', + scala: 'f' } ``` -We could have stored the value of both inputs but it turns out to be unnecessary. It is enough to store the value of the most recently changed input, and the scale that it represents. We can then infer the value of the other input based on the current `temperature` and `scale` alone. +Avremmo potuto memorizzare il valore di entrambi gli input, ma non è necessario. È sufficiente memorizzare il valore dell'input modificato più recentemente e la scala che rappresenta. Possiamo quindi dedurre il valore dell'altro input basato sulle sole `temperatura` e `scala` correnti. -The inputs stay in sync because their values are computed from the same state: +Gli input rimangono sincronizzati perché i loro valori sono calcolati dallo stesso stato: ```js{6,10,14,18-21,27-28,31-32,34} -class Calculator extends React.Component { +class Calcolatore extends React.Component { constructor(props) { super(props); - this.handleCelsiusChange = this.handleCelsiusChange.bind(this); - this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this); - this.state = {temperature: '', scale: 'c'}; + this.handleChangeCelsius = this.handleChangeCelsius.bind(this); + this.handleChangeFahrenheit = this.handleChangeFahrenheit.bind(this); + this.state = {temperatura: '', scala: 'c'}; } - handleCelsiusChange(temperature) { - this.setState({scale: 'c', temperature}); + handleChangeCelsius(temperatura) { + this.setState({scala: 'c', temperatura}); } - handleFahrenheitChange(temperature) { - this.setState({scale: 'f', temperature}); + handleChangeFahrenheit(temperatura) { + this.setState({scala: 'f', temperatura}); } render() { - const scale = this.state.scale; - const temperature = this.state.temperature; - const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature; - const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature; + const scala = this.state.scala; + const temperatura = this.state.temperatura; + const celsius = scala === 'f' ? conversione(temperatura, toCelsius) : temperatura; + const fahrenheit = scala === 'c' ? conversione(temperatura, toFahrenheit) : temperatura; return (
- - - + +
); @@ -299,32 +299,32 @@ class Calculator extends React.Component { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/WZpxpz?editors=0010) +**[Prova su CodeSandbox](codesandbox://lifting-state-up/3.js)** -Now, no matter which input you edit, `this.state.temperature` and `this.state.scale` in the `Calculator` get updated. One of the inputs gets the value as is, so any user input is preserved, and the other input value is always recalculated based on it. +Ora `this.state.temperatura` e `this.state.scala` in `Calcolatore` si aggiornano indipendentemente dall'input che si modifica. Uno degli input ottiene il valore così com'è, quindi qualsiasi input dell'utente viene mantenuto e l'altro valore di input viene sempre ricalcolato in base ad esso. -Let's recap what happens when you edit an input: +Ricapitoliamo cosa succede quando modifichi un input: -* React calls the function specified as `onChange` on the DOM ``. In our case, this is the `handleChange` method in the `TemperatureInput` component. -* The `handleChange` method in the `TemperatureInput` component calls `this.props.onTemperatureChange()` with the new desired value. Its props, including `onTemperatureChange`, were provided by its parent component, the `Calculator`. -* When it previously rendered, the `Calculator` has specified that `onTemperatureChange` of the Celsius `TemperatureInput` is the `Calculator`'s `handleCelsiusChange` method, and `onTemperatureChange` of the Fahrenheit `TemperatureInput` is the `Calculator`'s `handleFahrenheitChange` method. So either of these two `Calculator` methods gets called depending on which input we edited. -* Inside these methods, the `Calculator` component asks React to re-render itself by calling `this.setState()` with the new input value and the current scale of the input we just edited. -* React calls the `Calculator` component's `render` method to learn what the UI should look like. The values of both inputs are recomputed based on the current temperature and the active scale. The temperature conversion is performed here. -* React calls the `render` methods of the individual `TemperatureInput` components with their new props specified by the `Calculator`. It learns what their UI should look like. -* React calls the `render` method of the `BoilingVerdict` component, passing the temperature in Celsius as its props. -* React DOM updates the DOM with the boiling verdict and to match the desired input values. The input we just edited receives its current value, and the other input is updated to the temperature after conversion. +* React chiama la funzione specificata come `onChange` sul DOM ` `. Nel nostro caso, questo è il metodo `handleChange` nel componente `InputTemperatura`. +* Il metodo `handleChange` nel componente `InputTemperatura` chiama `this.props.onChangeTemperatura()` con il nuovo valore desiderato. Le sue props, tra cui `onChangeTemperatura`, sono fornite dal suo componente principale, il `Calcolatore`. +* Quando il `Calcolatore` renderizza, esso determina che `onChangeTemperatura` del `InputTemperatura` in Celsius sia il metodo `handleCelsiusChange` di `Calcolatore`, e `onTemperatureChange` del `InputTemperatura` in Fahrenheit sia il metodo `handleChangeFahrenheit` di `Calcolatore`. Quindi uno di questi due metodi `Calcolatore` viene chiamato a seconda di quale input viene modificato. +* All'interno di questi metodi, il componente `Calcolatore` chiede a React di eseguire nuovamente la renderizzazione chiamando` this.setState()` con il nuovo valore inserito e la scala attuale dell'input appena modificato. +* React chiama il metodo `render` del componente `Calcolatore` per sapere come l'interfaccia utente dovrebbe apparire. I valori di entrambi gli input vengono ricalcolati in base alla temperatura corrente e alla scala attiva. La conversione della temperatura viene eseguita qui. +* React chiama i metodi `render` dei singoli componenti `InputTemperatura` con le nuove props passate dal `Calcolatore`. Vengono a conoscenza di come dovrebbe essere la loro UI. +* React chiama il metodo `render` del componente `VerdettoEbollizione`, passando la temperatura in Celsius come sue props. +* React DOM aggiorna il DOM con il verdetto di ebollizione e abbina i valori di input desiderati. L'input appena modificato riceve il suo valore corrente e l'altro input viene aggiornato con la temperatura dopo la conversione. -Every update goes through the same steps so the inputs stay in sync. +Ogni aggiornamento passa attraverso gli stessi passaggi in modo che gli input rimangano sincronizzati. -## Lessons Learned {#lessons-learned} +## Lezioni Apprese {#lessons-learned} -There should be a single "source of truth" for any data that changes in a React application. Usually, the state is first added to the component that needs it for rendering. Then, if other components also need it, you can lift it up to their closest common ancestor. Instead of trying to sync the state between different components, you should rely on the [top-down data flow](/docs/state-and-lifecycle.html#the-data-flows-down). +Tutti i dati che cambiano in un'applicazione React dovrebbero avere una "unica fonte di verità". Di solito, lo stato viene prima aggiunto al componente che ne ha bisogno per il rendering. Quindi, se anche altri componenti ne hanno bisogno, puoi spostarlo fino al loro antenato più vicino. Invece di provare a sincronizzare lo stato tra diversi componenti, dovresti affidarti sul [flusso di dati top-down](/docs/state-and-lifecycle.html#the-data-flows-down). -Lifting state involves writing more "boilerplate" code than two-way binding approaches, but as a benefit, it takes less work to find and isolate bugs. Since any state "lives" in some component and that component alone can change it, the surface area for bugs is greatly reduced. Additionally, you can implement any custom logic to reject or transform user input. +Spostare lo stato in alto nella gerarchia implica la scrittura di un codice più "standard" rispetto all'approccio _two-way binding_ (a doppio senso), ma come vantaggio, trovare e isolare i bug risulta meno laborioso. Poiché ogni stato "vive" in alcuni componenti e solo quel componente può cambiarlo, la fonte di bugs viene notevolmente ridotta. Inoltre, è possibile implementare qualsiasi logica personalizzata per validare o trasformare l'input dell'utente. -If something can be derived from either props or state, it probably shouldn't be in the state. For example, instead of storing both `celsiusValue` and `fahrenheitValue`, we store just the last edited `temperature` and its `scale`. The value of the other input can always be calculated from them in the `render()` method. This lets us clear or apply rounding to the other field without losing any precision in the user input. +Se qualcosa può essere derivato da props o stato, probabilmente non dovrebbe essere nello stato. Ad esempio, invece di memorizzare sia `valoreCelsius` che `valoreFahrenheit`, memorizziamo solo l'ultima `temperatura` modificata e la sua `scala`. Il valore dell'altro input può sempre essere calcolato da loro nel metodo `render()`. Questo ci consente di cancellare o applicare l'arrotondamento all'altro campo senza perdere precisione nell'input dell'utente. -When you see something wrong in the UI, you can use [React Developer Tools](https://github.com/facebook/react-devtools) to inspect the props and move up the tree until you find the component responsible for updating the state. This lets you trace the bugs to their source: +Quando vedi qualcosa di sbagliato nell'interfaccia utente, puoi utilizzare [React Developer Tools](https://github.com/facebook/react-devtools) per ispezionare le props e spostarti nell'albero finché non si trova il componente responsabile dell'aggiornamento dello stato. Questo ti permette di tracciare i bug alla loro fonte: Monitoring State in React DevTools diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 8b2500f07..bf9a5c450 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -30,7 +30,7 @@ - id: forms title: Forms - id: lifting-state-up - title: Lifting State Up + title: Spostare lo stato - id: composition-vs-inheritance title: Composizione vs Ereditarità - id: thinking-in-react diff --git a/examples/lifting-state-up/1.js b/examples/lifting-state-up/1.js new file mode 100644 index 000000000..699b4e205 --- /dev/null +++ b/examples/lifting-state-up/1.js @@ -0,0 +1,45 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +function VerdettoEbollizione(props) { + if (props.celsius >= 100) { + return

L'acqua bollirebbe.

; + } + return

L'acqua non bollirebbe.

; +} + +class Calcolatore extends React.Component { + constructor(props) { + super(props); + this.handleChange = this.handleChange.bind(this); + this.state = {temperatura: ''}; + } + + handleChange(e) { + this.setState({temperatura: e.target.value}); + } + + render() { + const temperatura = this.state.temperatura; + return ( +
+ + Inserisci la temperatura in gradi Celsius: + + + + +
+ ); + } +} + +ReactDOM.render( + , + document.getElementById('root') +); diff --git a/examples/lifting-state-up/2.js b/examples/lifting-state-up/2.js new file mode 100644 index 000000000..aad596467 --- /dev/null +++ b/examples/lifting-state-up/2.js @@ -0,0 +1,51 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +const scale = { + c: 'Celsius', + f: 'Fahrenheit', +}; + +class InputTemperatura extends React.Component { + constructor(props) { + super(props); + this.handleChange = this.handleChange.bind(this); + this.state = {temperatura: ''}; + } + + handleChange(e) { + this.setState({temperatura: e.target.value}); + } + + render() { + const temperatura = this.state.temperatura; + const scala = this.props.scala; + return ( +
+ + Inserisci la temperatura in gradi {scale[scala]}: + + +
+ ); + } +} + +class Calcolatore extends React.Component { + render() { + return ( +
+ + +
+ ); + } +} + +ReactDOM.render( + , + document.getElementById('root') +); diff --git a/examples/lifting-state-up/3.js b/examples/lifting-state-up/3.js new file mode 100644 index 000000000..d4d03cc82 --- /dev/null +++ b/examples/lifting-state-up/3.js @@ -0,0 +1,116 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +const scale = { + c: 'Celsius', + f: 'Fahrenheit', +}; + +function toCelsius(fahrenheit) { + return ((fahrenheit - 32) * 5) / 9; +} + +function toFahrenheit(celsius) { + return (celsius * 9) / 5 + 32; +} + +function conversione(temperatura, converti) { + const input = parseFloat(temperatura); + if (Number.isNaN(input)) { + return ''; + } + const output = converti(input); + const rounded = Math.round(output * 1000) / 1000; + return rounded.toString(); +} + +function VerdettoEbollizione(props) { + if (props.celsius >= 100) { + return

L'acqua bollirebbe.

; + } + return

L'acqua non bollirebbe.

; +} + +class InputTemperatura extends React.Component { + constructor(props) { + super(props); + this.handleChange = this.handleChange.bind(this); + } + + handleChange(e) { + this.props.onChangeTemperatura(e.target.value); + } + + render() { + const temperatura = this.props.temperatura; + const scala = this.props.scala; + return ( +
+ + Inserisci la temperatura in {scale[scala]}: + + +
+ ); + } +} + +class Calcolatore extends React.Component { + constructor(props) { + super(props); + this.handleChangeCelsius = this.handleChangeCelsius.bind( + this + ); + this.handleChangeFahrenheit = this.handleChangeFahrenheit.bind( + this + ); + this.state = {temperatura: '', scala: 'c'}; + } + + handleChangeCelsius(temperatura) { + this.setState({scala: 'c', temperatura}); + } + + handleChangeFahrenheit(temperatura) { + this.setState({scala: 'f', temperatura}); + } + + render() { + const scala = this.state.scala; + const temperatura = this.state.temperatura; + const celsius = + scala === 'f' + ? conversione(temperatura, toCelsius) + : temperatura; + const fahrenheit = + scala === 'c' + ? conversione(temperatura, toFahrenheit) + : temperatura; + + return ( +
+ + + +
+ ); + } +} + +ReactDOM.render( + , + document.getElementById('root') +); From d0f2db967a38e358bd59c65e981862cdf38f3d0b Mon Sep 17 00:00:00 2001 From: Saransh Kataria Date: Thu, 28 Mar 2019 15:51:37 -0700 Subject: [PATCH 14/19] removed sentence since functions can have state (#1878) With introduction of hooks, that statement is not valid anymore --- content/docs/state-and-lifecycle.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md index cbd8f684a..3967ae7c9 100644 --- a/content/docs/state-and-lifecycle.md +++ b/content/docs/state-and-lifecycle.md @@ -72,8 +72,6 @@ To implement this, we need to add "state" to the `Clock` component. State is similar to props, but it is private and fully controlled by the component. -We [mentioned before](/docs/components-and-props.html#functional-and-class-components) that components defined as classes have some additional features. Local state is exactly that: a feature available only to classes. - ## Converting a Function to a Class {#converting-a-function-to-a-class} You can convert a function component like `Clock` to a class in five steps: From a9c0a0dc29763774042f215a8df3a89cf0ba1a6e Mon Sep 17 00:00:00 2001 From: Luca Nardi Date: Fri, 29 Mar 2019 00:20:31 +0100 Subject: [PATCH 15/19] Translation for the page 'React' (API Reference) (#130) * Inizio traduzione * Continuo traduzione * Terminata traduzione pagina principale * Traduzione completata * Update content/docs/reference-react.md Co-Authored-By: LucaBlackDragon --- content/docs/reference-react.md | 191 +++++++++--------- .../create-ref-example.js | 2 +- examples/reference-react-forward-ref.js | 8 +- 3 files changed, 101 insertions(+), 100 deletions(-) diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md index 1745e2e5c..5ef199e0e 100644 --- a/content/docs/reference-react.md +++ b/content/docs/reference-react.md @@ -1,6 +1,6 @@ --- id: react-api -title: React Top-Level API +title: API di Primo Livello di React layout: docs category: Reference permalink: docs/react-api.html @@ -13,43 +13,43 @@ redirect_from: - "docs/top-level-api-zh-CN.html" --- -`React` is the entry point to the React library. If you load React from a ` - - + + ``` -The first two tags load React. The third one will load your component code. +I primi due tag caricano React. Il terzo carica il codice del tuo componente. -### Step 3: Create a React Component {#step-3-create-a-react-component} +### Passo 3: Crea un Componente React {#step-3-create-a-react-component} -Create a file called `like_button.js` next to your HTML page. +Crea un file chiamato `bottone_like.js` accanto alla tua pagina HTML. -Open **[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created. +Apri questo **[codice iniziale](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** e incollalo nel file appena creato. ->Tip +>Consiglio > ->This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen! +>Questo codice definisce un componente React chiamato `LikeButton` (bottone "Mi Piace"). Non preoccuparti se non lo capisci subito -- illustreremo i concetti fondamentali di React nel [tutorial "mani in pasta"](/tutorial/tutorial.html) e nella [guida ai concetti fondamentali](/docs/hello-world.html). Per ora, limitiamoci a fare in modo che il componente venga mostrato sullo schermo! -After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`: +Dopo il **[codice iniziale](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, aggiungi due linee in fondo a `bottone_like.js`: ```js{3,4} -// ... the starter code you pasted ... +// ... il codice iniziale che hai incollato ... -const domContainer = document.querySelector('#like_button_container'); -ReactDOM.render(e(LikeButton), domContainer); +const contenitoreDom = document.querySelector('#contenitore_bottone_like'); +ReactDOM.render(e(LikeButton), contenitoreDom); ``` -These two lines of code find the `
` we added to our HTML in the first step, and then display our "Like" button React component inside of it. +Queste due linee di codice servono a trovare il `
` che abbiamo aggiunto al nostro HTML nel passo 1 e a visualizzare il nostro componente React del bottone "Mi Piace" al suo interno. -### That's It! {#thats-it} +### Tutto qua! {#thats-it} -There is no step four. **You have just added the first React component to your website.** +Non c'è nessun passo 4. **Hai appena aggiunto il primo componente React al tuo sito internet!** -Check out the next sections for more tips on integrating React. +Leggi le sezioni successive per avere più consigli su come integrare React. -**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** +**[Guarda il codice completo dell'esempio](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** -**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** +**[Scarica l'esempio completo (2KB zippato)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** -### Tip: Reuse a Component {#tip-reuse-a-component} +### Consiglio: Riutilizza i Componenti {#tip-reuse-a-component} -Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it: +Di solito, vorrai visualizzare i componenti React in più punti nella pagina HTML. Ecco un esempio che visualizza il bottone "Mi Piace" tre volte e gli passa alcuni dati: -[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) +[Guarda il codice completo dell'esempio](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) -[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) +[Scarica l'esempio completo (2KB zippato)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) ->Note +>Nota > ->This strategy is mostly useful while React-powered parts of the page are isolated from each other. Inside React code, it's easier to use [component composition](/docs/components-and-props.html#composing-components) instead. +>Questa strategia è utile soprattutto quando le parti della pagina realizzate con React sono isolate l'una dall'altra. All'interno del codice React, è più semplice invece utilizzare la [composizione di componenti](/docs/components-and-props.html#composing-components). -### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} +### Consiglio: Minimizza il JavaScript per la Produzione {#tip-minify-javascript-for-production} -Before deploying your website to production, be mindful that unminified JavaScript can significantly slow down the page for your users. +Prima di rilasciare il tuo sito in produzione, ricordati che il codice JavaScript non minimizzato può rallentare significativamente la pagina per i tuoi utenti. -If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`: +Se minimizzi già gli script dell'applicazione, **il tuo sito sarà pronto per la produzione** se ti assicuri che l'HTML rilasciato carichi le versioni degli script di React che finiscono con `production.min.js`: ```js ``` -If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). +Se invece non hai già un passaggio di minimizzazione dei tuoi script, [ecco un modo per introdurlo](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -## Optional: Try React with JSX {#optional-try-react-with-jsx} +## Opzionale: Prova React con JSX {#optional-try-react-with-jsx} -In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display: +Negli esempi precedenti, abbiamo utilizzato solamente caratteristiche supportate nativamente dai browser. Ecco perché abbiamo utilizzato una funzione JavaScript per dire a React cosa visualizzare: ```js const e = React.createElement; -// Display a "Like" ); ``` -These two code snippets are equivalent. While **JSX is [completely optional](/docs/react-without-jsx.html)**, many people find it helpful for writing UI code -- both with React and with other libraries. +Questi due frammenti di codice sono equivalenti. Anche se **JSX è [completamente opzionale](/docs/react-without-jsx.html)**, molte persone trovano che sia utile per scrivere il codice della UI -- non solo con React ma anche con altre librerie! -You can play with JSX using [this online converter](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). +Puoi fare esperimenti con JSX utilizzando [questo convertitore online](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). -### Quickly Try JSX {#quickly-try-jsx} +### Prova JSX Velocemente {#quickly-try-jsx} -The quickest way to try JSX in your project is to add this ` ``` -Now you can use JSX in any `