From 7f4cdb3ca05d81984b2d0b7e21b23fec05bea6ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Fernandes?= Date: Sat, 22 Apr 2023 19:06:43 -0300 Subject: [PATCH 1/5] docs(pt-br): translate editor-setup page --- src/content/learn/editor-setup.md | 66 +++++++++++++++---------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md index 94dbbbaef..85efc5109 100644 --- a/src/content/learn/editor-setup.md +++ b/src/content/learn/editor-setup.md @@ -1,62 +1,62 @@ --- -title: Editor Setup +title: Configuração do Editor --- -A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as you write them! If this is your first time setting up an editor or you're looking to tune up your current editor, we have a few recommendations. +Um editor configurado corretamente pode tornar o código mais claro para ler e mais rápido para escrever. Ele pode até mesmo ajudá-lo a detectar erros ao escrevê-los! Se esta é a primeira vez que você configura um editor ou deseja ajustar seu editor atual, temos algumas recomendações. - + -* What the most popular editors are -* How to format your code automatically +* Quais são os editores mais populares +* Como formatar seu código automaticamente - + -## Your editor {/*your-editor*/} +## Seu editor {/*seu-editor*/} -[VS Code](https://code.visualstudio.com/) is one of the most popular editors in use today. It has a large marketplace of extensions and integrates well with popular services like GitHub. Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable! +[VS Code](https://code.visualstudio.com/) é um dos editores mais populares em uso hoje. Possui uma grande variedade de extensões e se integra bem a serviços populares como o GitHub. A maioria dos recursos listados abaixo também podem ser adicionados ao VS Code como extensões, tornando-o altamente configurável! -Other popular text editors used in the React community include: +Outros editores de texto populares usados ​​na comunidade React incluem: -* [WebStorm](https://www.jetbrains.com/webstorm/) is an integrated development environment designed specifically for JavaScript. -* [Sublime Text](https://www.sublimetext.com/) has support for JSX and TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in. -* [Vim](https://www.vim.org/) is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X. +* [WebStorm](https://www.jetbrains.com/webstorm/) é um ambiente de desenvolvimento integrado projetado especificamente para JavaScript. +* [Sublime Text](https://www.sublimetext.com/) tem suporte para JSX e TypeScript, [realce de sintaxes](https://stackoverflow.com/a/70960574/458193) e preenchimento automático embutidos. +* [Vim](https://www.vim.org/) é um editor de texto altamente configurável construído para tornar a criação e alteração de qualquer tipo de texto muito eficiente. Está incluído como "vi" na maioria dos sistemas UNIX e no Apple OS X. -## Recommended text editor features {/*recommended-text-editor-features*/} +## Recursos recomendados dos editores de texto {/*recursos-recomendados-dos-editores-de-texto*/} -Some editors come with these features built in, but others might require adding an extension. Check to see what support your editor of choice provides to be sure! +Alguns editores vêm com esses recursos integrados, mas outros podem exigir a adição de uma extensão. Verifique o suporte que seu editor de escolha oferece para ter certeza! ### Linting {/*linting*/} -Code linters find problems in your code as you write, helping you fix them early. [ESLint](https://eslint.org/) is a popular, open source linter for JavaScript. +*Linters* de código encontram problemas em seu código enquanto você escreve, ajudando a corrigi-los antecipadamente. [ESLint](https://eslint.org/) é um popular *linter* de código aberto para JavaScript. -* [Install ESLint with the recommended configuration for React](https://www.npmjs.com/package/eslint-config-react-app) (be sure you have [Node installed!](https://nodejs.org/en/download/current/)) -* [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) +* [Instale o ESLint com a configuração recomendada para o React](https://www.npmjs.com/package/eslint-config-react-app) (cerfitique-se de ter o [Node instalado](https://nodejs.org/en/download/current/)) +* [Integre o ESLint no VSCode com a extensão oficial](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) -**Make sure that you've enabled all the [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) rules for your project.** They are essential and catch the most severe bugs early. The recommended [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) preset already includes them. +**Certifique-se de ter ativado as regras [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) para o seu projeto.** Elas são essenciais e detectam os bugs mais severos cedo. A predefinição [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) recomendada já as inclui. -### Formatting {/*formatting*/} +### Formatação {/*formatação*/} -The last thing you want to do when sharing your code with another contributor is get into an discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you. +A última coisa que você quer fazer ao compartilhar seu código com outro colaborador é entrar em uma discussão sobre [tabs versus espaços](https://www.google.com/search?q=tabs+vs+spaces)! Felizmente, [Prettier](https://prettier.io/) limpará seu código reformatando-o para estar em conformidade com regras predefinidas e configuráveis. Execute o Prettier e todas as suas guias serão convertidas em espaços - e seu recuo, aspas, etc. também serão alterados para se adequar à configuração. Na configuração ideal, o Prettier será executado quando você salvar seu arquivo, fazendo essas edições rapidamente para você. -You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps: +Você pode instalar a [extensão Prettier no VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) seguindo estas etapas: -1. Launch VS Code -2. Use Quick Open (press Ctrl/Cmd+P) -3. Paste in `ext install esbenp.prettier-vscode` -4. Press Enter +1. Inicie o VSCode +2. Abra *Ir para Arquivo...* (pressione Ctrl/Cmd+P) +3. Cole `ext install esbenp.prettier-vscode` +4. Pressione Entrar -#### Formatting on save {/*formatting-on-save*/} +#### Formatando ao salvar {/*formatando-ao-salvar*/} -Ideally, you should format your code on every save. VS Code has settings for this! +Idealmente, você deve formatar seu código a cada salvamento. O VS Code tem configurações para isso! -1. In VS Code, press `CTRL/CMD + SHIFT + P`. -2. Type "settings" -3. Hit Enter -4. In the search bar, type "format on save" -5. Be sure the "format on save" option is ticked! +1. No VS Code, pressione `CTRL/CMD + SHIFT + P`. +2. Digite "configurações" +3. Pressione Enter +4. Na barra de pesquisa, digite "formatar ao salvar" +5. Se assegure de que a opção "formatar ao salvar" está selecionada! -> If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend disabling all formatting rules in your ESLint preset using [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) so that ESLint is *only* used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) for your continuous integration. +> Se sua predefinição ESLint tiver regras de formatação, elas podem entrar em conflito com o Prettier. Recomendamos desativar todas as regras de formatação em sua predefinição ESLint usando [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) para que o ESLint seja *apenas* usado para detectar erros lógicos. Se você deseja impor que os arquivos sejam formatados antes que uma solicitação pull seja mesclada, use [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) para sua integração contínua. From 74c42fcf6c9121a098ae8eb0b9cbe3de6288f0ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Fernandes?= Date: Sun, 23 Apr 2023 18:46:15 -0300 Subject: [PATCH 2/5] fix(refs): untranslate references --- src/content/learn/editor-setup.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md index 85efc5109..3f34bc94e 100644 --- a/src/content/learn/editor-setup.md +++ b/src/content/learn/editor-setup.md @@ -8,14 +8,14 @@ Um editor configurado corretamente pode tornar o código mais claro para ler e m - + * Quais são os editores mais populares * Como formatar seu código automaticamente - + -## Seu editor {/*seu-editor*/} +## Seu editor {/*your-editor*/} [VS Code](https://code.visualstudio.com/) é um dos editores mais populares em uso hoje. Possui uma grande variedade de extensões e se integra bem a serviços populares como o GitHub. A maioria dos recursos listados abaixo também podem ser adicionados ao VS Code como extensões, tornando-o altamente configurável! @@ -25,7 +25,7 @@ Outros editores de texto populares usados ​​na comunidade React incluem: * [Sublime Text](https://www.sublimetext.com/) tem suporte para JSX e TypeScript, [realce de sintaxes](https://stackoverflow.com/a/70960574/458193) e preenchimento automático embutidos. * [Vim](https://www.vim.org/) é um editor de texto altamente configurável construído para tornar a criação e alteração de qualquer tipo de texto muito eficiente. Está incluído como "vi" na maioria dos sistemas UNIX e no Apple OS X. -## Recursos recomendados dos editores de texto {/*recursos-recomendados-dos-editores-de-texto*/} +## Recursos recomendados dos editores de texto {/*recommended-text-editor-features*/} Alguns editores vêm com esses recursos integrados, mas outros podem exigir a adição de uma extensão. Verifique o suporte que seu editor de escolha oferece para ter certeza! @@ -38,7 +38,7 @@ Alguns editores vêm com esses recursos integrados, mas outros podem exigir a ad **Certifique-se de ter ativado as regras [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) para o seu projeto.** Elas são essenciais e detectam os bugs mais severos cedo. A predefinição [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) recomendada já as inclui. -### Formatação {/*formatação*/} +### Formatação {/*formatting*/} A última coisa que você quer fazer ao compartilhar seu código com outro colaborador é entrar em uma discussão sobre [tabs versus espaços](https://www.google.com/search?q=tabs+vs+spaces)! Felizmente, [Prettier](https://prettier.io/) limpará seu código reformatando-o para estar em conformidade com regras predefinidas e configuráveis. Execute o Prettier e todas as suas guias serão convertidas em espaços - e seu recuo, aspas, etc. também serão alterados para se adequar à configuração. Na configuração ideal, o Prettier será executado quando você salvar seu arquivo, fazendo essas edições rapidamente para você. @@ -49,7 +49,7 @@ Você pode instalar a [extensão Prettier no VSCode](https://marketplace.visuals 3. Cole `ext install esbenp.prettier-vscode` 4. Pressione Entrar -#### Formatando ao salvar {/*formatando-ao-salvar*/} +#### Formatando ao salvar {/*formatting-on-save*/} Idealmente, você deve formatar seu código a cada salvamento. O VS Code tem configurações para isso! From 9e5bdf7bdcc0c662bf176b3945981f8b9986ea36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Fernandes?= Date: Sun, 23 Apr 2023 18:47:27 -0300 Subject: [PATCH 3/5] fix(doc): typo --- src/content/learn/editor-setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md index 3f34bc94e..cee4564bc 100644 --- a/src/content/learn/editor-setup.md +++ b/src/content/learn/editor-setup.md @@ -47,7 +47,7 @@ Você pode instalar a [extensão Prettier no VSCode](https://marketplace.visuals 1. Inicie o VSCode 2. Abra *Ir para Arquivo...* (pressione Ctrl/Cmd+P) 3. Cole `ext install esbenp.prettier-vscode` -4. Pressione Entrar +4. Pressione Enter #### Formatando ao salvar {/*formatting-on-save*/} From fcf6a8c56743f75676ad68fec016b208a4ab1988 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Fernandes?= Date: Mon, 24 Apr 2023 13:52:59 -0300 Subject: [PATCH 4/5] docs(pt-br): translate writing-markup-with-jsx page --- src/content/learn/writing-markup-with-jsx.md | 169 +++++++++---------- 1 file changed, 84 insertions(+), 85 deletions(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 62670150a..ec334fa30 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -4,31 +4,30 @@ title: Writing Markup with JSX -*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. -* 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 +* Como o JSX é diferente do HTML +* Como mostrar informações com o JSX -## JSX: Putting markup into JavaScript {/*jsx-putting-markup-into-javascript*/} +## JSX: Colocando marcação em JavaScript {/*jsx-putting-markup-into-javascript*/} -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: - + HTML - + JavaScript @@ -36,81 +35,81 @@ JavaScript -But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components.** +Mas à medida que a Web se tornava mais interativa, a lógica determinava cada vez mais o conteúdo. O JavaScript ficou a cargo do HTML! É por isso que **no React, a lógica de renderização e a marcação vivem juntas no mesmo lugar — os componentes.** - + -`Sidebar.js` React component +`Sidebar.js` Componente React - + -`Form.js` React component +`Form.js` Componente React -Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own. +Manter a lógica de renderização e a marcação de um botão juntas garante que eles permaneçam sincronizados entre si em todas as edições. Por outro lado, os detalhes não relacionados, como a marcação do botão e a marcação da barra lateral, são isolados uns dos outros, tornando mais seguro alterar qualquer um deles por conta própria. -Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to JSX markup. +Cada componente do React é uma função JavaScript que pode conter alguma marcação que o React renderiza no navegador. Os componentes do React usam uma extensão de sintaxe chamada JSX para representar essa marcação. O JSX se parece muito com o HTML, mas é um pouco mais rígido e pode exibir informações dinâmicas. A melhor maneira de entender isso é converter alguma marcação HTML em marcação JSX. -JSX and React are two separate things. They're often used together, but you *can* [use them independently](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) of each other. JSX is a syntax extension, while React is a JavaScript library. +JSX e React são duas coisas separadas. Eles são comumente utilizados juntos, mas você *pode* [usá-los independentemente](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) um do outro. JSX é uma extensão de sintaxe, enquanto o React é uma biblioteca Javascript. -## Converting HTML to JSX {/*converting-html-to-jsx*/} +## Convertendo HTML em JSX {/*converting-html-to-jsx*/} -Suppose that you have some (perfectly valid) HTML: +Suponha que você possua um HTML (perfeitamente válido): ```html -

