Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(pt-br): translate writing-markup-with-jsx page #657

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

docs(pt-br): translate writing-markup-with-jsx page #657

wants to merge 7 commits into from
+84 −84

Conversation

volinha
Copy link
Contributor

@volinha volinha commented Apr 24, 2023

No description provided.

@github-actions
Copy link

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

@jhonmike
Copy link
Member

@volinha é importante vc avisar nessa issue qual pagina vc vai traduzir, para que outras pessoas não comecem traduzir a mesma

@jhonmike jhonmike mentioned this pull request Apr 25, 2023
Open
@jhonmike jhonmike added the needs review A pull request ready to be reviewed label Apr 25, 2023
natrodrigo
natrodrigo suggested changes Apr 27, 2023
View reviewed changes
Copy link
Contributor

@natrodrigo natrodrigo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@volinha , obrigado por sua contribuição, parabéns!

Deixei alguns apontamentos para você analisar.

src/content/learn/writing-markup-with-jsx.md
@@ -4,113 +4,113 @@ title: Writing Markup with JSX

<Intro>

*JSX* is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it.
*JSX* é uma extensão de sintaxe para JavaScript que permite você escrever códigos com marcações tipo HTML dentro de um arquivo Javascript. Embora existam outras maneiras de se escrever componentes, a maioria dos desenvolvedores React preferem a concisão do JSX e a maioria das bases de código o utiliza.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
*JSX* é uma extensão de sintaxe para JavaScript que permite você escrever códigos com marcações tipo HTML dentro de um arquivo Javascript. Embora existam outras maneiras de se escrever componentes, a maioria dos desenvolvedores React preferem a concisão do JSX e a maioria das bases de código o utiliza.
*JSX* é uma extensão de sintaxe para JavaScript que permite você escrever códigos utilizando tags como faria no HTML dentro de um arquivo Javascript. Embora existam outras maneiras de se escrever componentes, a maioria dos desenvolvedores React preferem a concisão do JSX e a maioria das bases de código o utiliza.

Traduzi markup como tag no PR #660 , acredito que é a melhor palavra para o contexto, já que não temos tradução da palavra markup.

src/content/learn/writing-markup-with-jsx.md
* Why React mixes markup with rendering logic
* How JSX is different from HTML
* How to display information with JSX
* Porque o React mistura marcações com lógica de renderização
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* Porque o React mistura marcações com lógica de renderização
* Por que o React mistura tags com lógica de renderização

O porquê certo neste caso é separado sem acento.
Sugiro a palavra tag para tradução de markup em coerência com #660

src/content/learn/writing-markup-with-jsx.md

</YouWillLearn>

## JSX: Putting markup into JavaScript {/*jsx-putting-markup-into-javascript*/}
## JSX: Colocando marcação em JavaScript {/*jsx-putting-markup-into-javascript*/}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## JSX: Colocando marcação em JavaScript {/*jsx-putting-markup-into-javascript*/}
## JSX: Colocando tags dentro do JavaScript {/*jsx-putting-markup-into-javascript*/}

Sugiro a palavra tag para tradução de markup em coerência com #660

src/content/learn/writing-markup-with-jsx.md

The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript:
A Web foi construída em HTML, CSS e JavaScript. Por muitos anos, os desenvolvedores da Web mantiveram o conteúdo em HTML, o design em CSS e a lógica em JavaScript — muitas vezes em arquivos separados! O conteúdo era marcado dentro do HTML enquanto a lógica da página vivia separadamente no JavaScript:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
A Web foi construída em HTML, CSS e JavaScript. Por muitos anos, os desenvolvedores da Web mantiveram o conteúdo em HTML, o design em CSS e a lógica em JavaScript — muitas vezes em arquivos separados! O conteúdo era marcado dentro do HTML enquanto a lógica da página vivia separadamente no JavaScript:
A Web foi construída em HTML, CSS e JavaScript. Por muitos anos, os desenvolvedores da Web mantiveram o conteúdo em HTML, o design em CSS e a lógica em JavaScript — muitas vezes em arquivos separados! O conteúdo era estruturado dentro do HTML enquanto a lógica da página vivia separadamente no JavaScript:

