From 976cc1eb9bf5ef6e3e4eced8da27ab36308ec83b Mon Sep 17 00:00:00 2001 From: Thales Coutinho Date: Thu, 15 Aug 2024 19:04:01 -0300 Subject: [PATCH 01/10] issue #555 - traducao da pagina start-a-new-react-project --- src/content/learn/start-a-new-react-project.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 8d04fc6a0..85cfad11c 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -11,29 +11,29 @@ Se você deseja construir um novo aplicativo ou site totalmente com React, recom Você pode usar o React sem uma estrutura, mas descobrimos que a maioria dos aplicativos e sites eventualmente criam soluções para problemas comuns, como divisão de código, roteamento, busca de dados e geração de HTML. Esses problemas são comuns a todas as bibliotecas de UI, não apenas ao React. -By starting with a framework, you can get started with React quickly, and avoid essentially building your own framework later. +Ao começar com um framework, você pode começar com React mais rapidamente, além de evitar criar seu próprio framework mais tarde. -#### Can I use React without a framework? {/*can-i-use-react-without-a-framework*/} +#### Posso usar o React sem um framework? {/*can-i-use-react-without-a-framework*/} -You can definitely use React without a framework--that's how you'd [use React for a part of your page.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **However, if you're building a new app or a site fully with React, we recommend using a framework.** +Você definitivamente pode usar o React sem um Framework--é assim que você faria [Usando o React para uma parte da sua página existente.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Entretanto, se voce esta criando um novo aplicativo ou site com React, nós recomendamos usar um framework.** -Here's why. +Veja o porquê. -Even if you don't need routing or data fetching at first, you'll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early--either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky. +Mesmo que você não precise de roteamento ou busca de dados a princípio, você possivelmente desejará adicionar alguma biblioteca para isso futuramente. À medida que seu pacote JavaScript cresce com cada novo recurso, você pode ter que descobrir como dividir o código para cada rota individualmente. À medida que suas necessidades de busca de dados se tornam mais complexas, é provável que você encontre uma cascatas de rede cliente-servidor que fazem seu aplicativo parecer muito lento. Conforme sua aplicação recebe mais usuários com más condições de rede e dispositivos de baixo custo, você pode precisar gerar HTML a partir de seus componentes para exibir o conteúdo antecipadamente, seja no servidor, ou durante o tempo de compilação. Alterar alguma configuração para executar parte do seu código no servidor ou durante tempo de compilação pode ser bem complicado. -**These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on.** To solve these problems on your own, you'll need to integrate your bundler with your router and with your data fetching library. It's not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You'll want to send down the minimal amount of app code but do so in a single client–server roundtrip, in parallel with any data required for the page. You'll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work. +**Esses problemas não são específicos do React. É por isso que o Svelte tem o SvelteKit, o Vue tem o Nuxt, e assim por diante.** Para resolver esses problemas por conta própria, você precisará integrar seu *bundler* com sua biblioteca de roteamento e com sua biblioteca de busca de dados. Não é difícil fazer uma configuração inicial funcionar, mas há muitas sutilezas envolvidas na criação de um aplicativo que carrega rapidamente, principalmente quando este cresce ao longo do tempo. Você vai querer enviar a quantidade mínima de código do aplicativo em uma única viagem cliente-servidor, mas ao mesmo tempo com todos os dados necessários para a página. Provavelmente você desejará que a página seja interativa antes mesmo de seu código JavaScript ser executado, para ter um carregamento progressivo aprimorado. Você pode querer gerar uma pasta de arquivos HTML totalmente estáticos para suas páginas de marketing que podem ser hospedadas em qualquer lugar e ainda funcionar com JavaScript desabilitado. Desenvolver essas capacidades por si mesmo dá muito trabalho. -**React frameworks on this page solve problems like these by default, with no extra work from your side.** They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it's easier to get stuck on unsupported dependency versions, and you'll essentially end up creating your own framework—albeit one with no community or upgrade path (and if it's anything like the ones we've made in the past, more haphazardly designed). +**Os *frameworks* React nesta página resolvem problemas como esses por padrão, sem nenhum trabalho extra da sua parte.** Eles permitem que você comece de forma bem enxuta e depois dimensione seu aplicativo conforme suas necessidades. Cada React framework tem uma comunidade, então encontrar respostas e atualizar ferramentas é mais fácil. Frameworks fornecem estrutura ao seu código, ajudando você e outros reaproveitar contexto e habilidades entre diferentes projetos. Por outro lado, com uma configuração personalizada, é mais fácil ficar preso em versões de dependências sem suporte, e você acabará criando sua própria estrutura, porem sem uma comunidade ou meios de atualizar as dependências (e talvez seja alguma coisa parecida com oque fizemos no passado, porém projetado de forma mais aleatória). -If your app has unusual constraints not served well by these frameworks, or you prefer to solve these problems yourself, you can roll your own custom setup with React. Grab `react` and `react-dom` from npm, set up your custom build process with a bundler like [Vite](https://vitejs.dev/) or [Parcel](https://parceljs.org/), and add other tools as you need them for routing, static generation or server-side rendering, and more. +Se o seu aplicativo tiver restrições incomuns que não são bem atendidas por esses frameworks, ou você prefere resolver esses problemas sozinho, você pode criar sua própria configuração personalizada com React. Use `react` e `react-dom` apartir do npm, configure seu processo de construção personalizado com um *bundler* como [Vite](https://vitejs.dev/) ou [Parcel](https://parceljs.org/), e adicione outras ferramentas conforme necessário para roteamento, geração estática ou renderização do lado do servidor e muito mais. ## *Frameworks* baseados em React com qualidade de mercado {/*production-grade-react-frameworks*/} -These frameworks support all the features you need to deploy and scale your app in production and are working towards supporting our [full-stack architecture vision](#which-features-make-up-the-react-teams-full-stack-architecture-vision). All of the frameworks we recommend are open source with active communities for support, and can be deployed to your own server or a hosting provider. If you’re a framework author interested in being included on this list, [please let us know](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+). +Esses frameworks oferecem suporte a todos os recursos necessários para implantar e dimensionar seu aplicativo em produção e estão trabalhando para dar suporte à nossa [visão de arquitetura full-stack](#which-features-make-up-the-react-teams-full-stack-architecture-vision). Todos os frameworks que recomendamos são de código aberto com comunidades ativas para suporte, e pode ser implantado em seu próprio servidor ou em um provedor de hospedagem. Se você é um autor de um framework e está interessado em ser incluído nesta lista, [por favor nos avise](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+). ### Next.js {/*nextjs-pages-router*/} From 59facbcf1c1e5cbd1cb8bd3b83dd8d9a2e319bb9 Mon Sep 17 00:00:00 2001 From: Thales Martim Coutinho <79290513+Thales-Coutinho@users.noreply.github.com> Date: Tue, 20 Aug 2024 16:36:26 -0300 Subject: [PATCH 02/10] Update src/content/learn/start-a-new-react-project.md Co-authored-by: Mateus Caltabiano --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 85cfad11c..56122436e 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -11,7 +11,7 @@ Se você deseja construir um novo aplicativo ou site totalmente com React, recom Você pode usar o React sem uma estrutura, mas descobrimos que a maioria dos aplicativos e sites eventualmente criam soluções para problemas comuns, como divisão de código, roteamento, busca de dados e geração de HTML. Esses problemas são comuns a todas as bibliotecas de UI, não apenas ao React. -Ao começar com um framework, você pode começar com React mais rapidamente, além de evitar criar seu próprio framework mais tarde. +Utilizando uma estrutura, você pode começar a usar o React rapidamente, além de evitar criar sua própria estrutura mais tarde. From fe264d4f732e9f1bbb43a76b66584b94a6178f36 Mon Sep 17 00:00:00 2001 From: Thales Martim Coutinho <79290513+Thales-Coutinho@users.noreply.github.com> Date: Tue, 20 Aug 2024 16:36:49 -0300 Subject: [PATCH 03/10] Update src/content/learn/start-a-new-react-project.md Co-authored-by: Mateus Caltabiano --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 56122436e..2ed7675b0 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -15,7 +15,7 @@ Utilizando uma estrutura, você pode começar a usar o React rapidamente, além -#### Posso usar o React sem um framework? {/*can-i-use-react-without-a-framework*/} +#### Posso usar o React sem uma estrutura? {/*can-i-use-react-without-a-framework*/} Você definitivamente pode usar o React sem um Framework--é assim que você faria [Usando o React para uma parte da sua página existente.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Entretanto, se voce esta criando um novo aplicativo ou site com React, nós recomendamos usar um framework.** From d3374ca7105ac13a2f2c4246c177b77347ae0831 Mon Sep 17 00:00:00 2001 From: Thales Martim Coutinho <79290513+Thales-Coutinho@users.noreply.github.com> Date: Tue, 20 Aug 2024 16:39:31 -0300 Subject: [PATCH 04/10] Update src/content/learn/start-a-new-react-project.md Co-authored-by: Mateus Caltabiano --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 2ed7675b0..cfa6cfa58 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -17,7 +17,7 @@ Utilizando uma estrutura, você pode começar a usar o React rapidamente, além #### Posso usar o React sem uma estrutura? {/*can-i-use-react-without-a-framework*/} -Você definitivamente pode usar o React sem um Framework--é assim que você faria [Usando o React para uma parte da sua página existente.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Entretanto, se voce esta criando um novo aplicativo ou site com React, nós recomendamos usar um framework.** +Você definitivamente pode usar o React sem uma estrutura--é assim que você faria [se utilizasse o React para uma parte da sua página.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Entretanto, se você está criando uma nova aplicação ou site inteiramente com React, recomendamos a utilização de uma estrutura.** Veja o porquê. From 3adc447ac4dd9d578f04af54feb7d385bb80f316 Mon Sep 17 00:00:00 2001 From: Thales Martim Coutinho <79290513+Thales-Coutinho@users.noreply.github.com> Date: Tue, 20 Aug 2024 16:40:17 -0300 Subject: [PATCH 05/10] Update src/content/learn/start-a-new-react-project.md Co-authored-by: Mateus Caltabiano --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index cfa6cfa58..4721f455f 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -21,7 +21,7 @@ Você definitivamente pode usar o React sem uma estrutura--é assim que você fa Veja o porquê. -Mesmo que você não precise de roteamento ou busca de dados a princípio, você possivelmente desejará adicionar alguma biblioteca para isso futuramente. À medida que seu pacote JavaScript cresce com cada novo recurso, você pode ter que descobrir como dividir o código para cada rota individualmente. À medida que suas necessidades de busca de dados se tornam mais complexas, é provável que você encontre uma cascatas de rede cliente-servidor que fazem seu aplicativo parecer muito lento. Conforme sua aplicação recebe mais usuários com más condições de rede e dispositivos de baixo custo, você pode precisar gerar HTML a partir de seus componentes para exibir o conteúdo antecipadamente, seja no servidor, ou durante o tempo de compilação. Alterar alguma configuração para executar parte do seu código no servidor ou durante tempo de compilação pode ser bem complicado. +Mesmo que você não precise de roteamento ou busca de dados a princípio, você possivelmente desejará adicionar alguma biblioteca para isso futuramente. À medida que seu pacote JavaScript cresce com cada novo recurso, você pode ter que descobrir como dividir o código para cada rota individualmente. À medida que suas necessidades de busca de dados se tornam mais complexas, é provável que você se depare com uma enxurrada de requisições cliente-servidor que fazem seu aplicativo parecer muito lento. Conforme sua aplicação recebe mais usuários com más condições de rede e dispositivos de baixo custo, você pode precisar gerar HTML a partir de seus componentes para exibir o conteúdo antecipadamente--seja no servidor, ou durante o tempo de compilação. Alterar alguma configuração para executar parte do seu código no servidor ou durante a compilação pode ser bem complicado. **Esses problemas não são específicos do React. É por isso que o Svelte tem o SvelteKit, o Vue tem o Nuxt, e assim por diante.** Para resolver esses problemas por conta própria, você precisará integrar seu *bundler* com sua biblioteca de roteamento e com sua biblioteca de busca de dados. Não é difícil fazer uma configuração inicial funcionar, mas há muitas sutilezas envolvidas na criação de um aplicativo que carrega rapidamente, principalmente quando este cresce ao longo do tempo. Você vai querer enviar a quantidade mínima de código do aplicativo em uma única viagem cliente-servidor, mas ao mesmo tempo com todos os dados necessários para a página. Provavelmente você desejará que a página seja interativa antes mesmo de seu código JavaScript ser executado, para ter um carregamento progressivo aprimorado. Você pode querer gerar uma pasta de arquivos HTML totalmente estáticos para suas páginas de marketing que podem ser hospedadas em qualquer lugar e ainda funcionar com JavaScript desabilitado. Desenvolver essas capacidades por si mesmo dá muito trabalho. From 9c565734f6047fe32d00b24fdc4c08204bb48997 Mon Sep 17 00:00:00 2001 From: Thales Martim Coutinho <79290513+Thales-Coutinho@users.noreply.github.com> Date: Tue, 20 Aug 2024 16:42:49 -0300 Subject: [PATCH 06/10] Update src/content/learn/start-a-new-react-project.md Co-authored-by: Mateus Caltabiano --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 4721f455f..da1e83f6f 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -23,7 +23,7 @@ Veja o porquê. Mesmo que você não precise de roteamento ou busca de dados a princípio, você possivelmente desejará adicionar alguma biblioteca para isso futuramente. À medida que seu pacote JavaScript cresce com cada novo recurso, você pode ter que descobrir como dividir o código para cada rota individualmente. À medida que suas necessidades de busca de dados se tornam mais complexas, é provável que você se depare com uma enxurrada de requisições cliente-servidor que fazem seu aplicativo parecer muito lento. Conforme sua aplicação recebe mais usuários com más condições de rede e dispositivos de baixo custo, você pode precisar gerar HTML a partir de seus componentes para exibir o conteúdo antecipadamente--seja no servidor, ou durante o tempo de compilação. Alterar alguma configuração para executar parte do seu código no servidor ou durante a compilação pode ser bem complicado. -**Esses problemas não são específicos do React. É por isso que o Svelte tem o SvelteKit, o Vue tem o Nuxt, e assim por diante.** Para resolver esses problemas por conta própria, você precisará integrar seu *bundler* com sua biblioteca de roteamento e com sua biblioteca de busca de dados. Não é difícil fazer uma configuração inicial funcionar, mas há muitas sutilezas envolvidas na criação de um aplicativo que carrega rapidamente, principalmente quando este cresce ao longo do tempo. Você vai querer enviar a quantidade mínima de código do aplicativo em uma única viagem cliente-servidor, mas ao mesmo tempo com todos os dados necessários para a página. Provavelmente você desejará que a página seja interativa antes mesmo de seu código JavaScript ser executado, para ter um carregamento progressivo aprimorado. Você pode querer gerar uma pasta de arquivos HTML totalmente estáticos para suas páginas de marketing que podem ser hospedadas em qualquer lugar e ainda funcionar com JavaScript desabilitado. Desenvolver essas capacidades por si mesmo dá muito trabalho. +**Esses problemas não são específicos do React. É por isso que o Svelte tem o SvelteKit, o Vue tem o Nuxt, e assim por diante.** Para solucionar esses problemas por conta própria, você precisará integrar seu *bundler* com sua biblioteca de roteamento e com sua biblioteca de busca de dados. Não é difícil fazer uma configuração inicial funcionar, mas há muitas sutilezas envolvidas na criação de uma aplicação que carrega rapidamente mesmo enquanto cresce ao longo do tempo. Você vai querer enviar a mínima quantidade de código da aplicação em uma única viagem cliente-servidor, ao mesmo tempo que todos os dados necessários para a página. Provavelmente, você desejará que a página seja interativa antes mesmo que seu código JavaScript ser executado, para ter um carregamento progressivo aprimorado. Você pode querer gerar uma pasta de arquivos HTML totalmente estáticos para suas páginas de marketing que podem ser hospedadas em qualquer lugar e ainda funcionar com JavaScript desabilitado. Desenvolver essas capacidades você mesmo dá muito trabalho. **Os *frameworks* React nesta página resolvem problemas como esses por padrão, sem nenhum trabalho extra da sua parte.** Eles permitem que você comece de forma bem enxuta e depois dimensione seu aplicativo conforme suas necessidades. Cada React framework tem uma comunidade, então encontrar respostas e atualizar ferramentas é mais fácil. Frameworks fornecem estrutura ao seu código, ajudando você e outros reaproveitar contexto e habilidades entre diferentes projetos. Por outro lado, com uma configuração personalizada, é mais fácil ficar preso em versões de dependências sem suporte, e você acabará criando sua própria estrutura, porem sem uma comunidade ou meios de atualizar as dependências (e talvez seja alguma coisa parecida com oque fizemos no passado, porém projetado de forma mais aleatória). From c374b7dd2f7bfb5a58642a23fd4ddaca47b30b4d Mon Sep 17 00:00:00 2001 From: Thales Martim Coutinho <79290513+Thales-Coutinho@users.noreply.github.com> Date: Tue, 20 Aug 2024 16:44:16 -0300 Subject: [PATCH 07/10] Update src/content/learn/start-a-new-react-project.md Co-authored-by: Mateus Caltabiano --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index da1e83f6f..aa931d9be 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -25,7 +25,7 @@ Mesmo que você não precise de roteamento ou busca de dados a princípio, você **Esses problemas não são específicos do React. É por isso que o Svelte tem o SvelteKit, o Vue tem o Nuxt, e assim por diante.** Para solucionar esses problemas por conta própria, você precisará integrar seu *bundler* com sua biblioteca de roteamento e com sua biblioteca de busca de dados. Não é difícil fazer uma configuração inicial funcionar, mas há muitas sutilezas envolvidas na criação de uma aplicação que carrega rapidamente mesmo enquanto cresce ao longo do tempo. Você vai querer enviar a mínima quantidade de código da aplicação em uma única viagem cliente-servidor, ao mesmo tempo que todos os dados necessários para a página. Provavelmente, você desejará que a página seja interativa antes mesmo que seu código JavaScript ser executado, para ter um carregamento progressivo aprimorado. Você pode querer gerar uma pasta de arquivos HTML totalmente estáticos para suas páginas de marketing que podem ser hospedadas em qualquer lugar e ainda funcionar com JavaScript desabilitado. Desenvolver essas capacidades você mesmo dá muito trabalho. -**Os *frameworks* React nesta página resolvem problemas como esses por padrão, sem nenhum trabalho extra da sua parte.** Eles permitem que você comece de forma bem enxuta e depois dimensione seu aplicativo conforme suas necessidades. Cada React framework tem uma comunidade, então encontrar respostas e atualizar ferramentas é mais fácil. Frameworks fornecem estrutura ao seu código, ajudando você e outros reaproveitar contexto e habilidades entre diferentes projetos. Por outro lado, com uma configuração personalizada, é mais fácil ficar preso em versões de dependências sem suporte, e você acabará criando sua própria estrutura, porem sem uma comunidade ou meios de atualizar as dependências (e talvez seja alguma coisa parecida com oque fizemos no passado, porém projetado de forma mais aleatória). +**As estruturas React nesta página solucionam problemas como esses por padrão, sem nenhum trabalho extra da sua parte.** Elas permitem que você comece de forma bem enxuta e depois dimensione seu aplicativo conforme suas necessidades. Cada estrutura de React tem uma comunidade, então encontrar respostas e atualizar ferramentas é mais fácil. Estruturas fornecem suporte ao seu código, ajudando você e outros a reaproveitar contexto e habilidades entre diferentes projetos. Por outro lado, com uma configuração personalizada, é mais fácil ficar preso em versões de dependências sem suporte, e você acabará criando sua própria estrutura, porém sem uma comunidade ou meios de atualizar as dependências (e se for pareceido com as que fizemos no passado, projetada mais aleatoriamente). Se o seu aplicativo tiver restrições incomuns que não são bem atendidas por esses frameworks, ou você prefere resolver esses problemas sozinho, você pode criar sua própria configuração personalizada com React. Use `react` e `react-dom` apartir do npm, configure seu processo de construção personalizado com um *bundler* como [Vite](https://vitejs.dev/) ou [Parcel](https://parceljs.org/), e adicione outras ferramentas conforme necessário para roteamento, geração estática ou renderização do lado do servidor e muito mais. From 5cac671c7d79161dada41e05fbdabb261bc0b3f5 Mon Sep 17 00:00:00 2001 From: Thales Martim Coutinho <79290513+Thales-Coutinho@users.noreply.github.com> Date: Tue, 20 Aug 2024 16:44:29 -0300 Subject: [PATCH 08/10] Update src/content/learn/start-a-new-react-project.md Co-authored-by: Mateus Caltabiano --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index aa931d9be..1afac6f36 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -27,7 +27,7 @@ Mesmo que você não precise de roteamento ou busca de dados a princípio, você **As estruturas React nesta página solucionam problemas como esses por padrão, sem nenhum trabalho extra da sua parte.** Elas permitem que você comece de forma bem enxuta e depois dimensione seu aplicativo conforme suas necessidades. Cada estrutura de React tem uma comunidade, então encontrar respostas e atualizar ferramentas é mais fácil. Estruturas fornecem suporte ao seu código, ajudando você e outros a reaproveitar contexto e habilidades entre diferentes projetos. Por outro lado, com uma configuração personalizada, é mais fácil ficar preso em versões de dependências sem suporte, e você acabará criando sua própria estrutura, porém sem uma comunidade ou meios de atualizar as dependências (e se for pareceido com as que fizemos no passado, projetada mais aleatoriamente). -Se o seu aplicativo tiver restrições incomuns que não são bem atendidas por esses frameworks, ou você prefere resolver esses problemas sozinho, você pode criar sua própria configuração personalizada com React. Use `react` e `react-dom` apartir do npm, configure seu processo de construção personalizado com um *bundler* como [Vite](https://vitejs.dev/) ou [Parcel](https://parceljs.org/), e adicione outras ferramentas conforme necessário para roteamento, geração estática ou renderização do lado do servidor e muito mais. +Se o seu aplicativo tiver restrições incomuns que não são bem atendidas por esses frameworks, ou você prefere resolver esses problemas sozinho, você pode criar sua própria configuração personalizada com React. Use `react` e `react-dom` a partir do npm, configure seu processo de construção personalizado com um *bundler* como [Vite](https://vitejs.dev/) ou [Parcel](https://parceljs.org/), e adicione outras ferramentas conforme necessário para roteamento, geração estática ou renderização do lado do servidor e muito mais. From 98477ce8cd5ddfa96f68ca722335a6d1097d1c51 Mon Sep 17 00:00:00 2001 From: Thales Martim Coutinho <79290513+Thales-Coutinho@users.noreply.github.com> Date: Tue, 20 Aug 2024 16:44:48 -0300 Subject: [PATCH 09/10] Update src/content/learn/start-a-new-react-project.md Co-authored-by: Mateus Caltabiano --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 1afac6f36..585952119 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -33,7 +33,7 @@ Se o seu aplicativo tiver restrições incomuns que não são bem atendidas por ## *Frameworks* baseados em React com qualidade de mercado {/*production-grade-react-frameworks*/} -Esses frameworks oferecem suporte a todos os recursos necessários para implantar e dimensionar seu aplicativo em produção e estão trabalhando para dar suporte à nossa [visão de arquitetura full-stack](#which-features-make-up-the-react-teams-full-stack-architecture-vision). Todos os frameworks que recomendamos são de código aberto com comunidades ativas para suporte, e pode ser implantado em seu próprio servidor ou em um provedor de hospedagem. Se você é um autor de um framework e está interessado em ser incluído nesta lista, [por favor nos avise](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+). +Essas estruturas oferecem suporte a todos os recursos necessários para implantar e dimensionar seu aplicativo em produção e estão trabalhando para dar suporte à nossa [visão de arquitetura full-stack](#which-features-make-up-the-react-teams-full-stack-architecture-vision). Todas as estruturas que recomendamos são de código aberto com comunidades ativas para suporte, e podem ser implantadas em seu próprio servidor ou em um provedor de hospedagem. Se você é um autor de uma estrutura e está interessado em ser incluído nesta lista, [por favor nos avise](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+). ### Next.js {/*nextjs-pages-router*/} From ec64da89465134a6cd82b0a86c4cde5c84528b0e Mon Sep 17 00:00:00 2001 From: Thales Martim Coutinho <79290513+Thales-Coutinho@users.noreply.github.com> Date: Sat, 24 Aug 2024 21:59:37 -0300 Subject: [PATCH 10/10] Update src/content/learn/start-a-new-react-project.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: João Lucas Farias --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 585952119..bb086a553 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -25,7 +25,7 @@ Mesmo que você não precise de roteamento ou busca de dados a princípio, você **Esses problemas não são específicos do React. É por isso que o Svelte tem o SvelteKit, o Vue tem o Nuxt, e assim por diante.** Para solucionar esses problemas por conta própria, você precisará integrar seu *bundler* com sua biblioteca de roteamento e com sua biblioteca de busca de dados. Não é difícil fazer uma configuração inicial funcionar, mas há muitas sutilezas envolvidas na criação de uma aplicação que carrega rapidamente mesmo enquanto cresce ao longo do tempo. Você vai querer enviar a mínima quantidade de código da aplicação em uma única viagem cliente-servidor, ao mesmo tempo que todos os dados necessários para a página. Provavelmente, você desejará que a página seja interativa antes mesmo que seu código JavaScript ser executado, para ter um carregamento progressivo aprimorado. Você pode querer gerar uma pasta de arquivos HTML totalmente estáticos para suas páginas de marketing que podem ser hospedadas em qualquer lugar e ainda funcionar com JavaScript desabilitado. Desenvolver essas capacidades você mesmo dá muito trabalho. -**As estruturas React nesta página solucionam problemas como esses por padrão, sem nenhum trabalho extra da sua parte.** Elas permitem que você comece de forma bem enxuta e depois dimensione seu aplicativo conforme suas necessidades. Cada estrutura de React tem uma comunidade, então encontrar respostas e atualizar ferramentas é mais fácil. Estruturas fornecem suporte ao seu código, ajudando você e outros a reaproveitar contexto e habilidades entre diferentes projetos. Por outro lado, com uma configuração personalizada, é mais fácil ficar preso em versões de dependências sem suporte, e você acabará criando sua própria estrutura, porém sem uma comunidade ou meios de atualizar as dependências (e se for pareceido com as que fizemos no passado, projetada mais aleatoriamente). +**As estruturas React nesta página solucionam problemas como esses por padrão, sem nenhum trabalho extra da sua parte.** Elas permitem que você comece de forma bem enxuta e depois dimensione seu aplicativo conforme suas necessidades. Cada estrutura de React tem uma comunidade, então encontrar respostas e atualizar ferramentas é mais fácil. Estruturas fornecem suporte ao seu código, ajudando você e outros a reaproveitar contexto e habilidades entre diferentes projetos. Por outro lado, com uma configuração personalizada, é mais fácil ficar preso em versões de dependências sem suporte, e você acabará criando sua própria estrutura, porém sem uma comunidade ou meios de atualizar as dependências (e se for parecido com as que fizemos no passado, projetada mais aleatoriamente). Se o seu aplicativo tiver restrições incomuns que não são bem atendidas por esses frameworks, ou você prefere resolver esses problemas sozinho, você pode criar sua própria configuração personalizada com React. Use `react` e `react-dom` a partir do npm, configure seu processo de construção personalizado com um *bundler* como [Vite](https://vitejs.dev/) ou [Parcel](https://parceljs.org/), e adicione outras ferramentas conforme necessário para roteamento, geração estática ou renderização do lado do servidor e muito mais.