react exercise

React.js Exercício

Este exercício se destina a você se familiarizar com os conceitos fundamentais do React de maneira interativa, bem como para se sentir confortável em desenvolver em um ambiente moderno de node.js. Este projeto será dividido em várias partes. Cada parte cobrirá um conceito fundamental de reação/front -end.

O Guia do Iniciante React e o Guia para o Iniciante para Reactar serão muito benéficos para obter um entendimento completo dos fundamentos do React. Também será benéfico se sentir confortável no React Docs e JavaScript Docs como parte deste exercício.

Requisitos

• Nó versão 8.x.
• NPM versão 5.x.

Instale o nó e o NPM aqui.

Verifique se você tem as versões corretas executando os seguintes comandos em seu terminal:

 node -v

 npm -v

Configurar

Instale o React Devtools para depurar facilmente e veja o que está acontecendo no seu aplicativo React.

Seu editor de texto não pode suportar nativamente a sintaxe JSX usada neste projeto, mas pode haver plugins para obter destaques de sintaxe adequados. Por exemplo, o texto sublime usa o plug -in Babel .

Primeiro, bifurque este repositório. O botão do garfo no seu canto superior direito. O que isso faz é copiar esse repositório para sua conta. Agora você deve ter um repositório com o nome <yourusername>/react-exercise .

Deve ser assim (meu nome de usuário é Davidachang):

Em seguida, clone este repositório (clique no botão verde dizendo "clone ou download", escolha http e copie e cole o local <url> ) e vá para ele:

 $ git clone <url>
$ cd react-exercise

Instale as dependências do projeto:

 npm install

Depois disso, execute isso para iniciar o desenvolvimento:

 npm start

Isso começará a executar o aplicativo e o abrirá automaticamente em http: // localhost: 3000. Sempre que você mudar e salvar o código, ele recarregará automaticamente! Este continuará sendo um processo em execução no seu terminal, portanto, você precisará abrir uma nova guia ou janela para executar outros comandos.

Configuração opcional

O Questtier é uma ferramenta que reforma automaticamente seu código para seguir um certo conjunto de diretrizes de estilo de codificação. É configurado para executar automaticamente antes de cada compromisso. Isso garante que todo o nosso código siga os mesmos estilos de código, aplicando boas práticas e minimizando conflitos.

Definitivamente, não é necessário para este exercício, mas existem plugins mais bonitos que você pode instalar para o seu editor. Veja as instruções aqui.

Parte 1

Objetivo: familiarize -se com a sintaxe JSX, estrutura de componentes e acessórios de passagem

Tarefas:

• Envie um suporte shouldDisplayImage para o componente Instructions que determina se deve ou não exibir a dica do logotipo H4i

Parte 2

Objetivo: Familiarize -se com as listas de renderização e funções de matriz JavaScript

Tarefas:

• Envie um suporte items para o componente Instructions que contém uma lista de strings
• Exibir uma lista de pontos de bala de todos os items
• Remova todos os itens com menos de 3 caracteres
• Faça de todos os outros itens de listas maiúsculos
• Faça isso sem usar for ou while loops
• Vídeos muito úteis para assistir:
• Introdução funcional de programação - apenas os dois primeiros vídeos são suficientes, embora haja muito a aprender com o resto da lista de reprodução e seus outros vídeos! (recomendo a assinatura)
• Listas de renderização no React

Parte 3

Objetivo: familiarize -se com o estado do componente

Tarefas:

• Crie um novo componente Counter
• Defina seu estado inicial de count como 0
• Exibir o valor da contagem atual
• Crie dois botões, um que aumenta a contagem e um que o diminui. Dica

Parte 4

Objetivo: Familiarize -se com a entrada do usuário

Tarefas:

• No App.js , faça uma entrada e um botão de envio que defina um estado initialCount
• Validar a entrada do usuário para garantir que seja válido (é um número)
• Passe o estado initialCount como um suporte no componente Counter e use esse valor como a count inicial no Counter . Certifique -se de tomar cuidado com os tipos ao fazer isso, pois a entrada do usuário é uma String e queremos enviar um Number .
• Bônus: mostre feedback da interface se a entrada do usuário for inválida (uma mensagem simples servirá)
• NOTA: Se o seu botão atualizar a página, jogue um botão Tipo: <button type="button" ...

Parte 5

Objetivo: Entenda a comunicação do estado/adereços entre os componentes do irmão

Tarefas:

• Mova o botão input e envio para seu próprio componente chamado InitialCountForm , que é um filho do componente do App
• Mantenha que a funcionalidade de ser capaz de definir a contagem inicial do balcão funciona
• Potencialmente útil: o ciclo de vida do componente reagir, especificamente componenteWillReceiveProps. Tangencialmente relevante: React Catch Sheet
• Útil: mover o estado para cima na árvore

Parte 6

Objetivo: familiarize -se com CSS/SCSS e estilo

Tarefas: nada específico, brinque com o estilo!

Nota: Você pode criar arquivos SCSS e eles serão compilados automaticamente nos arquivos CSS quando você salvar, mas precisará importar o arquivo CSS para o seu componente.

Alguns recursos relacionados ao estilo:

• Aprenda layout
• Um guia completo para o FlexBox
• Padrão BEM

Recursos

O Guia do Iniciante React
MDN - Uma reintrodução para JavaScript
O guia para iniciantes para reagir
React Docs
Guia de estilo JavaScript do Airbnb
Guia de estilo de reação do Airbnb
Guia de estilo CSS do Airbnb

Envio

Quando terminar de todas as etapas, empurre suas alterações no repositório do Github!

Antes de enviar um PR, você terá que empurrar sua filial para uma filial remota (a que está no Github, não local).

Verifique se você está em sua filial:

 git branch

Se você deseja garantir que todas as suas confirmações estejam dentro:

 git log

Pressione Q para sair da tela git log .

Empurre suas confirmações para o seu ramo remoto:

 git push

Na primeira vez em que você faz isso, você pode receber um erro, pois sua filial remota ainda não existe. Normalmente, ele diz o comando correto a ser usado:

 git push --set-upstream origin <YOUR_BRANCH_NAME>

Nota: isso só precisa ser feito na primeira vez em que você pressiona uma nova filial. Você pode usar apenas git push depois.

Depois que isso estiver pronto, envie um e -mail para [email protected] com o link para o seu repositório bifurcado e seu nome de filial. Precisamos dessas duas coisas para ver sua submissão.

 H A C K 4 I M P A C T
                    H A C K 4 I M P A C T
                                        H A C K 4 I M P A C T
                                                            H A C K 4 I M P A C T
                                                                                H A C K 4 I M P A C T