src/content/learn/writing-markup-with-jsx.md

<DiagramGroup>

<Diagram name="writing_jsx_html" height={237} width={325} alt="HTML markup with purple background and a div with two child tags: p and form. ">
<Diagram name="writing_jsx_html" height={237} width={325} alt="Marcação HTML com fundo roxo e um div com duas tags filhas: p e form.">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Diagram name="writing_jsx_html" height={237} width={325} alt="Marcação HTML com fundo roxo e um div com duas tags filhas: p e form.">
<Diagram name="writing_jsx_html" height={237} width={325} alt="Bloco de código HTML com fundo roxo contendo uma div com duas tags filhas: p e form.">

src/content/learn/writing-markup-with-jsx.md

</Note>

## Converting HTML to JSX {/*converting-html-to-jsx*/}
## Convertendo HTML em JSX {/*converting-html-to-jsx*/}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## Convertendo HTML em JSX {/*converting-html-to-jsx*/}
## Convertendo HTML para JSX {/*converting-html-to-jsx*/}

src/content/learn/writing-markup-with-jsx.md
@@ -122,29 +122,29 @@ img { height: 90px }

</Sandpack>

This is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they'll guide you to fix the markup, or you can follow the guide below.
Isso ocorre porque o JSX é mais rígido e possui algumas regras a mais que o HTML! Se você ler as mensagens de erro acima, elas o guiarão para corrigir a marcação ou você poderá seguir o guia abaixo.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Isso ocorre porque o JSX é mais rígido e possui algumas regras a mais que o HTML! Se você ler as mensagens de erro acima, elas o guiarão para corrigir a marcação ou você poderá seguir o guia abaixo.
Isso ocorre porque o JSX é mais rígido e possui algumas regras a mais que o HTML! Se você ler as mensagens de erro acima, elas o guiarão para corrigir as tags ou você poderá seguir o guia abaixo.

src/content/learn/writing-markup-with-jsx.md
/>
```

You can [find all these attributes in the list of DOM component props.](/reference/react-dom/components/common) If you get one wrong, don't worry—React will print a message with a possible correction to the [browser console.](https://developer.mozilla.org/docs/Tools/Browser_Console)
Você pode [encontrar todos esses atributos na lista de propriedades do componente DOM.](/reference/react-dom/components/common) Se você errar, não se preocupe — o React imprimirá uma mensagem com uma possível correção para o [console do navegador.](https://developer.mozilla.org/docs/Tools/Browser_Console)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Você pode [encontrar todos esses atributos na lista de propriedades do componente DOM.](/reference/react-dom/components/common) Se você errar, não se preocupe — o React imprimirá uma mensagem com uma possível correção para o [console do navegador.](https://developer.mozilla.org/docs/Tools/Browser_Console)
Você pode [encontrar todos esses atributos na lista de propriedades do componente DOM.](/reference/react-dom/components/common) Se você fizer algo de errado, não se preocupe — o React imprimirá uma mensagem com uma possível correção para o [console do navegador.](https://developer.mozilla.org/docs/Tools/Browser_Console)

src/content/learn/writing-markup-with-jsx.md
* React components group rendering logic together with markup because they are related.
* JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to.
* Error messages will often point you in the right direction to fixing your markup.
* Os componentes do React agrupam a lógica de renderização junto com a marcação porque estão relacionados.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* Os componentes do React agrupam a lógica de renderização junto com a marcação porque estão relacionados.
* Os componentes do React agrupam a lógica de renderização junto com as tags porque estão relacionados.

Sugiro a palavra tag para tradução de markup em coerência com #660

src/content/learn/writing-markup-with-jsx.md
* Error messages will often point you in the right direction to fixing your markup.
* Os componentes do React agrupam a lógica de renderização junto com a marcação porque estão relacionados.
* O JSX é semelhante ao HTML, com algumas diferenças. Se necessário, pode utilizar um [conversor] (https://transform.tools/html-to-jsx).
* As mensagens de erro geralmente indicam a direção certa para corrigir sua marcação.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* As mensagens de erro geralmente indicam a direção certa para corrigir sua marcação.
* As mensagens de erro geralmente indicam a direção certa para corrigir suas tags.

Sugiro a palavra tag para tradução de markup em coerência com #660

@jhonmike jhonmike added needs author response Changes requested needing author's input and removed needs review A pull request ready to be reviewed labels Apr 27, 2023
natrodrigo
natrodrigo suggested changes Apr 28, 2023
View reviewed changes
Copy link
Contributor

@natrodrigo natrodrigo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adicionei mais uma review pois nas diretrizes não devemos traduzir nomes de classes, variáveis, etc. Adicionei alguns comentários para facilitar o commit. Obrigado!

src/content/learn/writing-markup-with-jsx.md
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
class="foto"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
class="foto"
class="photo"

Pelas diretrizes, não devemos traduzir nomes de variáveis, classes, etc. No máximo comentários ou textos se for pertinente

src/content/learn/writing-markup-with-jsx.md

```js {2-6,8-10}
<>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
class="foto"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
class="foto"
class="photo"

