30 Days Of React
1.0.0
Aprenda com Asabeneh juntando -se ao próximo bootcamp de codificação
Autor: Asabeneh Yetayeh
Outubro de 2020
Dia 1 >>
| # Dia | Tópicos |
|---|---|
| 00 | Introdução Como usar o repo Requisitos Configurar |
| 01 | Atualização de JavaScript |
| 02 | Começar a reagir |
| 03 | Configurando |
| 04 | Componentes |
| 05 | Adereços |
| 06 | Lista, mapa e chaves |
| 07 | Componentes da classe |
| 08 | Estados |
| 09 | Renderização condicional |
| 10 | Estrutura da pasta do projeto reagir |
| 11 | Eventos |
| 12 | Formas |
| 13 | Componente controlado e não controlado |
| 14 | Ciclos de vida componentes |
| 15 | Pacotes de terceiros |
| 16 | Componentes de ordem superior |
| 17 | ROUTER DE REACTER |
| 18 | Buscar versus axios |
| 19 | Projetos |
| 20 | Projetos |
| 21 | Ganchos |
| 22 | Formulários usando gancho |
| 23 | Buscar dados usando ganchos |
| 24 | Projeto usando ganchos |
| 25 | Ganchos personalizados |
| 26 | Contexto |
| 27 | Ref |
| 28 | projeto |
| 29 | Explorar |
| 30 | Conclusões |
??? Codificação feliz ???
Parabéns por decidir participar de 30 dias de desafio de programação do React. Neste desafio, você aprenderá tudo o que precisa usar para desenvolver um aplicativo React. No final do desafio, você receberá um Certificado de Conclusão de Desafio de Programação de 30 dias de reação. Caso você precise de ajuda ou se quiser ajudar outras pessoas, você pode participar do grupo Telegram.
Um desafio 30DaysOfReact é um guia para os iniciantes e os desenvolvedores avançados de JavaScript e React. Bem -vindo a 30 dias de reação. React é uma biblioteca JavaScript. Gosto de usar e ensinar o React e espero que você o faça também. Nesta etapa a passo de 30 dias React Challenge, você aprenderá o React, que é uma das bibliotecas JavaScript da interface de usuário mais populares. O React pode fazer tudo o que JavaScript pode fazer. O REACT pode ser usado para adicionar interatividade aos sites, para desenvolver aplicativos móveis, aplicativos de desktop, jogos . Acredito que você aprenderá bastante nos próximos 30 dias e suas habilidades de programação e solução de problemas também serão aprimoradas significativamente.
Vou usar inglês conversacional e menos jargões para escrever esse desafio. O conteúdo será atualizado continuamente. Se você encontrar erros de erro de digitação ou gramática, não se surpreenda porque não faço nenhuma prova de leitura antes de publicá -lo. Eu recomendaria que você se concentre na mensagem principal do desafio, em vez dos ingleses e alguns erros menores. Eu realmente aprecio se você me enviar pedidos de aprimoramento de puxar e lembre -se de puxar primeiro do mestre antes de enviar solicitações de puxar. A maioria das imagens que usei nesse desafio veio do desafio 30DaysOfJavaScript; Se você é bom em matrizes, loops, funções, objetos, programação funcional, destruição, espalhamento e classe, poderá seguir o desafio corretamente. Caso contrário, eu recomendo fortemente que você verifique 30DaysOfJavaScript.
Antes de mergulhar neste curso, você pode verificar a revisão de 30 dias de reação.
Esse desafio é fácil de ler, escrito em inglês de conversação, envolvente, motivador e, ao mesmo tempo, é muito exigente. Você precisa alocar muito tempo para terminar esse desafio. Se você é um aluno visual, pode obter a lição de vídeo no canal do YouTube de arruela. Inscreva -se no canal, comente e faça perguntas no YouTube Vides e seja proativo, o autor acabará notar você.
O autor gosta de ouvir sua opinião sobre o desafio, compartilhe seus pensamentos sobre o desafio dos 30DaysOfjavascript. Você pode deixar seu depoimento neste link
Aprenda com Asabeneh juntando -se ao próximo bootcamp de codificação
Para se dar bem com o desafio, você precisa ter o seguinte:
Estrela este repositório para apoiar este trabalho e bifurcar o repositório para criar sua própria cópia para trabalhar.
Você deve sempre trabalhar diretamente na sua cópia bifurcada.
# note that an `ssh` link is used here, but an `https` link will work the same
git clone [email protected]:username/30-Days-Of-React.git
cd 30-Days-Of-ReactPara concluir os exercícios diários, minha sugestão é criar uma filial separada para abrigar sua pasta de exercícios ou qualquer outra alteração que você faça. Isso manterá seu ramo mestre limpo o tempo todo, o que significa que seu mestre sempre será semelhante ao mestre original.
git checkout -b exercise-solutions # `-b` creates the branch if it does not existNa sua nova filial, você pode usar arquivos/pastas para estruturar suas soluções para exercícios diários
mkdir -p solutions/day-01 # `-p` helps create nested directories
touch solutions/day-01/level1.js # touch creates a fileCompreenda suas soluções para o seu garfo
git add solutions/day-01/level1.js
git commit -m " chore: exercise level1 complete "
git push origin exercise-solutions # branch `exercise-solutions` was created earlierEste repositório será atualizado diariamente ao longo do mês. Quando o conteúdo de um novo dia estiver disponível, você pode atualizar sua cópia bifurcada com as etapas abaixo.
# 1. switch to master branch
git checkout master
# 2. check if your local copy has a link to original `...Asabeneh/30-Days-Of-React.git`
git remote -v
# 3. if not, add a link to original, you can choose any name for the link or use `upstream`
git remote add upstream [email protected]:Asabeneh/30-Days-Of-React.git
# 4. check again to confirm link added
git remote -v
# 5. now you can fetch updates from original repo, assuming you named this `upstream`
git fetch upstream
# 6. merge the updates to your local master branch
git merge upstream/master master
# 7. push the merged updates to your Forked copy on GitHub
git push origin masterObserve que as atualizações são aplicadas apenas à filial principal. Se você deseja atualizar qualquer outra filial, repita as etapas 6-7 com o nome da filial. Veja Snippet abaixo para filial
exercise-solutions
git merge upstream/master exercise-solutions
git push origin exercise-solutionsEu acredito que você tem a motivação e um forte desejo de ser um desenvolvedor, um computador e internet. Além desse nível básico ao nível intermediário HTML, CSS e JS. Se você os possui, então você tem tudo para começar.
Você pode não precisar de Node.js agora, mas pode precisar disso mais tarde. Instale o Node.js.
Depois de baixar clique duas vezes e instale
Podemos verificar se o nó está instalado em nossa máquina local, abrindo nosso terminal de dispositivo ou prompt de comando.
asabeneh $ node -v
v12.14.0Ao fazer este tutorial, eu estava usando o nó versão 12.14.0, mas agora a versão recomendada do Node.js para download é 12.17.0.
Existem muitos navegadores por aí. No entanto, eu recomendo fortemente o Google Chrome.
Instale o Google Chrome se você ainda não tiver um. Podemos escrever um pequeno código JavaScript no console do navegador, mas não usamos o console do navegador para desenvolver aplicativos.
Você pode abrir o Google Chrome Console clicando em três pontos no canto superior direito do navegador, selecionando mais ferramentas -> Ferramentas de desenvolvedor ou usando um atalho de teclado. Eu prefiro usar atalhos.
Para abrir o console do Chrome usando um atalho de teclado. É bom conhecer o atalho também como um desenvolvedor de JavaScript e React, você gastará muito tempo em um console do navegador e não terá preguiça de abri -lo durante o desenvolvimento.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
Depois de abrir o Google Chrome Console, tente explorar os botões marcados. Passaremos a maior parte do tempo no console. O console é o local onde vai o seu código JavaScript. O mecanismo do Google Console V8 altera seu código JavaScript para código da máquina. Vamos escrever um código JavaScript no Google Chrome Console:
Podemos escrever qualquer código JavaScript no Google Console ou em qualquer console do navegador. No entanto, para esse desafio, focamos apenas no Google Chrome Console. Abra o console usando:
Mac
Command+Option+I
Windows:
Ctl+Shift+IPara escrever nosso primeiro código JavaScript, usamos um console de função interno.log () . Passamos um argumento como dados de entrada e a função exibe a saída. Passamos 'Hello, World' como dados de entrada ou argumento na função console.log ().
console . log ( 'Hello, World!' ) A função console.log () pode levar vários parâmetros separados por vírgula. A sintaxe parece a seguinte: console.log (param1, param2, param3)
console . log ( 'Hello' , 'World' , '!' )
console . log ( 'HAPPY' , 'NEW' , 'YEAR' , 2020 )
console . log ( 'Welcome' , 'to' , 30 , 'Days' , 'Of' , 'JavaScript' )Como você pode ver no código do snippet acima, o console.log () pode receber vários argumentos. Recomenda -se usar tantas impressões console.log () para verificar o que está acontecendo no seu código, mas não mantenha todos os testes console.log () em seu código para sempre. Facilite sua vida mantendo o console do navegador aberto.
Adicionamos comentários ao nosso código. Os comentários são muito importantes para tornar o código mais legível e deixar comentários em nosso código. O JavaScript não executa a parte do comentário do nosso código. Em JavaScript, qualquer linha de texto que começa com // em JavaScript é um comentário e qualquer coisa cercada como essa / * * / também é um comentário.
Exemplo: comentário de linha única
// este é o primeiro comentário
// este é o segundo comentário
// eu sou um comentário de linha única
Exemplo: Comentário multiline
/* Este é um comentário de multilina
Comentários multilinas podem levar várias linhas
JavaScript é o idioma da web
*/
As linguagens de programação são semelhantes às línguas humanas. O inglês ou muitos outros idiomas usa palavras, frases, frases, frases compostas e outras mais para transmitir uma mensagem significativa. O significado em inglês da sintaxe é o arranjo de palavras e frases para criar frases bem formadas em um idioma . A definição técnica de sintaxe é a estrutura das declarações em uma linguagem de computador. Os idiomas de programação têm sintaxe. JavaScript é uma linguagem de programação e, como outras linguagens de programação, ele tem sua própria sintaxe. Se não escrevermos uma sintaxe que o JavaScript entende, ele aumentará diferentes tipos de erros. Vamos explorar diferentes tipos de erros de JavaScript posteriormente. Por enquanto, vamos ver erros de sintaxe.
Eu cometi um erro deliberado. Como resultado, o console gera erros de sintaxe. Na verdade, a sintaxe é muito informativa. Informa que tipo de erro foi cometido. Ao ler a diretriz de feedback de erro, podemos corrigir a sintaxe e corrigir o problema. O processo de identificação e remoção de erros de um programa é chamado de depuração. Vamos corrigir os erros:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )Até agora, vimos como exibir o texto usando o console.log () . Se estivermos imprimindo texto ou string usando console.log () , o texto deve estar dentro das citações, citações duplas ou um backtick citações. Exemplo:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )
console . log ( `Hello, World!` ) Agora, vamos praticar mais códigos de javascript de escrita usando console.log () no Google Chrome Console para tipos de dados numéricos. Além do texto, também podemos fazer cálculos matemáticos usando JavaScript. Vamos fazer os seguintes cálculos simples. O console pode receber diretamente argumentos sem a função console.log () . No entanto, ele está incluído nesta introdução, porque a maior parte desse desafio estaria ocorrendo em um editor de texto onde o uso da função seria obrigatório. Você pode brincar diretamente com instruções no console.
console . log ( 2 + 3 ) // Addition
console . log ( 3 - 2 ) // Subtraction
console . log ( 2 * 3 ) // Multiplication
console . log ( 3 / 2 ) // Division
console . log ( 3 % 2 ) // Modulus - finding remainder
console . log ( 3 ** 2 ) // Exponentiation 3 ** 2 == 3 * 3Podemos escrever nossos códigos no console do navegador, mas isso não serve para projetos maiores. Em um ambiente de trabalho real, os desenvolvedores usam diferentes editores de código para escrever seus códigos. Neste desafio de JavaScript de 30 dias, usaremos o código do Visual Studio.
O Código do Visual Studio é um editor de texto de código aberto muito popular. Eu recomendaria baixar o código do Visual Studio, mas se você for a favor de outros editores, fique à vontade para seguir com o que você tem.
Se você instalou o código do Visual Studio, vamos começar a usá -lo.
Abra o código do Visual Studio clicando duas vezes em seu ícone. Ao abrir, você receberá esse tipo de interface. Tente interagir com os ícones rotulados.
Parabéns! Você concluiu a configuração que precisa para começar com o React, mas antes de mergulharmos no React, vamos fazer uma atualização de JavaScript. Se você se sentir muito confortável com o JavaScript, poderá pular a atualização do Javascript Day 1. A seção de atualização JavaScript é vasta e pode levar mais de um dia. Pela minha experiência, as pessoas geralmente ficam presas no React porque o conhecimento de JavaScript é muito superficial para preencher essa lacuna todos os recursos de JavaScript necessários que podem ser usados no React são abordados na seção de atualização de JavaScript. Existem muitos exercícios, mas você não é obrigado a resolvê -los. Clique aqui se quiser pular JavaScript e saltar diretamente para o React.
? Parabéns! ?
Dia 1 >>
