diff --git a/.env.production b/.env.production index e403f96b6..e79228e14 100644 --- a/.env.production +++ b/.env.production @@ -1 +1 @@ -NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT' \ No newline at end of file +NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT' diff --git a/.husky/pre-commit b/.husky/pre-commit index dc0378c34..d2ae35e84 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -yarn lint-staged \ No newline at end of file +yarn lint-staged diff --git a/GLOSSARY.md b/GLOSSARY.md new file mode 100644 index 000000000..19ff920aa --- /dev/null +++ b/GLOSSARY.md @@ -0,0 +1,176 @@ +# Guia de Estilo Universal + +Este documento descreve as regras que devem ser aplicadas para **todos** os idiomas. +Quando estiver se referindo ao próprio `React`, use `o React`. + +## IDs dos Títulos + +Todos os títulos possuem IDs explícitos como abaixo: + +```md +## Tente React {#try-react} +``` + +**Não** traduza estes IDs! Eles são usado para navegação e quebrarão se o documento for um link externo, como: + +```md +Veja a [seção iniciando](/getting-started#try-react) para mais informações. +``` + +✅ FAÇA: + +```md +## Tente React {#try-react} +``` + +❌ NÃO FAÇA: + +```md +## Tente React {#tente-react} +``` + +Isto quebraria o link acima. + +## Texto em Blocos de Código + +Mantenha o texto em blocos de código sem tradução, exceto para os comentários. Você pode optar por traduzir o texto em strings, mas tenha cuidado para não traduzir strings que se refiram ao código! + +Exemplo: + +```js +// Example +const element =

Hello, world

; +ReactDOM.render(element, document.getElementById('root')); +``` + +✅ FAÇA: + +```js +// Exemplo +const element =

Hello, world

; +ReactDOM.render(element, document.getElementById('root')); +``` + +✅ PERMITIDO: + +```js +// Exemplo +const element =

Olá mundo

; +ReactDOM.render(element, document.getElementById('root')); +``` + +❌ NÃO FAÇA: + +```js +// Exemplo +const element =

Olá mundo

; +// "root" se refere a um ID de elemento. +// NÃO TRADUZA +ReactDOM.render(element, document.getElementById('raiz')); +``` + +❌ DEFINITIVAMENTE NÃO FAÇA: + +```js +// Exemplo +const elemento =

Olá mundo

