- Ready to learn this topic?
+ Pronto para aprender sobre este assunto?
{children}
{path ? (
diff --git a/src/components/SocialBanner.tsx b/src/components/SocialBanner.tsx
index ae87d2050..bb7d384a6 100644
--- a/src/components/SocialBanner.tsx
+++ b/src/components/SocialBanner.tsx
@@ -7,9 +7,9 @@ import {useRef, useEffect} from 'react';
import cn from 'classnames';
import {ExternalLink} from './ExternalLink';
-const bannerText = 'Join us for React Conf on Oct 7-8.';
+const bannerText = 'Participe da conferência React nos dias 7 e 8 de outubro.';
const bannerLink = 'https://conf.react.dev/';
-const bannerLinkText = 'Learn more.';
+const bannerLinkText = 'Saiba mais.';
export default function SocialBanner() {
const ref = useRef(null);
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
index 2e63a81f6..fd676e388 100644
--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -7,15 +7,15 @@ import type {RouteTag} from './Layout/getRouteMeta';
const variantMap = {
foundation: {
- name: 'Foundation',
+ name: 'Fundamentos',
classes: 'bg-yellow-50 text-white',
},
intermediate: {
- name: 'Intermediate',
+ name: 'Intermediário',
classes: 'bg-purple-40 text-white',
},
advanced: {
- name: 'Advanced',
+ name: 'Avançado',
classes: 'bg-green-40 text-white',
},
experimental: {
@@ -23,7 +23,7 @@ const variantMap = {
classes: 'bg-ui-orange text-white',
},
deprecated: {
- name: 'Deprecated',
+ name: 'Obsoleto',
classes: 'bg-red-40 text-white',
},
};
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index ed1917352..ccd2b462b 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -526,34 +526,33 @@ Leia **[Mantendo Seus Componentes Puros](/learn/keeping-components-pure)** para
-## Your UI as a tree {/*your-ui-as-a-tree*/}
+## Sua interface de usuário como uma árvore {/*your-ui-as-a-tree*/}
-React uses trees to model the relationships between components and modules.
+O React utiliza árvores para modelar as relações entre componentes e módulos.
-A React render tree is a representation of the parent and child relationship between components.
+Uma árvore de renderização React é uma representação da relação pai-filho entre componentes.
-
+
-An example React render tree.
+Um exemplo de árvore de renderização React.
-Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
+Os componentes próximos ao topo da árvore, perto do componente raiz, são considerados componentes de nível superior. Componentes sem componentes filhos são componentes folha. Essa categorização de componentes é útil para entender o fluxo de dados e o desempenho de renderização.
-Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree.
+Modelar o relacionamento entre módulos JavaScript é outra maneira útil de entender seu aplicativo. Chamamos isso de árvore de dependências de módulos.
-An example module dependency tree.
+Um exemplo de árvore de dependências de módulos.
-A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues.
+Uma árvore de dependências é frequentemente usada por ferramentas de compilação para agrupar todo o código JavaScript relevante para o cliente baixar e renderizar. Um pacote muito grande prejudica a experiência do usuário em aplicativos React. Compreender a árvore de dependências do módulo é útil para depurar esses problemas.
-Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
-
+Leia **[Sua interface de usuário como uma árvore](/learn/understanding-your-ui-as-a-tree)** Aprenda como criar árvores de dependências de renderização e de módulos para um aplicativo React e como elas são modelos mentais úteis para melhorar a experiência do usuário e o desempenho.
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 2d8b7cd85..18cb531b9 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -62,7 +62,7 @@
"canary": true,
"routes": [
{
- "title": "Introduction",
+ "title": "Introdução",
"path": "/learn/react-compiler/introduction"
},
{
@@ -85,8 +85,8 @@
},
{
"title": "Descrevendo a IU",
- "tags": [],
"path": "/learn/describing-the-ui",
+ "tags": ["foundation"],
"routes": [
{
"title": "Seu Primeiro Componente",
@@ -121,7 +121,7 @@
"path": "/learn/keeping-components-pure"
},
{
- "title": "Your UI as a Tree",
+ "title": "Sua interface de usuário como uma árvore",
"path": "/learn/understanding-your-ui-as-a-tree"
}
]