Hedy Lamarr's Todos

+

Ferramentas do Hedy Lamarr

Hedy Lamarr
    -
  • Invent new traffic lights -
  • Rehearse a movie scene -
  • Improve the spectrum technology +
  • Inventar novos semáforos +
  • Ensaiar uma cena de filme +
  • Melhorar a tecnologia espectral
``` -And you want to put it into your component: +E você quer colocar dentro do seu componente: ```js -export default function TodoList() { +export default function ListaDeTarefas() { return ( // ??? ) } ``` -If you copy and paste it as is, it will not work: +Se você copiar e colar como está, não funcionará: ```js -export default function TodoList() { +export default function ListaDeTarefas() { return ( - // This doesn't quite work! -

Hedy Lamarr's Todos

+ // Isso não funciona muito bem! +

Tarefas do Hedy Lamarr

Hedy Lamarr
    -
  • Invent new traffic lights -
  • Rehearse a movie scene -
  • Improve the spectrum technology +
  • Inventar novos semáforos +
  • Ensaiar uma cena de filme +
  • Melhorar a tecnologia espectral
); } @@ -122,29 +121,29 @@ img { height: 90px } -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. -Most of the time, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck! +Na maioria das vezes, as mensagens de erro na tela do React irão ajudá-lo a encontrar onde está o problema. Dê uma lida se você ficar travado! -## The Rules of JSX {/*the-rules-of-jsx*/} +## As Regras do JSX {/*the-rules-of-jsx*/} -### 1. Return a single root element {/*1-return-a-single-root-element*/} +### 1. Retornar um único elemento raiz {/*1-return-a-single-root-element*/} -To return multiple elements from a component, **wrap them with a single parent tag.** +Para retornar vários elementos de um componente, **envolva-os com uma única tag pai.** -For example, you can use a `
`: +Por exemplo, você pode usar uma `
`: ```js {1,11}
-

Hedy Lamarr's Todos

+

Tarefas do Hedy Lamarr

Hedy Lamarr
    ... @@ -153,11 +152,11 @@ For example, you can use a `
    `: ``` -If you don't want to add an extra `
    ` to your markup, you can write `<>` and `` instead: +Se você não quiser adicionar uma `
    ` extra à sua marcação, você pode escrever `<>` e `` em vez disso: ```js {1,11} <> -

    Hedy Lamarr's Todos

    +

    Tarefas do Hedy Lamarr

    Hedy Lamarr` to your markup, you can write `<>` and ``` -This empty tag is called a *[Fragment.](/reference/react/Fragment)* Fragments let you group things without leaving any trace in the browser HTML tree. +Essa tag vazia é chamada de *[Fragmento.](/reference/react/Fragment)* Os fragmentos permitem que você agrupe coisas sem deixar rastros na árvore HTML do navegador. -#### Why do multiple JSX tags need to be wrapped? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/} +#### Por que várias tags JSX precisam ser agrupadas? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/} -JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two JSX tags without wrapping them into another tag or a Fragment. +JSX se parece com HTML, mas por detrás das cortinas é transformado em objetos JavaScript simples. Você não pode retornar dois objetos de uma função sem envolvê-los em uma matriz. Isso explica por que você também não pode retornar duas tags JSX sem envolvê-las em outra tag ou Fragmento. -### 2. Close all the tags {/*2-close-all-the-tags*/} +### 2. Fechar todas as tags {/*2-close-all-the-tags*/} -JSX requires tags to be explicitly closed: self-closing tags like `` must become ``, and wrapping tags like `
  • oranges` must be written as `
  • oranges
    • `. +O JSX requer que as tags sejam explicitamente fechadas: tags de fechamento automático como `` devem se tornar ``, e tags de empacotamento como `
  • laranjas` devem ser escritas como `
  • laranjas
    • `. -This is how Hedy Lamarr's image and list items look closed: +É assim que a imagem e os itens da lista de Hedy Lamarr ficam fechados: ```js {2-6,8-10} <> Hedy Lamarr
      -
    • Invent new traffic lights
      • -
    • Rehearse a movie scene
      • -
    • Improve the spectrum technology
      • +
    • Inventar novos semáforos
      • +
    • Ensaiar uma cena de filme
      • +
    • Melhorar a tecnologia espectral
    ``` -### 3. camelCase all most of the things! {/*3-camelcase-salls-most-of-the-things*/} +### 3. camelCase em todas na maioria das coisas! {/*3-camelcase-salls-most-of-the-things*/} -JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`. +JSX se transforma em JavaScript e atributos escritos em JSX se tornam chaves de objetos JavaScript. Em seus próprios componentes, muitas vezes você desejará ler esses atributos em variáveis. Mas JavaScript tem limitações em nomes de variáveis. Por exemplo, seus nomes não podem conter hífens ou palavras reservadas como `class`. -This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): +É por isso que, no React, muitos atributos HTML e SVG são escritos em camelCase. Por exemplo, em vez de `stroke-width` você usa `strokeWidth`. Já que `class` é uma palavra reservada, no React você escreve `className`, nomeado após a [propriedade DOM correspondente](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): ```js {4} Hedy Lamarr ``` -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) -For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) attributes are written as in HTML with dashes. +Por razões históricas, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) e [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) são escritos como em HTML com hífens. -### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/} +### Dica: use um conversor JSX {/*pro-tip-use-a-jsx-converter*/} -Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own. +Converter todos esses atributos em marcação pode ser tedioso! Recomendamos o uso de um [conversor](https://transform.tools/html-to-jsx) para traduzir seu HTML e SVG existentes para JSX. Os conversores são muito úteis na prática, mas ainda vale a pena entender o que está acontecendo para que você possa escrever JSX confortavelmente por conta própria. -Here is your final result: +Aqui está seu resultado final: ```js -export default function TodoList() { +export default function ListaDeTarefas() { return ( <> -

    Hedy Lamarr's Todos

    +

    Tarefas do Hedy Lamarr

    Hedy Lamarr
      -
    • Invent new traffic lights
      • -
    • Rehearse a movie scene
      • -
    • Improve the spectrum technology
      • +
    • Inventar novos semáforos
      • +
    • Ensaiar uma cena de filme
      • +
    • Melhorar a tecnologia espectral
    ); @@ -258,11 +257,11 @@ img { height: 90px } -Now you know why JSX exists and how to use it in components: +Agora você sabe porque o JSX existe e como usá-lo em componentes: -* 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. +* 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. @@ -270,9 +269,9 @@ Now you know why JSX exists and how to use it in components: -#### Convert some HTML to JSX {/*convert-some-html-to-jsx*/} +#### Converta um HTML para JSX {/*convert-some-html-to-jsx*/} -This HTML was pasted into a component, but it's not valid JSX. Fix it: +Este HTML foi colado em um componente, mas não é um JSX válido. Conserte-o: @@ -280,12 +279,12 @@ This HTML was pasted into a component, but it's not valid JSX. Fix it: export default function Bio() { return (
    -

    Welcome to my website!

    +

    Bem-vindo ao meu site!

    -

    - You can find my thoughts here. +

    + Você pode encontrar meus pensamentos aqui.

    - And pictures of scientists! + E fotos de cientistas!

    ); } @@ -300,7 +299,7 @@ export default function Bio() { -webkit-text-fill-color: transparent; } -.summary { +.resumo { padding: 20px; border: 10px solid gold; } @@ -308,7 +307,7 @@ export default function Bio() {     -Whether to do it by hand or using the converter is up to you! +Se vai fazê-lo manualmente ou utilizando um conversor, você decide! @@ -319,12 +318,12 @@ export default function Bio() { return (
    -

    Welcome to my website!

    +

    Bem vindo ao meu site!

    -

    - You can find my thoughts here. +

    + Você pode encontrar meus pensamentos aqui.

    - And pictures of scientists! + E fotos de cientistas!

    ); @@ -340,7 +339,7 @@ export default function Bio() { -webkit-text-fill-color: transparent; } -.summary { +.resumo { padding: 20px; border: 10px solid gold; } From 5598c49592536d5c07db4c4aedf46cb6712696f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Fernandes?= Date: Mon, 24 Apr 2023 13:56:34 -0300 Subject: [PATCH 5/5] docs(pt-br): translate writing-markup-with-jsx page --- src/content/learn/writing-markup-with-jsx.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index ec334fa30..a983e77bf 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -5,6 +5,7 @@ title: Writing Markup with JSX *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. +