DEV Community

loading...
Cover image for Ignite - Chapter I - ReactJs

Ignite - Chapter I - ReactJs

thiagopederzolli profile image Thiago Pederzolli Machado da Silva ・3 min read

Falaaa Dev! hahahahahah

Brincadeiras à parte, hoje venho compartilhar com vocês sobre meus aprendizados no fim do primeiro módulo do Ignite, trilha React. Foi uma semana de muito aprendizado, começando do básico para criar uma aplicação React do zero mesmo.

Na primeira parte do conteúdo, o que o Diego fez foi nos conduzir através do processo de criar a aplicação React do zero para entendermos o processo de funcionamento e ter uma visão mais ampla de como pensarmos a criação de uma aplicação.

Aprendemos sobre Babel e Webpack, como configurá-los, quais informações são importantes e como elas impactam o funcionamento da aplicação. A importância da diferenciação entre ambiente de desenvolvimento e de produção. A estrutura do React.

Na segunda parte entramos de fato na criação de componentes em React, onde foram abordados os conceitos principais de componentes, propriedades e estados. Se você quiser saber mais sobre, pode conferir esse meu texto sobre o React e seus três mosqueteiros.

Ele também falou sobre a ideia de imutabilidade no React, que é basicamente a ideia de que uma variável não deve ter seu valor alterado diretamente. Explicarei um pouco mais sobre imutabilidade em um texto que pretendo lançar ainda essa semana.

Na terceira parte foi onde conhecemos o segundo Hook do React, o useEffect(), que serve para que possamos criar funções a serem executadas de acordo com padrões pré-estabelecidos. Em poucas palavras, ele recebe dois argumentos, o primeiro é uma função e o segundo é um array de dependências e essas dependências ditarão quando a função declarada no primeiro argumento será executada. No texto que trarei sobre imutabilidade falo um pouco mais sobre o conceito e mostro um caso de uso do useEffect().

Na quarta e última parte do conteúdo, começamos a entrar no Fantástico mundo do TypeScript. Aprendemos a importância do TypeScript, como a questão de termos uma tipagem definida garante um funcionamento melhor da nossa aplicação, assim como também proporciona uma compreensão melhor de nosso código para quem estiver trabalhando com a gente.

Foi explicado o básico para implementação de interfaces TypeScript, que são o que definem os tipos esperados por cada variável, garantindo assim que não possamos, por exemplo, atribuir um número a um dado que espera um objeto. Também aprendemos como implementar isso no React, garantindo uma aplicação mais inteligente e uma forma mais segura de trabalhar.

Por fim, terminamos o módulo com um desafio focado em colocarmos em prática um dos conceitos mais importantes, ao meu ver, do React, que é justamente o de imutabilidade. Dentro de uma aplicação de lista de Tasks, era nossa tarefa implementar funções que atualizassem os estados, sem impactar diretamente o valor original daquele estado.

A ideia dessa documentação é traçar um roteiro de tudo que foi visto a cada módulo, resumindo os principais pontos e dando uma ideia de conceitos relevantes, com a intenção de explorar em textos maiores e com mais profundidade cada conceito desses, seguindo a ideia proposta no próprio Ignite.

Como comentado em algumas partes, alguns conceitos já estão presentes em textos já publicados, outros em textos aguardando publicação e outros em textos que estarão por vir.

Discussion (0)

pic
Editor guide