From bf8e36a43f6d456d8edc733a643df2e901a963d3 Mon Sep 17 00:00:00 2001 From: Alessio Italo Junior D'Alise Date: Wed, 6 Oct 2021 13:30:41 +0100 Subject: [PATCH 1/2] translate faq-styling.md --- content/docs/faq-styling.md | 31 +++++++++++++++++-------------- yarn.lock | 5 +++++ 2 files changed, 22 insertions(+), 14 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 825cb4b3b..bf117117d 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -6,9 +6,9 @@ layout: docs category: FAQ --- -### How do I add CSS classes to components? {#how-do-i-add-css-classes-to-components} +### Come posso aggiungere una classe CSS al mio component? {#how-do-i-add-css-classes-to-components} -Pass a string as the `className` prop: +Puoi utilizzare l'apposita prop `className`, e passare al suo interno una stringa con il nome della classe che vuoi utilizzare. ```jsx render() { @@ -16,7 +16,7 @@ render() { } ``` -It is common for CSS classes to depend on the component props or state: +Una pratica comune è quella di applicare o rimuovere classi CSS in base allo state o ai props del component: ```jsx render() { @@ -28,24 +28,27 @@ render() { } ``` ->Tip +>Nota > ->If you often find yourself writing code like this, [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) package can simplify it. +>Se ti ritrovi spesso a scrivere codice in questo modo, il package [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) potrebbe esserti utile. -### Can I use inline styles? {#can-i-use-inline-styles} +### Posso utilizzare inline styling? {#can-i-use-inline-styles} -Yes, see the docs on styling [here](/docs/dom-elements.html#style). +Si, consulta la documentazione a riguardo [qui](/docs/dom-elements.html#style). -### Are inline styles bad? {#are-inline-styles-bad} +### Utilizzare inline styling è una cattiva idea? {#are-inline-styles-bad} -CSS classes are generally better for performance than inline styles. +In linea di massima, l'utilizzo di classi comporta una performance migliore rispetto all'inline styling. -### What is CSS-in-JS? {#what-is-css-in-js} +### Che cos'è CSS-in-JS? {#what-is-css-in-js} -"CSS-in-JS" refers to a pattern where CSS is composed using JavaScript instead of defined in external files. -_Note that this functionality is not a part of React, but provided by third-party libraries._ React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate `*.css` file as usual and refer to them using [`className`](/docs/dom-elements.html#classname). +Con "CSS-in-JS" si intende la pratica di definire styling CSS direttamente all'interno di un file JavaScript, anziché utilizzare dei file esterni. -### Can I do animations in React? {#can-i-do-animations-in-react} -React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion) or [React Spring](https://github.com/react-spring/react-spring), for example. +_Tieni presente che questa funzionalità non è parte di React, ma è fornita da librerie esterne._ React non fornisce particolari indicazioni su come e dove definire lo styling. Nel dubbio, un buon punto di partenza é quello di definire il tuo styling in un file `*.css` separato, ed utilizzare cio che é definito al suo interno tramite [`className`](/docs/dom-elements.html#classname). + + +### Posso utilizzare animazioni in React? {#can-i-do-animations-in-react} + +React può essere utilizzato per qualsiasi tipo di animazione. Prova a dare un'occhiata a [React Transition Group](https://reactcommunity.org/react-transition-group/), [React Motion](https://github.com/chenglou/react-motion) o [React Spring](https://github.com/react-spring/react-spring). diff --git a/yarn.lock b/yarn.lock index fcbdae912..7e3ef00bd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13218,6 +13218,11 @@ prismjs@^1.25.0, prismjs@^1.6.0: resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.25.0.tgz#6f822df1bdad965734b310b315a23315cf999756" integrity sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg== +private@^0.1.8: + version "0.1.8" + resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff" + integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg== + probe-image-size@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/probe-image-size/-/probe-image-size-5.0.0.tgz#1b87d20340ab8fcdb4324ec77fbc8a5f53419878" From 7890c10a667dccf5e64f38e1a03a6ac2d33350c0 Mon Sep 17 00:00:00 2001 From: Alessio Italo Junior D'Alise Date: Thu, 7 Oct 2021 17:03:11 +0100 Subject: [PATCH 2/2] fix wording and spaces --- content/docs/faq-styling.md | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index bf117117d..cadd84413 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -6,7 +6,7 @@ layout: docs category: FAQ --- -### Come posso aggiungere una classe CSS al mio component? {#how-do-i-add-css-classes-to-components} +### Come posso aggiungere una classe CSS al mio componente? {#how-do-i-add-css-classes-to-components} Puoi utilizzare l'apposita prop `className`, e passare al suo interno una stringa con il nome della classe che vuoi utilizzare. @@ -16,7 +16,7 @@ render() { } ``` -Una pratica comune è quella di applicare o rimuovere classi CSS in base allo state o ai props del component: +Una pratica comune è quella di applicare o rimuovere classi CSS in base allo state o alle props del componente: ```jsx render() { @@ -28,7 +28,7 @@ render() { } ``` ->Nota +>Suggerimento > >Se ti ritrovi spesso a scrivere codice in questo modo, il package [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) potrebbe esserti utile. @@ -42,13 +42,10 @@ In linea di massima, l'utilizzo di classi comporta una performance migliore risp ### Che cos'è CSS-in-JS? {#what-is-css-in-js} - Con "CSS-in-JS" si intende la pratica di definire styling CSS direttamente all'interno di un file JavaScript, anziché utilizzare dei file esterni. - _Tieni presente che questa funzionalità non è parte di React, ma è fornita da librerie esterne._ React non fornisce particolari indicazioni su come e dove definire lo styling. Nel dubbio, un buon punto di partenza é quello di definire il tuo styling in un file `*.css` separato, ed utilizzare cio che é definito al suo interno tramite [`className`](/docs/dom-elements.html#classname). - ### Posso utilizzare animazioni in React? {#can-i-do-animations-in-react} React può essere utilizzato per qualsiasi tipo di animazione. Prova a dare un'occhiata a [React Transition Group](https://reactcommunity.org/react-transition-group/), [React Motion](https://github.com/chenglou/react-motion) o [React Spring](https://github.com/react-spring/react-spring).