src/content/learn/writing-markup-with-jsx.md

```js {4}
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
className="photo"
className="foto"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
className="foto"
className="photo"

src/content/learn/writing-markup-with-jsx.md
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
className="photo"
className="foto"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
className="foto"
className="photo"

src/content/learn/writing-markup-with-jsx.md

<Sandpack>

```js
export default function TodoList() {
export default function ListaDeTarefas() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
export default function ListaDeTarefas() {
export default function TodoList() {

src/content/learn/writing-markup-with-jsx.md
</div>
<p class="summary">
You can find my thoughts here.
<p class="resumo">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<p class="resumo">
<p class="summary">

src/content/learn/writing-markup-with-jsx.md
@@ -300,15 +300,15 @@ export default function Bio() {
-webkit-text-fill-color: transparent;
}

.summary {
.resumo {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
.resumo {
.summary{

src/content/learn/writing-markup-with-jsx.md
</div>
<p className="summary">
You can find my thoughts here.
<p className="resumo">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<p className="resumo">
<p className="summary">

src/content/learn/writing-markup-with-jsx.md
@@ -340,7 +340,7 @@ export default function Bio() {
-webkit-text-fill-color: transparent;
}

.summary {
.resumo {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
.resumo {
.summary {

@TarsiSurdi TarsiSurdi mentioned this pull request Apr 28, 2023
Merged
roccomaniscalco added a commit to roccomaniscalco/pt-br.react.dev that referenced this pull request Apr 29, 2023
@roccomaniscalco
improve word choice
47b0339 
• replace uses of "marca" with "tag" (reactjs#657 (comment))
@roccomaniscalco roccomaniscalco mentioned this pull request Apr 29, 2023
Merged
jhonmike pushed a commit that referenced this pull request May 2, 2023
@roccomaniscalco @TarsiSurdi
Translate javascript-in-jsx-with-curly-braces.md (#674)
18e42f7 
* first pass

• deveria ser chamado "string" ou "cadeia de caracteres" ?
• deveria ser chamado "chaves duplas" or something more fun like "double curlies" was ?

* improve word choice

• replace uses of "marca" with "tag" (#657 (comment))

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

* translate title

* Update src/content/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>

---------

Co-authored-by: Tarcísio Surdi <tarsisurdi@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@natrodrigo natrodrigo natrodrigo requested changes

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
needs author response Changes requested needing author's input
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@volinha @jhonmike @natrodrigo