; +ReactDOM.renderizar(elemento, documento.obterElementoPorId('raiz')); +``` + +## Links Externos + +Se um link externo se referir a um artigo no [MDN] or [Wikipedia] e se houver uma versão traduzida em seu idioma em uma qualidade decente, opte por usar a versão traduzida. + +[mdn]: https://developer.mozilla.org/pt-BR/ +[wikipedia]: https://pt.wikipedia.org/wiki/Wikipédia:Página_principal + +Exemplo: + +```md +React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). +``` + +✅ OK: + +```md +Elementos React são [imutáveis](https://pt.wikipedia.org/wiki/Objeto_imutável). +``` + +Para links que não possuem tradução (Stack Overflow, vídeos do YouTube, etc.), simplesmente use o link original. + +## Traduções Comuns + +Sugestões de palavras e termos: + +| Palavra/Termo original | Sugestão | +| ---------------------- | -------------------------------------- | +| assertion | asserção | +| at the top level | na raiz | +| browser | navegador | +| bubbling | propagar | +| bug | erro | +| caveats | ressalvas | +| class component | componente de classe | +| class | classe | +| client | cliente | +| client-side | lado do cliente | +| container | contêiner | +| context | contexto | +| controlled component | componente controlado | +| debugging | depuração | +| DOM node | nó do DOM | +| event handler | manipulador de eventos (event handler) | +| function component | componente de função | +| handler | manipulador | +| helper function | função auxiliar | +| high-order components | componente de alta-ordem | +| key | chave | +| library | biblioteca | +| lowercase | minúscula(s) / caixa baixa | +| package | pacote | +| React element | Elemento React | +| React fragment | Fragmento React | +| render | renderizar (verb), renderizado (noun) | +| server | servidor | +| server-side | lado do servidor | +| siblings | irmãos | +| stateful component | componente com estado | +| stateful logic | lógica com estado | +| to assert | afirmar | +| to wrap | encapsular | +| troubleshooting | solução de problemas | +| uncontrolled component | componente não controlado | +| uppercase | maiúscula(s) / caixa alta | + +## Conteúdo que não deve ser traduzido + +- array +- arrow function +- bind +- bundle +- bundler +- callback +- camelCase +- DOM +- event listener +- framework +- hook +- log +- mock +- portal +- props +- ref +- release +- script +- single-page-apps +- state +- string +- string literal +- subscribe +- subscription +- template literal +- timestamps +- UI +- watcher +- widgets +- wrapper diff --git a/README.md b/README.md index 182192cb5..11d8b024c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# react.dev +# pt-br.react.dev -This repo contains the source code and documentation powering [react.dev](https://react.dev/). +This repo contains the source code and documentation powering [pt-br.react.dev](https://pt-br.react.dev/). ## Getting started @@ -10,12 +10,12 @@ This repo contains the source code and documentation powering [react.dev](https: 1. Node: any version starting with v16.8.0 or greater 1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) 1. A fork of the repo (for any contributions) -1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine +1. A clone of the [pt-br.react.dev repo](https://github.com/reactjs/pt-br.reactjs.org) on your local machine ### Installation -1. `cd react.dev` to go into the project root -3. `yarn` to install the website's npm dependencies +1. `cd pt-br.react.dev` to go into the project root +2. `yarn` to install the website's npm dependencies ### Running locally @@ -26,11 +26,11 @@ This repo contains the source code and documentation powering [react.dev](https: ### Guidelines -The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/react.dev/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections. +The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/pt-br.reactjs.org/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections. ### Create a branch -1. `git checkout main` from any folder in your local `react.dev` repository +1. `git checkout main` from any folder in your local `pt-br.react.dev` repository 1. `git pull origin main` to ensure you have the latest main code 1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch @@ -38,9 +38,9 @@ The documentation is divided into several sections with a different tone and pur 1. Follow the ["Running locally"](#running-locally) instructions 1. Save the files and check in the browser - 1. Changes to React components in `src` will hot-reload - 1. Changes to markdown files in `content` will hot-reload - 1. If working with plugins, you may need to remove the `.cache` directory and restart the server +1. Changes to React components in `src` will hot-reload +1. Changes to markdown files in `content` will hot-reload +1. If working with plugins, you may need to remove the `.cache` directory and restart the server ### Test the change @@ -51,13 +51,14 @@ The documentation is divided into several sections with a different tone and pur 1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes 1. `git push my-fork-name the-name-of-my-branch` -1. Go to the [react.dev repo](https://github.com/reactjs/react.dev) and you should see recently pushed branches. +1. Go to the [pt-br.react.dev repo](https://github.com/reactjs/pt-br.reactjs.org) and you should see recently pushed branches. 1. Follow GitHub's instructions. 1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub. ## Translation -If you are interested in translating `react.dev`, please see the current translation efforts [here](https://github.com/reactjs/react.dev/issues/4135). +If you are interested in translating `pt-br.react.dev`, please see the current translation efforts [here](https://github.com/reactjs/pt-br.reactjs.org/issues/555). ## License -Content submitted to [react.dev](https://react.dev/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md) file. + +Content submitted to [pt-br.react.dev](https://pt-br.react.dev/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/reactjs/pt-br.reactjs.org/blob/main/LICENSE-DOCS.md) file. diff --git a/package.json b/package.json index 359f30d3e..473faf53e 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,11 @@ "classnames": "^2.2.6", "debounce": "^1.2.1", "github-slugger": "^1.3.0", +<<<<<<< HEAD + "next": "15.4.8", +======= "next": "15.1.12", +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a "next-remote-watch": "^1.0.0", "parse-numeric-range": "^1.2.0", "raw-loader": "^4.0.2", diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index d11e1469d..01f0ae336 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -320,60 +320,64 @@ export function Footer() {
- Learn React + Aprenda React - Quick Start - Installation + Início Rápido + Instalação - Describing the UI + Descrevendo a UI - Adding Interactivity + Adicionando Interatividade + + + Gerenciamento de estado + + + Saídas de Emergência - Managing State - Escape Hatches
API Reference - React APIs - React DOM APIs + APIs do React + APIs do React DOM
- Community + Comunidade - Code of Conduct + Código de Conduta - Meet the Team + Conheça o Time - Docs Contributors + Contribuidores da Documentação - Acknowledgements + Agradecimentos
- More + Mais Blog React Native - Privacy + Privacidade - Terms + Termos
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index f9b785db4..1f6e73917 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -143,7 +143,7 @@ export function HomeContent() { React

- The library for web and native user interfaces + A biblioteca para web e interfaces de usuário nativas

- Learn React + label="Aprenda React"> + Aprenda React - API Reference + label="API Referência"> + Referência das APIs
-
Create user interfaces from components
+
Crie interfaces de usuário a partir de componentes
- React lets you build user interfaces out of individual pieces - called components. Create your own React components like{' '} - Thumbnail, LikeButton, and{' '} - Video. Then combine them into entire screens, pages, - and apps. + O React permite que você crie interfaces de usuário a partir de + peças individuais chamadas de componentes. Crie seus próprios + componentes React como Thumbnail,{' '} + LikeButton, e Video. Em seguida, + combine-os em telas inteiras, páginas, e aplicativos.
@@ -181,22 +181,22 @@ export function HomeContent() {
- Whether you work on your own or with thousands of other - developers, using React feels the same. It is designed to let you - seamlessly combine components written by independent people, - teams, and organizations. + Quer você trabalhe sozinho ou com milhares de outros + desenvolvedores, é possível usar o React da mesma maneira. Ele foi + projetado para permitir que você combine componentes escritos por + pessoas, equipes e organizações independentes.
-
Write components with code and markup
+
Escrever componentes com código e marcação
- React components are JavaScript functions. Want to show some - content conditionally? Use an if statement. - Displaying a list? Try array map(). Learning React is - learning programming. + Componentes React são funções JavaScript. Quer mostrar alguns + conteúdos condicionalmente? Utilize if. Exibindo uma + lista? Tente um array map(). Aprender React é + aprender programação.
@@ -204,22 +204,22 @@ export function HomeContent() {
- This markup syntax is called JSX. It is a JavaScript syntax - extension popularized by React. Putting JSX markup close to - related rendering logic makes React components easy to create, - maintain, and delete. + Essa sintaxe de tags é chamada de JSX. É uma extensão de sintaxe + JavaScript popularizada pelo React. Colocar tags JSX em conjunto + com a lógica de renderização relacionada torna os componentes do + React fáceis de criar, manter e excluir.
-
Add interactivity wherever you need it
+
Adicione interatividade onde você precisar
- React components receive data and return what should appear on the - screen. You can pass them new data in response to an interaction, - like when the user types into an input. React will then update the - screen to match the new data. + Os componentes do React recebem dados e retornam o que deve + aparecer na tela. Você pode passar a eles novos dados em resposta + a uma interação, como quando o usuário digita em uma entrada. O + React atualizará a tela pra corresponder aos novos dados.
@@ -227,16 +227,16 @@ export function HomeContent() {
- You don’t have to build your whole page in React. Add React to - your existing HTML page, and render interactive React components - anywhere on it. + Você não precisa construir sua página inteira em React. Adicione + React à sua página HTML existente e renderize componentes React + interativos em qualquer lugar nela.
- Add React to your page + Adicione o React à sua página
@@ -245,15 +245,24 @@ export function HomeContent() {
- Go full-stack
- with a framework + Full-stack
+ com um framework
+<<<<<<< HEAD + React é uma biblioteca. Ele permite que você junte componentes, + mas não prescreve como fazer roteamento e busca de dados. Para + construir um aplicativo inteiro com React, recomendamos um + framework React full stack como{' '} + Next.js ou{' '} + Remix. +======= React is a library. It lets you put components together, but it doesn’t prescribe how to do routing and data fetching. To build an entire app with React, we recommend a full-stack React framework like Next.js or{' '} React Router. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
@@ -261,17 +270,22 @@ export function HomeContent() {
- React is also an architecture. Frameworks that implement it let - you fetch data in asynchronous components that run on the server - or even during the build. Read data from a file or a database, and - pass it down to your interactive components. + React também é uma arquitetura. Os frameworks que o implementam + permitem buscar dados em componentes assíncronos que rodam no + servidor ou até mesmo durante o build. Leia os dados de um arquivo + ou banco de dados e passe-os para seus componentes interativos.
+ Inicie com um framework +======= href="/learn/creating-a-react-app"> Get started with a framework +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
@@ -279,12 +293,13 @@ export function HomeContent() {
-
Use the best from every platform
+
Use o melhor de cada plataforma
- People love web and native apps for different reasons. React - lets you build both web apps and native apps using the same - skills. It leans upon each platform’s unique strengths to let - your interfaces feel just right on every platform. + As pessoas adoram aplicativos da Web e nativos por diferentes + motivos. O React permite criar aplicativos da web e aplicativos + nativos usando as mesmas habilidades. Ele se baseia nos pontos + fortes exclusivos de cada plataforma para permitir que suas + interfaces pareçam perfeitas em todas as plataformas.
@@ -298,15 +313,17 @@ export function HomeContent() {

- Stay true to the web + Mantenha-se fiel à web

- People expect web app pages to load fast. On the server, - React lets you start streaming HTML while you’re still - fetching data, progressively filling in the remaining - content before any JavaScript code loads. On the client, - React can use standard web APIs to keep your UI - responsive even in the middle of rendering. + As pessoas esperam que as páginas de aplicativos da web + sejam carregadas rapidamente. No servidor, o React + permite iniciar o streaming de HTML enquanto ainda está + buscando dados, preenchendo progressivamente o conteúdo + restante antes que qualquer código JavaScript seja + carregado. No cliente, o React pode usar APIs da Web + padrão para manter sua UI responsiva mesmo no meio da + renderização.

@@ -384,21 +401,22 @@ export function HomeContent() {

- Go truly native + Torne-se verdadeiramente nativo

- People expect native apps to look and feel like their - platform.{' '} + As pessoas esperam que os aplicativos nativos se + pareçam com sua plataforma.{' '} React Native {' '} - and{' '} + e{' '} Expo{' '} - let you build apps in React for Android, iOS, and - more. They look and feel native because their UIs{' '} - are truly native. It’s not a web view—your - React components render real Android and iOS views - provided by the platform. + permite que você crie aplicativos em React para + Android, iOS e muito mais. Eles parecem nativos porque + suas interfaces de usuário são realmente + nativas. Não é uma visualização da Web. Seus + componentes React renderizam visualizações reais de + Android e iOS fornecidas pela plataforma.

@@ -408,14 +426,15 @@ export function HomeContent() {
- With React, you can be a web and a native developer. Your - team can ship to many platforms without sacrificing the user - experience. Your organization can bridge the platform silos, and - form teams that own entire features end-to-end. + Com React, você pode ser um desenvolvedor web e nativo. + Sua equipe pode fazer deploy para várias plataformas sem + sacrificar a experiência do usuário. Sua organização pode unir + os silos de plataforma e formar equipes que possuem + funcionalidades de ponta a ponta.
- Build for native platforms + Crie para plataformas nativas
@@ -426,23 +445,24 @@ export function HomeContent() {
-
Upgrade when the future is ready
+
Atualize quando o futuro estiver pronto
- React approaches changes with care. Every React commit is - tested on business-critical surfaces with over a billion - users. Over 100,000 React components at Meta help validate - every migration strategy. + React aborda as mudanças com cuidado. Cada commit do React é + testado em superfícies críticas para os negócios com mais de + bilhão de usuários. Mais de 100.000 componentes React na Meta + ajudam a validar todas as estratégias de migração.
- The React team is always researching how to improve React. - Some research takes years to pay off. React has a high bar - for taking a research idea into production. Only proven - approaches become a part of React. + A equipe do React está sempre pesquisando como melhorar o + React. Algumas pesquisas levam anos para compensar. O React + tem um alto padrão para colocar uma ideia de pesquisa em + produção. Somente abordagens comprovadas se tornam parte do + React.
- Read more React news + Leia mais notícias do React
@@ -450,7 +470,7 @@ export function HomeContent() {

- Latest React News + Últimas notícias do React

@@ -468,7 +488,7 @@ export function HomeContent() {
- Read more React news + Leia mais notícias do React
@@ -481,13 +501,13 @@ export function HomeContent() {
- Join a community
- of millions + Junte-se a uma comunidade
+ de milhões
- You’re not alone. Two million developers from all over the - world visit the React docs every month. React is something - that people and teams can agree on. + Você não está sozinho. Dois milhões de desenvolvedores de todo + o mundo vistam os documentos do React todos os meses. React é + algo em que pessoas e equipes podem concordar.
@@ -495,13 +515,14 @@ export function HomeContent() {
- This is why React is more than a library, an architecture, or - even an ecosystem. React is a community. It’s a place where - you can ask for help, find opportunities, and meet new - friends. You will meet both developers and designers, - beginners and experts, researchers and artists, teachers and - students. Our backgrounds may be very different, but React - lets us all create user interfaces together. + É por isso que o React é mais do que uma biblioteca, uma + arquitetura, ou mesmo um ecossistema. React é uma comunidade. + É um lugar onde você pode pedir ajuda, encontrar oportunidades + e fazer novos amigos. Você conhecerá desenvolvedores e + designers, iniciantes e especialistas, pesquisadores e + artistas, professores e alunos. Nossas origens podem ser muito + diferentes, mas o React nos permite criar interfaces de + usuário juntos.
@@ -518,15 +539,15 @@ export function HomeContent() {
- Welcome to the
- React community + Bem-vindo à
+ comunidade React
- Get Started + label="Faça o tutorial"> + Iniciar
@@ -678,35 +699,35 @@ const reactConf2019Cover = '/images/home/conf2019/cover.svg'; const communityImages = [ { src: '/images/home/community/react_conf_fun.webp', - alt: 'People singing karaoke at React Conf', + alt: 'Pessoas cantando karaokê no React Conf', }, { src: '/images/home/community/react_india_sunil.webp', - alt: 'Sunil Pai speaking at React India', + alt: 'Sunil Pai falando no React India', }, { src: '/images/home/community/react_conf_hallway.webp', - alt: 'A hallway conversation between two people at React Conf', + alt: 'Uma conversa de corredor entre duas pessoas no React Conf', }, { src: '/images/home/community/react_india_hallway.webp', - alt: 'A hallway conversation at React India', + alt: 'Uma conversa de corredor no React India', }, { src: '/images/home/community/react_conf_elizabet.webp', - alt: 'Elizabet Oliveira speaking at React Conf', + alt: 'Elizabet Oliveira falando no React Conf', }, { src: '/images/home/community/react_india_selfie.webp', - alt: 'People taking a group selfie at React India', + alt: 'Pessoas tirando uma selfie em grupo no React India', }, { src: '/images/home/community/react_conf_nat.webp', - alt: 'Nat Alison speaking at React Conf', + alt: 'Nat Alison falando no React Conf', }, { src: '/images/home/community/react_india_team.webp', - alt: 'Organizers greeting attendees at React India', + alt: 'Organizadores cumprimentando os participantes no React India', }, ]; @@ -946,8 +967,8 @@ function Example1() {