Skip to content

Commit 7ff4d30

Browse files
CassivsGabriellisCassivsGabriellis
authored
Merge pull request #34 from mayconblopes/revisão-curso-fullstack
Revisão curso fullstack
2 parents 04cae89 + cf0900a commit 7ff4d30

File tree

10 files changed

+361
-363
lines changed

10 files changed

+361
-363
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,3 +68,6 @@ yarn-error.log
6868
.pnp.js
6969
# Yarn Integrity file
7070
.yarn-integrity
71+
72+
73+
.nvmrc

‎src/components/LanguagePicker/index.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,6 @@ const LanguagePicker = ({
3030
return (
3131
/*eslint jsx-a11y/no-onchange: "off" */
3232
<>
33-
{console.log(value)}
34-
{console.log(fontSizeStyle)}
3533
<SrOnly>
3634
<label htmlFor="language-select">
3735
{t('navigation:LanguagePickerSrLabel')}

‎src/content/0/ptbr/part0a.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@ Uma boa pergunta poderia ser:
7070
> // dados impressos no console
7171
> ```
7272
>
73-
> A guia Network no navegador exibe o seguinte:</i>
73+
> A guia Rede (Network) no navegador exibe o seguinte:</i>
7474
>
75-
> [captura de tela da guia de network]
75+
> [captura de tela da guia Rede (Network)]
7676
>
7777
> <i>Todo o código pode ser encontrado aqui (um link para o repositório no GitHub)</i>
7878

‎src/content/0/ptbr/part0b.md‎

Lines changed: 37 additions & 37 deletions
Large diffs are not rendered by default.

‎src/content/1/pt/part1a.md‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ Agora, começaremos a nos familiarizar com provavelmente o tópico mais importan
1111

1212
A maneira mais simples de começar é usando uma ferramenta chamada [create-react-app](https://github.com/facebook/create-react-app). É possível (mas não necessário) instalar o <i>create-react-app</i> em sua máquina se a ferramenta <i>npm</i> instalada junto com o Node estiver na versão <i>5.3</i>, pelo menos.
1313

14+
<i>Durante o curo, você também pode utilizar a nova ferramenta frontend chamada [Vite](https://vitejs.dev/), se desejar. O create-react-app ainda é a ferramenta recomendada pelo time do React e é por isso que continua sendo a ferramenta padrão para configurar um projeto React neste curso. Leia [aqui](https://github.com/reactjs/reactjs.org/pull/5487#issuecomment-1409720741) como o time React enxerga o futuro das ferramentas React.</i>
15+
1416
Vamos criar uma aplicação chamada <i>part1</i> e navegar até o seu diretório.
1517

1618
```bash
@@ -74,7 +76,7 @@ Por padrão, o arquivo <i>public/index.html</i> não contém nenhum marcador HTM
7476
conteúdo não mostrado ...
7577
</head>
7678
<body>
77-
<noscript>Você precisa habilitar o JavaScript para executar esta aplicação.</noscript>
79+
<noscript>You need to enable JavaScript to run this app.</noscript>
7880
<div id="root"></div>
7981
</body>
8082
</html>
@@ -143,7 +145,7 @@ export default App
143145

144146
E observe o que acontece no console do navegador:
145147

146-
![](../../images/1/30.png)
148+
![console do navegador com uma seta mostrando o log com a mensagem "Hello from component"](../../images/1/30.png)
147149

148150
A primeira regra do desenvolvimento web front-end:
149151

@@ -181,7 +183,7 @@ Note que você não deve remover a linha no final do componente:
181183
export default App
182184
```
183185

184-
A exportação não é mostrada em a maioria dos exemplos do material do curso. Sem a exportação, o componente e a aplicação inteira desmoronam.
186+
A exportação não é mostrada na maioria dos exemplos do material do curso. Sem a exportação, o componente e a aplicação inteira desmoronam.
185187

186188
Você se lembrou da sua promessa de deixar o console aberto? O que foi impresso?
187189

@@ -229,7 +231,7 @@ Mas ao escrever em JSX, a tag precisa ser fechada:
229231

230232
### Múltiplos componentes
231233

232-
Vamos modificar o arquivo <i>App.js</i> da seguinte forma (N.B.(Nota Bene): a exportação na parte inferior é omitida nestes <i>exemplos</i>, tanto agora quanto no futuro. Ela ainda é necessária para que o código funcione):
234+
Vamos modificar o arquivo <i>App.js</i> da seguinte forma (obs.: a exportação na parte inferior é omitida nestes <i>exemplos</i>, tanto agora quanto no futuro. Ela ainda é necessária para que o código funcione):
233235

234236
```js
235237
// highlight-start
@@ -269,7 +271,7 @@ const App = () => {
269271
}
270272
```
271273

272-
Escrever componentes em React é fácil, e utilizando combinação de componentes mesmo uma aplicação mais complexa pode ser relativamente mantida. De fato, uma das filosofias fundamentais do React é criar aplicações a partir de muitos componentes que são especializados e reutilizáveis.
274+
Escrever componentes em React é fácil, e utilizando combinação de componentes mesmo uma aplicação mais complexa pode ser mantida de forma organizada. De fato, uma das filosofias fundamentais do React é criar aplicações a partir de muitos componentes que são especializados e reutilizáveis.
273275

274276
Outra forte convenção é a ideia de um componente <i>root</i> chamado <i>App</i> no topo da árvore de componentes da aplicação. No entanto, como aprenderemos na [Parte 6](/ptbr/part6), há situações em que o componente <i>App</i> não é exatamente a raiz (root), mas é envolto em um componente utilitário apropriado.
275277

@@ -353,9 +355,9 @@ O React foi configurado para gerar mensagens de erro bastante claras. Mesmo assi
353355

354356
![captura de tela de um erro prop indefinido](../../images/1/2a.png)
355357

356-
Como já mencionamos, é possível e vantajoso escrever comandos <em>console.log()</em> (que imprimem no console) ao programar em React.
358+
Como já mencionamos, é possível e recompensador escrever comandos <em>console.log()</em> (que imprimem no console) ao programar em React.
357359

358-
Além disso, tenha em mente que **os nomes de componentes React devem ser maiusculizados**. Se você tentar definir um componente da seguinte forma:
360+
Além disso, tenha em mente que **os nomes de componentes React devem estar com a primeira letra em maiúsculo**. Se você tentar definir um componente da seguinte forma:
359361

360362
```js
361363
const footer = () => {
@@ -413,7 +415,7 @@ const App = () => {
413415

414416
Porém, definir o componente raiz da aplicação não é algo particularmente sábio a se fazer, e deixa o código com uma aparência um pouco feia.
415417

416-
Por conta do elemento raiz ser "estipulado", temos elementos div "extras" na árvore DOM. Isso pode ser evitado usando [fragmentos](https://reactjs.org/docs/fragments.html#short-syntax), ou seja, envolvendo os elementos a serem retornados pelo componente com um elemento vazio:
418+
Por conta do elemento raiz ser compulsório, temos elementos div "extras" na árvore DOM. Isso pode ser evitado usando [fragmentos](https://reactjs.org/docs/fragments.html#short-syntax), ou seja, envolvendo os elementos a serem retornados pelo componente com um elemento vazio:
417419

418420
```js
419421
const App = () => {
@@ -546,7 +548,7 @@ Note que nesta parte há [mais exercícios](/ptbr/part1/um_estado_mais_complexo_
546548

547549
Uma boa maneira de nomear as pastas no seu repositório de envio é a seguinte:
548550

549-
```
551+
```text
550552
part0
551553
part1
552554
courseinfo
@@ -563,7 +565,7 @@ Para cada parte do curso, há um diretório, que se ramifica em diretórios cont
563565

564566
Para cada aplicação web em uma série de exercícios, é recomendado que você envie todos os arquivos relacionados a essa aplicação, exceto o diretório <i>node_modules</i>.
565567

566-
**N.B.:** o conteúdo dos exercícios foram deixados no idioma original da tradução (inglês) por questões de conveniência, visto a revisão que os mantenedores do curso devem fazer no código enviado ao sistema de avaliação da Universidade de Helsinque. Desta forma, escreva suas aplicações utilizando os mesmos termos usados nas variáveis, componentes, etc que estão em inglês.
568+
<i>**Obs.:** o conteúdo dos exercícios foram deixados no idioma original da tradução (inglês) por questões de conveniência, visto a revisão que os mantenedores do curso devem fazer no código enviado ao sistema de avaliação da Universidade de Helsinque. Desta forma, escreva suas aplicações utilizando os mesmos termos usados nas variáveis, componentes, etc que estão em inglês.</i>
567569

568570
<h4>1.1: course information — 1º passo</h4>
569571

@@ -646,7 +648,7 @@ Ou seja, de acordo com Martin, o progresso cuidadoso, passo a passo, é, ainda,
646648

647649
<h4>1.2: course information — 2º passo</h4>
648650

649-
Refatore o componente <i>Content</i> de tal forma que ele não renderize os nomes das partes ou seus números de exercícios <i>per se</i>. Em vez disso, somente renderiza três componentes <i>Part</i>, cada um dos quais renderiza o nome e o número de exercícios de uma parte.
651+
Refatore o componente <i>Content</i> de tal forma que ele não renderize os nomes das partes ou seus números de exercícios por si mesmo. Em vez disso, somente renderiza três componentes <i>Part</i>, cada um dos quais renderiza o nome e o número de exercícios de uma parte.
650652

651653
```js
652654
const Content = ... {
@@ -660,6 +662,6 @@ const Content = ... {
660662
}
661663
```
662664

663-
Nossa aplicação passa informações de uma maneira bastante primitiva no momento, já que está baseada em variáveis individuais. Vamos corrigir isso na [Parte 2](/ptbr/part2).
665+
No momento, nossa aplicação passa informações de uma maneira bastante primitiva, já que está baseada em variáveis individuais. Vamos corrigir isso na [Parte 2](/ptbr/part2).
664666

665667
</div>

0 commit comments

Comments
 (0)