ReactJS é a tecnologia mais usada por pessoas desenvolvedoras experientes e também por pessoas que estão aprendendo a programar, de acordo com a pesquisa do StackOverflow com mais de 70mil pessoas da comunidade tech lançada em maio de 2022.
Imagina você aprendendo os passos iniciais de como as grandes plataformas web são criadas nos dias de hoje. Plataformas como Facebook, Instagram, Twitter, TikTok, Netflix, AirBnB, Notion e muitas outras.
Isso te abre possibilidades de conseguir sua vaga como dev front-end jr., num dos mercados que mais cresce no Brasil e no mundo, com salários e benefícios atrativos até mesmo para pessoas iniciantes ou estagiárias.
Mas nem tudo são flores e iniciar os estudos de uma nova tecnologia é um processo que demanda energia, comprometimento e esforço. Por isso, nesse texto eu vou te contar 5 desafios que devs iniciantes enfrentam quando estão dando os primeiros com ReactJS. Vai que você se identifica e tira daqui algum aprendizado! Vamos lá?
1- Não ter o costume de usar o terminal
Quando a gente está estudando front-end, geralmente, inicia com lógica de programação, html, css e javascript com manipulação do DOM.
Aí a gente começa a criar alguns projetinhos pra treinar: todo list, formulários, sites e por aí vai. Mas a gente tá fazendo tudo isso sem encarar o terminal.
Quando muito usa o terminal, é pra subir algum projeto no github usando o git, mas também existem formas de fugir disso e a gente foge. O fato é que não deveríamos.
Pois ter o costume de usar o terminal faz muita falta quando estamos aprendendo ReactJS. Pois usamos com muito mais frequência o terminal para:
criar um projeto
rodar um projeto
instalar dependências
e mais
É muito importante saber o básico de comandos do terminal, e navegar pelas pastas se prova um desafio e tanto.
Inúmeras vezes eu esquecia de entrar na pasta do projeto e não percebia de cara, daí meu projeto não rodava de jeito nenhum, e só quando já tava perdendo as esperanças eu percebia: “não vai rodar, se não entrar na pasta do projeto, né”. 😳
Não fuja do terminal, ele é legal, rs!
2- Não saber como rodar o projeto no navegador
Outro choque de realidade é que abrir o html para ver o projeto ReactJS no navegador, não será mais usando o live server ou clicando pra abrir o html.
É preciso rodar um script pra o projeto iniciar um localhost, que no contexto de redes nada mais é do que o nosso próprio computador, e acaba sendo uma forma de mascarar um endereço de IP.
No ReactJS, se você usou um gerador de projeto como vite ou create-react-app, o processo de ver e testar seu site no localhost enquanto desenvolve já está todo criado.
Além disso, temos também a forma como o conteúdo aparece na tela, se não escrevemos no HTML como o conteúdo vai parar na tela?
Tudo acontece devido ao arquivo main ou index que captura. a tag com id root e com o metodo render coloca todo o conteúdo que está no App na tela. Entender esse caminho é super importante.
Logo, se precisamos mudar o conteúdo que aparece na tela isso deve ser feito no App, ou deve ser importado no App.
Fluxo para entender como o conteúdo chega na tela:
Mesmo fluxo para entender como o conteúdo chega na tela, mas dessa vez demonstrando quando tenho componentes e preciso importar no App.
3- Não ter uma base boa de Javascript e HTML
Quando a gente tá começando a estudar ReactJS não faz ideia que se a gente dominar os fundamentos de html e javascript pode voar nos estudos da ferramenta.
Essa base é importantíssima, pois vai te preparar para tudo que esperam de você enquanto pessoa desenvolvedora front-end.
E mesmo quando você vai aprendendo como resolver problemas mais complexos, volta e meia você vai precisar revisitar esses conceitos e fundamentos.
Afinal de contas, React é uma biblioteca javascript, então a gente vai estar escrevendo JS com uma forte pitada de html. 😂
Nesse momento do estudo, vai ser super importante também ter uma visão de como funciona a web e seus protocolos, principalmente o protocolo http. É importante também saber sobre Javascript assíncrono, promises e métodos de iteração de array.
Saber isso vai te livrar de muitos sufocos.
4- Não saber como escrever em ReactJS
Eu sempre repito nos meus conteúdos que sintaxe de uma linguagem a gente vai pegando a prática com o dia a dia e não precisamos decorar. Mas entender que JSX é a forma que a gente escreve HTML dentro do Javascript vai ser muito importante pra seus estudos de ReactJs.
Além disso, a gente vai acabar descobrindo que saber usar o import/export de arquivos também vai ser um super desafio. A gente vai errar o caminho dos arquivos, vai esquecer de colocar a palavra reservada from, vai se confundir no uso de exports nomeados e padrão e por aí vai.
Confere aqui a diferença entre named export e default export:
As exportações sem default são exportações nomeadas. E não podemos alterar seu nome quando estamos importando como no exemplo aqui embaixo:
import { Title } from './Title'
As exportações com default são exportações padrão e podem ser renomeadas a qualquer momento. Tipo aqui no exemplo:
import MyTitleModified from './Title'
O React é um ótimo exemplo de biblioteca que exporta componentes padrão e nomeados.
import React, { useState, useEffect } from 'react'
Mas treinando a gente consegue aprender a ter mais atenção ao jeitinho React de programar.
5- Não saber como procurar conteúdos para dar os primeiros passos
Há 3 anos e meio, eu estava me sentindo exatamente assim, eu não sabia quais conteúdos de ReactJs estudar e me aprofundar pra me tornar uma dev front-end.
E não era a falta de opções que me deixava perdida, era justamente o oposto, eram muitas opções, muitos conteúdos e isso tudo me deixava sem saber qual caminho seria mais efetivo.
Por isso decidi colocar aqui embaixo alguns materiais que produzi de ReactJS, pra te contar o meu caminho das pedras, o meu roadmap. Esses foram os passos que me ajudaram a criar uma trilha de estudos que fez sentido pra minha jornada.
E mesmo sabendo que o meu caminho talvez não se encaixe perfeitamente com o que você deseja, talvez seja um incentivo ou um direcionamento. Vem conferir esses materiais que podem te ajudar nos estudos de ReactJS!
Um episódio no podcast quero ser dev:
Um texto aqui no blog te ensinando a criar seu primeiro projeto ReactJS:
Todos esses tópicos formam um pouquinho dos desafios que vivi na quando estava dando os primeiros passos com ReactJS.
Eu espero que tenha te ajudado. Me conta nos comentários se você vive ou viveu alguns deles. Ou também se você aponta outros desafios que não citei aqui!
Não esquece também de compartilhar, vai que ajuda alguém. Até o próximo texto!
Migrar de carreira é algo que coloca a gente do avesso, a gente começa a descobrir fragilidades e fortalezas onde nem imaginava. Eu amo a liberdade de poder mudar de idéia e seguir caminhos diferentes. E eu fiz isso depois dos 30 anos e vindo de uma área diferente.
Quem diria que essa baiana de Alagoinhas, um dia iria estudar na estação hack do facebook que era um prédio com iniciativas educacionais e de negócios sociais apoiadas pelo facebook.
Ou que ela iria estudar dentro da sede do ifood descobrindo como eles criaram o app tão famoso. Vem comigo que vou te contar tudinho aqui nesse texto!
Como me interessei e como dei os primeiros passos na programação
Como foi minha busca pela primeira vaga de dev
Como lidei com alguns medos que ocorrem durante a migração de carreira
Quais os primeiros passos para quem deseja ser dev
1- Como me interessei por programação
O ano era 2019 e meu interesse por programação surgiu por necessidade e curiosidade.
Com formação em marketing eu tinha uma agência digital que gerava resultados para empresas de afroempreendedores. E um dos clientes era o Movimento Black Money, o hub pra inserção digital da comunidade preta.
Em janeiro, eles criaram o afreektech um curso pra ensinar conteúdos digitais pra uma galera preta no Rio de Janeiro, na turma de marketing eu fui mentora. E na turma de programação pra pessoas não programadoras eu pedi pra ser aluna.
Primeiros cursos e principais aprendizados
AfreekTech
3 curiosidades legais desse curso:
1- é que foi lá que eu dei meu primeiro hello world em javascript e entendi os princípios básicos de como a web funciona.
2 – o professor era o Halisson Paz um dos criadores do canal programação dinamica <3
3 – lá eu fiz amigas pra vida toda
Gama Academy
Depois disso eu passei 2 meses em São Paulo para participar da turma de front-end da Gama Academy, eu aprendi a importância das soft skills e do networking.
Eu tive contato com ReactJS a primeira vez e vou te contar que não foi amor à primeira vista. Meu computador era veinho de 2013 e as vezes travava, as vezes eu não conseguia acompanhar a aula.
Foi a primeira vez que vi Git também e morria de medo do terminal. Eu odiava errar e ouvi uma frase que me marcou: “Você precisa aprender a gostar de errar. Isso mostra que você tá tentando coisas novas e que está crescendo.”
Reprograma
Em julho de 2019, eu tava participando do processo seletivo da reprograma, antes mesmo de ser aprovada pra o curso que era presencial eu decidi: vou mudar pra São Paulo e se eu não passar, eu faço qualquer outro curso.
O resultado final saiu e foi um sim muito aguardado. Foi um inverno super frio e literalmente eu nem tinha roupa pra aquilo. hahah
Eu já cheguei em São Paulo com mais 30 amigas, e a gente dividiu nossas semanas de segunda a sexta das 9 as 17, durante 4 meses e meio dentro da estação hack do facebook.
Eu tive a chance de rever com calma, javascript, html, css e React. Me apaixonei e assumi: quero ser dev.
Next
Era um curso de Java, conheci uma galera massa e todo sábado eu ia lá estudar dentro da sede do ifood.
Conheci como o ifood resolvia alguns problemas de arquitetura da área de logistica e sabia que era um conteúdo ainda muito avançado pra mim naquela época.
Mas foi super importante estar lá e ter experimentado codar em Java também. Nesse iniciozinho é importante testar coisas diferentes pra descobrir o que gostamos mais. Mas com cuidado pra não perder o foco, né?. E não foi Java. rs
2- A busca do meu sim
Enquanto eu fazia todos esses cursos, ainda atuava com marketing. Mas corta pra 2020.
Chegou pandemia e com ajuda psicológica, eu percebi que era a hora de tomar mais uma decisão: migrar de vez pra tecnologia e conseguir minha vaga de jr. Inclusive contei tudo isso no podcast quero ser dev.
Eu não empreendia por que tinha grana pra investir, eu empreendia pra pagar boletos fazendo o que eu amava. Não tinha uma reserva de emergência, não tinha plano de saúde e fiquei super assustada com a pandemia.
Eu queria estar amparada com um bom salário, beneficios e um rumo mais certo na minha carreira. E migrar de vez parecia ser o caminho ideal. Então fui encerrando meus contratos aos poucos e me organizei pra ficar 3 meses só estudando e aplicando pra vagas. Eu fiz isso de outubro até dezembro daquele ano.
Eu sei que muita gente não tem esse acesso, por ser o sustento da casa. Mas existem outras formas de conciliar tudinho.
Eu fiz uma listinha com muitas empresas que eu lia sobre valorizar diversidade, pessoas em inicio de carreira e ter bons beneficios.
Até entrevista em ingles eu fiz pra empresa gringa. Mas eu também entrevistava as empresas e eu aprendi muito durante cada processo seletivo: pitch, testes unitarios, melhores práticas de desenvolvimento de software, algoritmos e estruturas de dados e muitas outras coisas. Alias se vc precisa de ajuda para algumas dessas etapas vem conferir aqui esse vídeo:
E enquanto fazia entrevistas eu fiz a NLW da Rocketseat e ganhei uma bolsa lá pra continuar estudando ReactJs e NodeJs.
O fato é que eu apliquei pra muitas vagas, recebi mais de 20 nãos, fiquei no vácuo de alguns processos seletivos, demoraram pra me chamar pra entrevista, eu chorei com os nãos, eu tive ansiedade com a falta de retorno.
Mas em dezembro chegaram os 3 sim que eu recebi, ali veio a minha favorita da lista a Thoughtworks.
3- Medos e relatos honestos pra você entender que migração de carreira pode ser pra você
“Quero ser dev, mas tenho medo de não conseguir meu primeiro emprego”
Eu também morria de medo, eu achava que ninguém me daria uma oportunidade por não ter experiência na área.
Mas a real é que enquanto a gente estuda programação a gente vai acumulando experiência com os projetinhos pessoais que formam nosso portfólio, a gente tem experiência em aprender a aprender e isso é muito importante pra conseguir a primeira oportunidade.
As empresas comprometidas em desenvolver pessoas em início de carreira entendem isso, elas sabem que você pode não ter vivência com metodologias ágeis, com colaboração em time e com melhores práticas de desenvolvimento de software.
Mas se você fez uma migração de carreira, por exemplo, você está trazendo bagagem e repertório da posição anterior, além de muitas habilidades comportamentais (as famosas soft skills).
E algumas empresas estão também criando programas educacionais pra te ajudar nesse início de jornada. Muitos deles com contratação CLT, ou seja você recebe salário e benefícios para estudar dentro da empresa.
E logo após ser encaixada num time.. Uma boa opção também pra quem está na faculdade, por exemplo, é buscar por estágios.
Agora, uma coisa é fato, se você não se inscrever em processos seletivos, aí sim é que você não vai conseguir a vaga dos sonhos. Por mais que seja doloroso receber alguns nãos, se jogue e aprenda com cada processo seletivo.
Além disso, foi super importante entender que cada pessoa tem seu tempo, e me comparar com elas é injusto. Tem gente que consegue a vaga ideal nas primeiras entrevistas, eu só consegui depois de mais de 20 tentativas.
Eu só fui ganhando mais confiança quando percebi que estudar e praticar todo o conhecimento adquirido também é experiência e que a minha vaga dos sonhos tava ali pertinho de mim.
“Quero ser dev, mas tenho medo de não ser suficiente e não dar conta das demandas”
A verdade é que a gente não é suficiente mesmo. Nem se a gente fosse senior seria suficiente e é por isso que as empresas precisam de times.
Quando a gente está estudando programação não tem a noção de que numa vaga como jr. a gente não precisa dominar 100% das ferramentas. O que precisamos é estar abertas para aprender e com o apoio do time a gente consegue ir mais longe.
Como falei antes, as empresas entendem isso. Por isso muitas delas criam programas educacionais para absorver e formar pessoas em inicio de carreira, a maioria com foco em diversidade. Eu mesma comecei minha carreira num programa desses a TWU – Thoughtworks University Brasil.
É bem verdade que bate logo uma ansiedade da nossa parte pra entregar resultado, logo nos primeiros meses. Mas se eu pudesse te dar um conselho seria: tenha paciência consigo mesma e mergulhe em entender os processos gerenciais do seu time, como por exemplo as cerimonias e planejamento das tarefas, mergulhe em entender as regras do negócio, o fluxo da pessoa usuária, a estratégia usada na qualidade e também como é o caminho pra produção.
No mais, confia no tempo que o dia a dia vai te dando experiência pra dominar a codebase (o código) do pojeto que você entrou. Essa visão mais ampla vai te dar segurança e autonomia pra agregar no projeto. Confia!
“Quero ser dev, mas tenho medo de compartilhar o pouco do conteúdo que sei e ser zombada”
Eu também morria de medo de julgamentos. A verdade é que eu ainda sinto esse medo. E toda vez que eu imagino o que as pessoas mais experientes de mercado podem pensar sobre meu conteúdo chega dá um friozinho na barriga. Esse medo é real.
Mas daí, eu respiro fundo e paro de me comparar. Eu lembro que não há nada que eu saiba tão pouco que eu não possa compartilhar. Eu lembro de pessoas que estão no comecinho da jornada para se tornar uma pessoa desenvolvedora, eu sei que meu conteúdo pode ajudar bastante.
Além do mais, toda vez que vou compartilhar algum conteúdo, eu estudo sobre. Então é uma troca linda onde todo mundo sai ganhando.
É… nesse iniciozinho da carreira, principalmente se você está vindo de uma área completamente diferente e se você faz parte de grupos subrrepresentados no mercado de tecnologia, você encara muitos desafios diariamente.
Não vou mentir para você, não é fácil, só que eu não passei por isso sozinha. E você também não precisa. Peça ajuda!
Peça mentorias, aposte no pair programming, faça parte de comunidades e faça também parte de programas imersivos em parceria com empresas atuantes no mercado. Sei lá, me manda uma DM, rs! (Eu demoro, mas respondo!)
E se puder, faça terapia! Simmm, procure ajuda profissional, pois fazer transição de carreira é uma tarefa muito árdua e revolucionária. Essa jornada coloca a gente pelo avesso e toda ajuda é válida.
Por fim, aproveito pra deixar um recadinho do coração: os erros na tela não dizem nada sobre você, na programação tá tudo bem errar dentro desse ambiente controlado que é o inicio de carreira, isso mostra que você está tentando coisas novas, está crescendo.
ERRE MAIS e tenha paciência pra resolver tudinho. Tenho certeza que você vai aprender com o processo. Eu to aprendendo muito! Mas, e se der medo? Vai com medo mesmo! Vamos juntas!
E você vai perceber o quanto essas ações podem fazer total diferença e você não se sentirá tão perdida.
4- Quero ser dev, e agora?
Pesquise sobre quais áreas existem e escolha a sua
No início, eu estava me sentindo exatamente assim, eu não sabia quais conteúdos estudar e me aprofundar pra me tornar uma dev.
E não era a falta de opções que me deixava perdida, era justamente o oposto, eram muitas opções, muitos conteúdos e isso tudo me deixava sem saber qual caminho seria mais efetivo.
É importante dizer também que o desenvolvimento é só uma pequena parte desse mercado gigantesco e que é cheio de oportunidades. Tem também as áreas de experiência da pessoa usuária, área de qualidade, a área de negócios, a área de dados, a área de segurança, de infraestrutura e muitas outras. Vale muito a pena pesquisar sobre todas elas e entender a que faz mais sentido pra você.
Aqui eu vou contar um pouquinho sobre a área que escolhi que é desenvolver software e desenvolver aplicações web. E dentro desse mundo existem 2 principais áreas que são: front-end e backend.
Vou dar um exemplo pra te ajudar a entender melhor esses dois termos. Imagina se construir software fosse como um restaurante: temos toda a parte de experiência da cliente, o cardápio, o atendimento, o espaço físico. Toda essa parte de interação da pessoa usuária chamamos de front-end ou lado do cliente.
Na prática a gente constrói essas telas lindonas com interface interativa e que sempre funciona muito bem, sem nenhum bug(erro) e sempre recebendo e enviando os dados corretamente.
Já no mesmo cenário do restaurante a cozinha, são os bastidores, o lugar onde a mágica acontece, ingredientes, dom da chef e receitas são transformados em pratos deliciosos e a gente não faz ideia de como são feitos.
A gente só recebe o prato lindão e apetitoso. Esse lugar de bastidores são como o backend, onde os dados são tratados, validados, enviados para serem armazenados no banco de dados ou disponibilizados quando solicitados, chamamos o backend também de lado do servidor.
Eu comecei fazendo cursos para me tornar front-end, fiz alguns cursos e estudei também de forma autodidata a área de backend. O que me abre muitas possibilidades.
Se você escolheu também começar por front-end esse vídeo pode te ajudar:
Estude lógica de programação
Independente da área que você escolher estudar, você vai precisar começar estudando lógica de programação e esse material aqui embaio pode te ajudar muito:
Entenda sua forma ideal de absorver conteúdo e se jogue
Eu precisei aprender a aprender. Entender como meu cérebro funcionava para absorver novos conteúdos, muitas vezes complexos pra mim.
Para complementar os estudos durante as aulas dos cursos imersivos que fiz, testei a combinação de alguns formatos: lendo, ouvindo, assistindo, mas as formas que mais funcionam pra mim são colocando a mão no código ou explicando para alguém
E você? Já sabe como funciona? Entender isso vai fazer muita diferença!
Desenvolva sua carreira enquanto aprende a desenvolver códigos
Quando fazemos uma migração de carreira, não estamos abandonando as experiências que acumulamos na carreira anterior ou na vida acadêmica.
Pelo contrário, todo aprendizado obtido em outras áreas vira repertório e bagagem e vão fazer de você uma deva incrível.
Leve em consideração as habilidades comportamentais que você desenvolveu. Elas são um super diferencial nesse mercado onde escrever linhas de códigos é importante, mas as relações humanas se sobressaem pois ninguém constrói software sozinha ou pensando apenas em suas próprias necessidades.
Referências pretas e femininas na área podem te inspirar e te fortalecer
Eu só comecei e estou crescendo na área por me inspirar em pessoas que se pareciam comigo. Essas referências me fortalecem e me mostram que tecnologia é sim o meu lugar.
Eu me inspiro todos os dias em pessoas como Nina Silva, Kizzy Terra, Monique Evelle, Nina da Hora, Rosi Teixeira, Karen Santos, Grazi Mendes entre outras. Toda vez que vejo os conteúdos delas meu coração vibra com as possibilidades e caminhos reais pra nós, mulheres pretas em tecnologia.
3 cursos grátis e online para formar mulheres em tecnologia
Esses cursos estão transformando as vidas e as carreiras de muitas mulheres cis e trans e de muitas travestis.
✅ @reprogramabr a seleção acontece várias vezes ao ano com foco em vulnerabilidade social
✅ @pretalab_ a seleção tem foco em recorte racial
✅ @minasprogramam a seleção também tem foco em recorte racial e interseccionalidades
Segue cada um dos @ pra ficar de olho na abertura das inscrições de cada bootcamp!
Curiosidade legal: fui aluna da Reprograma, já dei mentoria no Minas Programam e ainda dou aula na Pretalab e Reprograma. É uma honra fazer parte dessas comunidades poderosas.💜
5- Conclusão
Eu não tinha opção de dar errado, eu queria muito minha oportunidade como dev. Não foi um caminho fácil e ainda não é um caminho fácil.
Demanda muito foco, estudo, direcionamento e muitas horas estudando por dia. Mas é sim um caminho real e possível pra sua carreira também.
Eu espero que a minha história te inspire e te ajude de alguma forma. Deixa seu comentário contando como está sua migração de carreira e não esquece de compartilhar ! Vai que ajuda alguém? Te vejo no próximo texto!
Após esse texto você estará preparada com a base conceitual para realização de projetos utilizando ReactJS.
Os objetivos específicos são:
Facilitar o entendimento dos pilares do ReactJS (componentes, jsx e props)
Te preparar para criar aplicações em React do zero, usando um gerador de projetos e finalmente fazer o seu “Hello, world!”
O que é e quem usa ReactJS?
Já imaginou se você pudesse aprender a programar com a tecnologia que o Facebook, Instagram, WhatsApp, Twitter, Netflix, Airbnb, Notion, Trello, Tiktok e muitas outras gigantes usam? O que mudaria de possibilidades e oportunidades para sua carreira? Já parou pra refletir sobre isso?
Pois bem, react é uma biblioteca JavaScript usada para criar interfaces para pessoas usuárias.
Já quero abrir um parênteses aqui pra explicar que bibliotecas são conjuntos de funcionalidades criadas por outras pessoas desenvolvedoras que passaram por grandes problemas, criaram soluções e resolveram deixar a solução disponível em pacotes para que outras pessoas possam usar. Boazinhas, né? Eu amooo!rs
E que interfaces de usuários são aquelas telas lindas e cheias de funções que as pessoas usuárias podem interagir. No Instagram por exemplo: a tela de login, o feed onde os posts aparecem, o explorar, os stories, cada pequeno botão de curtir, compartilhar, comentar enfim.
Sim, react e á uma das tecnologias que essas empresas que eu falei e muitas outras do Brasil e do mundo usam. Eu mesma trabalho com essa tecnologia dentro da Thoughtworks. 🙂
A grande vantagem é que trabalhar com React torna a vida da pessoa desenvolvedora mais fácil, pois a gente consegue criar soluções complexas de uma maneira mais simples e em menos tempo.
Além disso tudo, é importante saber também que com React é possível criar SPA. Um acrônimo para Single Page Application que é uma única página web com super poderes para lidar com diferentes dados a partir das interações das pessoas usuárias.
Na prática, quando alguém clica num botão para abrir uma página nova, o que acontece por debaixo dos panos é a atualização de uma pequena parte de nossa única tela, em vez de atualizar a página inteira para mostrar o esperado.
Eu sei que ainda tá muito abstrato pra visualizar, mas daqui a pouquinho vai fazer mais sentido. Confia em mim e vamos que vamos!
Criando e entendendo meu primeiro projeto reactjs, render, estrutura de pastas, apagando arquivos padrão)
Eu sou uma pessoa supersticiosa e me contaram que toda vez que a gente está aprendendo alguma tecnologia nova, dá sorte começar com um hello world! Então vamos nessa! rs
Para essas aulas, vamos usar o editor de códido, vs code. No meu computador eu tenho também o NodeJS instalado na versão LTS e também o gerenciador de pacotes npm.
Como saber se tenho o node instalado? Abra um terminal e digite o comando abaixo:
node -v
Seu retorno positivo será um número parecido com esse, que é a versão correspondente: v14.17.0
Se seu retorno não for do modo acima, é porque você ainda não tem, acesse o link abaixo para instalar.
Lembra que eu falei que react é uma biblioteca e que a gente pode acessar e usar? Vamos fazer isso, no terminal rode o comando abaixo. Ele vai criar uma pasta contendo algumas outras pastas e arquivos dentro. Não se assuste! Demora um pouco até ficar pronto, rs.
Terminou e deu tudo certo, quando aparecer no terminal: Done. now run!
Ainda no terminal, ele nos dá uma sugestão de entrar na pasta de nosso projeto cd nome-do-app
Baixar as dependências com npm install
Depois rodar com npm run dev
Vamos fazer isso!
Ele irá abrir um navegador sozinho usando a porta localhost:3000 e é lá que você consegue ter uma prévia de como sua página está ficando.
Perceba que ele rodou uma página pronta! A gente só precisou rodar alguns pequenos comandos no terminal, certo?
Vamos trocar esse conteúdo pelo nosso hello world.
Vá até src > App.jsx
Apague a div e tudo que está dentro dela e escreva no lugar: Olá, Mundo!
Salve e volte para o navegador!
Uhullllll, agora vamos começar com tudooo e entender como estamos escrevendo num arquivo javascript/JSX e fazendo aparecer no html. <3
Entenda as pastas e arquivos
node_modules
index.html
.gitignore
package.json
package-lock.json
vite.config.js
src
app.jsx main.jsx outros arquivos que não nos interessam agora
Componentes e JSX
Em react tudo é componente! Pequenas partes onde podemos encapsular/guardar códigos e reutilizar sempre que necessário.
Se liga aqui no Instagram. Deve existir lá no código deles um componente chamado perfil. Olha como todos são exatamente iguais. tem o nome, a imagem, a quantidade de seguidores, seguindo, publicações, a Bio. Só o conteúdo muda de uma usuária pra outra, certo?
Se alguma funcionalidade muda, então fica muito mais fácil fazer uma manutenção, você sabe exatamente onde o código vai estar. Basta ir no componente e mudar onde a lógica está encapsulada.
Vamos aprender a criar um componente react.
Existem duas formas de criar componentes: classes e funcões.
Aqui, vamos focar somente em funções, pois em 2018 o time que criou o react introduziu uma forma de resolver problemas onde antes somente componentes com classes poderiam fazer.
Eu chamo isso de React moderninho! haha Você vai curtir, mas na próxima aula!
Um componente é justamente uma função que retorna um HTML. e quando temos javascript misturado com html chamamos de jsx.
Vamos à prática: Crio um arquivo com extensão jsx ou js iniciando o nome com letra maiúscula.
Dentro do arquivo crio e exporto uma função. Que poderei importar e usar em qualquer outro componente no meu projeto.
function SayHello() {
return(
<h1>Hello</h1>
)
}
export default SayHello
function Title() {
return(
<h1>Eu sou um título lindão</h1>
)
}
export default Title
Props e Children
Lembra do componente de perfil que a gente tá supondo que o instagram deve ter? Como será que eles fazem pra mudar os conteúdos sempre que identificam que estamos mudando de perfil ao acessar?
Uma das soluções para fazer isso seria usando as props, ou propriedades. Vamos à prática. Temos o componente Title que para cada página esse título irá mudar. A gente não precisa criar um h1 toda vez e criar todo estilo novamente. Vamos encapsular em um componente e permitir que por props ele receba conteúdos diferentes para o mesmo componente.
function Title(props) {
return(
<h1>{props.text}</h1>
)
}
export default Title
Ao usar esse componente, por exemplo no App.js ficaria dessa forma:
import Title from "caminho para o arquivo Title"
function App() {
return(
<div>
<Title text="Home"/>
</div>
)
}
Dentro das props também existem o children e basicamnete em vez de usar dentro de atributos em tags de autofechamento usaríamos como conteúdo em componentes de fechamento e de abertura. Assim:
function Name(props) {
return(
<p>{props.children}</p>
)
}
export default Name
Ao usar esse componente, por exemplo no App.js ficaria dessa forma:
import Title from "caminho para o arquivo Name"
function App() {
return(
<div>
<Name>Simara Conceição</Name>
</div>
)
}
É isso! Espero que esse texto tenha te ajudado a dar os primeiros passos com ReactJS. Deixa suas dúvidas nos comentários! Até mais!
Se você decidir se tornar uma pessoa desenvolvedora e for perguntar para alguém da área por onde deve começar, a resposta provavelmente será unânime: comece por lógica de programação.
Se for pesquisar na internet, em canais ou perfis de pessoas da área também vai ouvir: comece por lógica de programação.
Mas afinal, como dar os primeiros passos para aprender a programar e sair do zero pra trilhar um caminho nessa carreira que tá cheia de oportunidades por aí e que remunera bem comparada a outras carreiras, além de oferecer ótimos benefícios mesmo para pessoas iniciantes?
Se eu te contasse que é possível aprender lógica de programação de forma descomplicada, você acreditaria? Pois bem, é isso que vou tentar fazer aqui neste artigo, separei alguns tópicos essenciais para pessoas que nunca tiveram contato com programação possam entender quais seriam os primeiros passos. Vamos nessa?
O que é lógica de programação
Lógica de programação é o processo mental de criar instruções para o computador.
Essa é a parte que a gente já começa antes mesmo de colocar a mão no computador.
É a parte de pensar num passo a passo finito e lógico para resolução de um problema.
E saber estruturar a lógica utilizando um fluxograma ou pseudocódigo é um bom caminho de representar sua lógica antes de partir para uma linguagem de programação.
Aquela ajudinha com as palavras novas:
Fluxograma é um desenho pra representar fluxos ou processos, tipo esse aqui da imagem abaixo. Você pode usar o site lucidchart pra aprender a criar seus fluxogramas.
Pseudocódigo é a representação descrita de cada passo que seu código deverá fazer. Ainda não é o código em si, e é escrita num idioma como português. Aqui a carinha de um pseudocódigo, tirei do site visualg3. Que é um programa onde você pode criar suas instruções em Portugol(também conhecido como português estruturado, uma forma de escrever pseudocódigo em português como na imagem abaixo).
A lógica de programação é importante porque vai te ajudar a desenvolver seu raciocínio lógico para organizar as instruções e se preparar para construir suas primeiras linhas de código e além.
É bastante importante começar com exemplos simples desde somar 2 números ou calcular a média, até aprender a criar instruções maiores que resolvem problemas mais complexos.
Portugol x linguagem de programação
Portugol não é uma linguagem de programação, ela é um método que só existe como forma de facilitar o ensino de pseudocódigo em português. Foi criado pelos professores Antonio Carlos Nicolodi (Brasil) e Antonio Mannso (Portugal) nos anos 80.
Um ponto bastante importante de saber desde o dia zero é que também é possível treinar lógica de programação aplicada em uma linguagem de programação. Em vez de passar somente pelo portugol. E foi exatamente o que eu fiz utilizando a linguagem javascript, inclusive criei uma playlist no meu canal pra quem deseja iniciar na lógica de programação aplicada com javascript..
Uma curiosidade legal de entender é que por debaixo dos panos o computador só entende zeros e uns. Mas como é que hoje é possível escrever de uma forma mais próxima da linguagem humana e ele entender?
Tem uma série de documentários bem legal na Netflix que é a “Explicando” No E6T2: Explicando Código de programação eles dizem assim: “Escrever programas em zeros e uns não é escalável. As pessoas queriam mais da potência que escrever códigos oferecia. Mas elas precisavam de uma maneira mais fácil de fazer isso. (…)
Com linguagens que fossem mais próximas da linguagem humana. Por isso criaram as linguagens de programação.”
Por exemplo: C++, Ruby, Java, C, Cobol, Python, Javascript e muitas outras.
No seu comecinho dos estudos não vai adiantar você querer aprender todas elas, vai ser frustrante e vai te desanimar muito nos estudos. Depois de escolher uma linguagem, a primeira coisa a se fazer é entender como aplicar a lógica de programação.
Existem algumas instruções que se repetem a cada linguagem, o que muda é a sintaxe, ou seja a forma de escrever. Mas na maioria das vezes as pecinhas que precisamos juntar pra transformar nossos algoritmos em linhas de códigos são respostas pra essas aqui:
Como guardar uma informação na memória do computador para utilizar novamente, que são as variáveis
Quais tipos de dados preciso conhecer nessa linguagem
Como fazer as operações matemáticas nessa linguagem
Como faço pra que o computador entenda que eu desejo que ele execute uma ação, um verbo ou seja uma função
Como faço pra o computador entender que eu quero escrever uma estrutura condicional, onde ele deve tomar decisões diferentes em cada caso informado(os famosos if/else
Como faço pra um computador repetir alguma instrução uma determinada quantidade de vezes (os famosos laços de repetição)
A gente não precisa decorar a sintaxe de uma linguagem de programação. No início dos estudos a gente vai errar mesmo, eu lembro como eu tinha que pesquisar e anotar cada coisinha, pois eu esquecia toda hora e quebrava muito minha cabeça.
As coisas só vão ficando mais fluídas com a prática diária. Agora, uma coisa importante demais é você entender quais pecinhas usar pra ir montando seu passo a passo lógico pra resolver aquele determinado problema.
Pensamento computacional
A primeira vez que vi o termo Pensamento Computacional foi num curso da Camila Achutti que é uma referência na área de tecnologia, foi onde também soube que o pensamento computacional passou a integrar a Base Nacional Comum Curricular (BNCC) e que deve ser ensinado nas escolas tanto para professores e quanto para pessoas estudantes.
E isso é sensacional, pois o pensamento computacional pode nos ajudar a desenvolver um pensamento lógico(nossa forma de pensar para resolver problemas).
É bem verdade que quando ouvimos a palavra computacional remetemos a algo digital ou que tenha correlação com um computador, mas na verdade diz respeito a nossa forma pensar para resolver problemas. Veja aqui embaixo uma introdução aos 4 pilares do Pensamento Computacional:
Decomposição: dividir um problema em partes menores.
Abstração: filtrar informações
Padrão: reconhecer padrões nas informações
Algoritmos: criar um passo a passo lógico para resolver o problema
Algoritmos
Você já deve ter escutado o termo algoritmo pelo menos uma vez, seja nas redes sociais, no noticiário, num escândalo, num documentário ou numa roda entre amigas.
Mas o que é um algoritmo? Segundo o livro Algoritmos para viver: a ciência exata das relações humanas: “algoritmo é apenas uma sequência finita de passos que se usa para resolver um problema, e algoritmos são muito mais amplos e muito mais antigos do que o computador.”
Deixa eu tentar ilustrar aqui:
Já parou pra pensar como eram as bibliotecas antes?
Na minha época de escola lá para o ensino médio surgiram os laboratórios de informática, mas antes disso me lembro da gente frequentar bastante a biblioteca com fichinha de papel e busca pelos livros manualmente.
Era um caos, com os sistemas isso foi resolvido de uma forma linda. Hoje em dia, ficou muito mais prático eu usar o google pra buscar sobre qualquer coisa que eu queira estudar.
E com o kindle ter qualquer livro na palma da minha mão de forma online, é muito incrível né? Eu ainda leio muito livro físico, rs, mas pelo menos o processo de compra é fluído graças também à tecnologia.
Eu também sou da época que alugava dvds para assistir a um filme. Agora com os serviços de streaming como Netflix, Disney, Amazon Prime entre outros, olha como isso foi resolvido, uma lista imensa de filmes e séries na palma da minha mão em qualquer lugar por uma assinatura mensal.
Esses e outros são alguns problemas que se repetem ao longo do tempo e por isso existem alguns algoritmos comuns que são usados para ordenar e buscar informações de forma eficiente.
Então se hoje a gente consegue ter informação na palma da nossa mão é graças aos algoritmos. E aprender lógica de programação é o primeiro passo, pra gente se tornar a pessoa que cria esses algoritmos que resolvem problemas reais e complexos.
Primeiro a gente pensa de forma lógica e depois a gente estrutura esse pensamento com um passo a passo que pode ser representado com as ferramentas que você já conheceu aqui nesse post: o pseudocódigo e o fluxograma. Depois a gente transforma isso em linhas de códigos numa linguagem que o computador entenda.
3 Sites para praticar lógica de programação
Pra desenvolver seu pensamento lógico e melhorar sua lógica de programação usando linguagens de programação, você pode treinar em sites de desafios. Vou deixar aqui embaixo 3 deles:
Hackerrank
O Hackerrank é um site usado para combinar empresas e pessoas desenvolvedoras, muitas empresas usam os desafios da plataforma para recrutar pessoas para o seu time. Além dessa parte de serviços para empresas, tem excelentes trilhas e desafios para devs, então é uma boa ferramenta treinar lógica aplicada.
Exercism
O exercism é um site com mais de 3450 exercícios pra você treinar programação. Além disso, eles disponibilizam mentoria com pessoas reais que podem fornecer feedbacks para seus códigos.
Code wars
O Code wars é um site com desafios de códigos criados pela comunidade de pessoas desenvolvedoras que participam. Você pode depois de um tempo criar desafios por lá também.
Minha experiência aprendendo lógica de programação
E pra finalizar, deixa eu te contar como foi comigo nesse momento inicial dos meus estudos. Eu estudei a linguagem Javascript, pois era a linguagem que os cursos que eu participei abordavam. Não foi um período fácil pra mim, pois eu estava vendo uma coisa completamente nova.
Inclusive, demorou bastante pra fazer algum sentido dentro da minha cabeça, nos primeiros cursos entre janeiro e junho de 2019, eu só aceitava os conteúdos que eram passados e reproduzia exemplos e mais exemplos. Do terceiro curso em diante no segundo semestre de 2019, eu já começava dizendo: Ahhhhh, então era isso que aquela determinada aula queria passar…
Outra dificuldade minha era que eu queria pular etapas, eu sou ansiosa gente, quando pegava um exercicio, eu nao queria passar pelo teste de mesa que é uma forma de você exercitar passo a passo de como seu código iria funcionar, eu já queria ir com tudo pra mão no código, sem passar por esse processo de pensar um passo a passo lógico. O resultado disso você já sabe né? Frustração e mais frustração.
Não to querendo dizer que com você vai ser exatamente assim. Afinal, cada pessoa tem o seu tempo e a sua forma de funcionar. Mas uma coisa quase sempre vai ser igual: você precisa praticar muito. Lógica de programação não é dom, é uma habilidade e como outra qualquer você pode aprender se praticar muitão e entender linha a linha do que você está escrevendo.
Ahhh Simara então você já é bruxona na lógica de programação? Genteeee, mais de 3 anos depois e eu ainda pratico muito, principalmente quando vou dar algumas aulas de lógica de programação aplicada pra iniciantes. É realmente como aprender um novo idioma, se não praticar já era.
Conclusão
Eu espero que esse texto tenha te ajudado a desmistificar esse comecinho dos estudos. Me conta nos comentários em qual etapa dos estudos você está! Até o próximo texto! <3
Sair do zero e dar os primeiros passos nos estudos de desenvolvimento de software não é fácil. Isso sem contar o super desafio que é avançar nos estudos.
E mesmo criando planos mirabolantes, metas alcançáveis e tendo muita vontade de virar o jogo na minha migração de carreira pra tecnologia, eu escorregava. Tinha dias que o desânimo me vencia. E eu ficava frustrada e ansiosa por estar falhando comigo mesma. E às vezes era super difícil sair desse lugar de desânimo.
Eu passei 2 longos anos estudando e só nos últimos 3 meses antes de encontrar meu primeiro emprego como dev foi que entendi minha forma de funcionar para reter o aprendizado e o mais importante para ter uma constância nos estudos.
E olha que maravilha: eu vou contar tudinho aqui nesse texto. Mas já adianto que talvez você se decepcione comigo, pois eu não vou te contar nenhuma fórmula mágica, hack ou atalho. Isso realmente não existe. Existe o que funciona pra você.
Então eu vou apenas contar o que funciona pra mim, e vai que te ajuda ou te inspira! Vamos nessa?
Um pouco de contexto e reflexão
Eu sou o tipo de pessoa que fica procurando mensagens profundas em tudo. Eu tava assistindo Shang-Chi e a Lenda dos Dez Aneis, inclusive um dos melhores filmes da Marvel na minha humilde opinião. 😳😍
Não vou dar spoiler pra quem não viu ainda, mas tem essa cena que me fez refletir, é uma jovem conversando com uma anciã.
A jovem disse assim: ” Adoro isso de vocês saberem exatamente o que querem e passarem a vida toda se aperfeiçoando nisso. Eu queria ser mais assim. Toda vez que fico razoavelmente boa em algo eu desisto e começo algo novo.”
E a anciã respondeu: “Se não mirar em nada, não acertará em nada.”
É óbvio que essa cena me fez refletir sobre alguns pontos que eu achei importante falar aqui: a diferença entre ser multipotencial e multitarefa. E também a relação entre metas e disciplina. Como entender esses conceitos pode me ajudar na prática. E por fim, como não ceder às distrações.
Multipontencial x Multitarefa
Estes dois termos possuem significados completamente diferentes.
Enquanto multipotencialidade é a habilidade de mergulhar em diferentes paixões e focar nesses interesses até se tornar uma pessoa realmente boa neles.
Ser multitarefa é se iludir confundindo ser produtiva com o fato de se manter ocupada fazendo muitas coisas quase sempre inacabadas ou sem qualidade/profundidade.
Eu ouvi o termo “multipotencialidade” pela primeira vez, no TED de Emily Wapnick e eu fiquei encantada demais, eu me identifiquei completamente. Finalmente, eu estava liberada para ter interesses e paixões desconexas e ser boa neles.
Metas x disciplina
Mas pra realmente me tornar boa em algo, como aprender a programar, era preciso estar mais concentrada e fazendo progresso nos esforços profundos que realmente importavam.
E uma excelente ferramenta para fazer isso era ter metas SMART, ou seja que me diziam com muita precisão as respostas dessas perguntas aqui embaixo:
O que você quer?
Como você vai realizar e medir avanço?
Tem sinergia com o que você deseja a curto e longo prazo?
Em quanto tempo irá realizar?
Ter essas informações mapeadas me ajudam muito a permanecer no eixo.
E por falar nisso, eu migrei de carreira no contexto de pandemia, onde nem sempre a gente acordava com toda motivação para ter um dia produtivo. Ter uma rotina me ajudava muito a manter o foco nos dias difíceis.
É como acordar cedo ou construir hábitos mais saudáveis. No início, a gente força e vai sem vontade mesmo, só pra criar o hábito. Depois, nosso corpo e nossa mente já reagem no automático.
Motivação é besteira. A maioria dos dias a gente não se sente 100% e é importante seguir com consistência pra alcançar nossos objetivos mesmo nos dias ruins.
Tá, mas como saber disso me ajudou?
Vou dar um salto no tempo e contar como tem sido minha rotina agora, enquanto tenho que equilibrar criação de conteúdo, dia a dia no trabalho CLT e meus deveres na vida pessoal.
Eu bloqueio duas horas do meu dia pra estudar (seg/qua/sex – programação, ter/qui – inglês)
Antes do trabalho separo 1 hora pra treinar
A noite, eu me desconecto pra recarregar: lendo, jogando ou assistindo
Meu mês de conteúdo é planejado sempre no mês anterior e eu uso o trello pra me ajudar em cada etapa de criação
Criei uma estratégia e uma rotina de criação pra cada canal/rede onde tenho presença
Ainda não cheguei no meu modelo ideal pra criar podcast e blog. Mas já me viro muito bem com youtube e instagram (que separo apenas um dia pra criar pra cada canal).
LinkedIn é o melhor dos mundos pra mim, pois decidi criar conteúdos que são cortes do podcast, do blog e do youtube.
Tenho me alimentado melhor, separo 2 horas no domingo pra cozinhar todas as refeições da semana.
Tenho tido mais atenção pra qualidade e quantidade do meu sono, além também de consumir a quantidade ideal diária de água.
A carinha de meu trello:
A única diferença nessa rotina pra a da época que eu estava focada em aplicar pra vagas era que eu dedicava entre 4 e 6 horas por dia pra estudar. Agora não tenho todo esse tempo.
Muita gente não tem, então o que importa é a constância de quantos dias seguidos eu faço isso com muita qualidade nas poucas horas que eu tenho e não uma quantidade de horas imensa por dia sem foco e qualidade nas tarefas.
Mas pra entender qual o formato de rotina mais efetivo pra cada momento, eu tento responder estas perguntas:
Faz sentido pra mim?
Está alinhada com as outras áreas da minha vida: sono, alimentação, exercício físico, diversão, saúde mental?
Eu tenho um roadmap, uma trilha pra o que eu quero estudar?
Eu tenho metas?
Eu tenho um planejamento?
Eu tenho como medir meu avanço diário?
Depois eu testo por dias, semanas, meses seguidos, vou adaptando e tento fazer funcionar muito bem. E eu estou sempre aberta pra fazer ajustes ou mudar quando passar a não fazer mais sentido.
Como não ceder às distrações
Segundo Cal Newport, professor de ciência da computação e autor best-seller do New York Times, com os livros Digital Minimalism e Deep Work:
A maioria das pessoas passa o dia reagindo às mensagens
Criando distração constante, tornando impossível pensar com objetividade.
Gerando sentimentos persistentes de ansiedade e sobrecarga.
Impedindo o progresso nos esforços profundos que realmente importam.
Fazendo parecer que seu trabalho nunca termina, frustrando as tentativas de relaxar ou recarregar.
Então eu tenho muita atenção quando uso alguma algum template ou ferramenta, se eu to fugindo desses tópicos.
Eu gosto de usar o método de bloquear tempo pra focar nas minhas atividades. Já testei o pomodoro mas não rola pra mim, porque eu costumo demorar pra me concentrar, mas eu adaptei e depois de 1h ou 2h focada eu levanto, tiro uma pausa, brinco com Bob, meu cachorro, ouço uma música, faço algo pra desconectar e depois eu volto com foco total pra uma próximo bloco.
No notion e no miro você pode usar alguns modelos prontos e preencher com seus dados. Comprei até o planner do Call Newport mas também não rolou pra mim, eu não tinha a disciplina de preencher e me dá TOC coisas não preenchidas, rs. Mas meu bloco de notas no celular, o trello e a agenda do Google são os meus aliados pra controlar minha rotina diária de foco. A real é que não importa muito qual a ferramenta que você ta usando, até papel e caneta funcionam desde que você cumpra o que se propôs e adapte o que precisa. Teste pra entender melhor o que você prefere.
Eu gosto muito também de seguir trilhas de estudos já estruturadas em cursos ou em playlists no youtube, pois fica mais fácil mensurar as metas SMART e ir medindo o avanço.
E isso tudo foi tão decisivo pra mim, pois são esses pequenos avanços todos os dias que me trouxeram pra mais perto de alcançar minhas metas e me fizeram continuar seguindo com muita disciplina.
Eu amo marcar coisas como concluídas. Seja riscar um item numa lista ou finalizar um módulo de aulas. Não sou nenhuma especialista, mas é certeza que isso me libera algum hormônio que me ajuda biologicamente a seguir. E principalmente, nos dias que não me sinto feliz e motivada, consigo seguir com constância.
Não é que eu seja uma perfeição ao realizar TUDO. Eu sempre escorrego, mas tô sempre identificando onde estou errando, pra reparar e readaptar. A chave é se conhecer, se ouvir e se priorizar.
Conclusão
É isso, pessu! Agora é super importante dizer que esse fluxo de pensamento que a gente construiu nesse texto não vai nos livrar de escorregar em uma tarefa ou outra, ou até mesmo em agendas inteiras.
Mas a gente vai entender que falhar em alguns momentos, não é tão grave se temos a chance de atualizar, adaptar e continuar seguindo até concluir nossas metas de estudos de programação. Vamos nessa? Vamos juntas!
Quando ouvi a palavra serverless pela primeira vez, levei a tradução ao pé da letra e pensei que se tratava de um projeto onde não existiria um servidor. Mas não é bem isso…
E criei esse artigo pra te contar o que entendi sobre o assunto. Dessa forma acredito que pode rolar uma troca legal entre a gente: de um lado, eu vou consolidar meus estudos iniciais da arquitetura serverless e do outro, você fica conhecendo mais um ponto de vista sobre o assunto. Então aqui vou falar sobre:
O que é serverless
Quais os benefícios de usar serverless
Qual a importância de devs aprenderem a criar soluções serverless
Como criei experiência ao estudar serverless
Tutorial de “Hello, world!” na arquitetura serverless
O que é serverless?
Serverless é uma arquitetura orientada a eventos e não é que não exista um servidor, na real a gente não precisa se preocupar com a configuração de um servidor, pois o provedor de nuvem que usaremos fará isso pra gente.
Além disso, na arquitetura serverless, as aplicações são iniciadas apenas quando um evento aciona a execução do código da aplicação de forma dinâmica.
Dos modelos de serverless que existem aqui embaixo estão alguns dos mais populares:
BaaS – Backend as a Service, como o Firebase do Google Cloud Platform
FaaS – Function as a Service como AWS Lambda e Azure function
Quais os benefícios de usar serverless?
Mas você deve estar se perguntando, quais as vantagens de começar a usar serverless, não é mesmo? Dentre uma lista extensa de benefícios que fazem as empresas decidirem por usar serverless posso destacar estes 3:
A escalabilidade da aplicação é automática
A configuração de deploy é super simples
Só pagamos pelo que usamos
A arquitetura serverless popularizou quando as empresas entenderam que podem crescer sua infraestrutura com redução de custos e de forma automática.
Além disso, é possível usar serverless na linguagem de programação que o time já utiliza, facilitando ainda mais a adesão.
Qual a importância de devs aprenderem a criar soluções serverless?
Soluções serverless garantem facilidade no dia a dia de trabalho, para determinados projetos, onde muitas configurações já existem, como por exemplo de conteinerização, escalonamento e muitas outras.
Dessa forma, podemos nos concentrar em criar regras com qualidade, explorando o ágil e utilizando boas práticas.
Podemos também acessar diversas oportunidades ao sermos capazes de gerar crescimento para os negócios em que colaboramos com economia utilizando serverless.
Tenta uma coisa? Pesquisa no LinkedIn a quantidade de vagas disponíveis para quem tem esse conhecimento. Eu pesquisei aqui com o termo AWS Lambda e encontrei quase 400 vagas para o Brasil. Bastante, não?
Criando experiência enquanto estudo
Meu primeiro projeto serverless usando AWS Lambda do zero ao deploy
Minha primeira experiência com serverless foi realizando um projeto guiado, no curso Ignite da Rocketseat, no módulo de backend com Node.js nas aulas da maravilhosa Dani Leão.
A gente fez uma aplicação que cria e valida um certificado de conclusão de curso gerando uma versão pdf. Se liga no resultado abaixo!
A request de criação do certificado:
O pdf gerado:
Para isso utilizamos as tecnologias abaixo:
Typescript
Framework serverless
AWS Lambda
DynamoDb
S3
puppeteer
handlebars
Algumas lições aprendidas:
Como criar uma lambda
Tipagem da aws-lambda
Criei minha conta aws e configurei as credenciais na minha máquina
Como usar o dynamoDb offline
Como rodar o projeto serverless offline
Como fazer deploy da solução
O uso de algumas libs pra transformar data e pra gerar pdf
Como usar S3
Como consultar o log na aws
O principal aprendizado foi entender o arquivo serverless.ts e que ele pode ser no formato yml também
Como criar e rodar um projeto com o framework serverless usando o esbuild
Agora que você já sabe os motivos pelos quais deveria aprender a criar projetos usando a arquitetura serverless, chegou a hora de colocar a mão no código e vamos dar um hello world com serverless.
Aqui a gente vai fazer um tutorial rodando localmente, ou seja não faremos deploy na AWS.
Requisitos: É preciso ter instalado o “node”: “>=14.15.0”.
Passo 1: Instalar o framework serverless
Um boilerplate para gerar projetos aws lambda. Você pode ler mais detalhes aqui na documentação: https://www.serverless.com/
Comando:
npm install -g serverless
Verifique se instalou corretamente usando o comando:
serverless --version
Deverá retornar as versões instaladas.
Passo 2: Criar o projeto usando o template aws-nodejs-typescript
Passo 7: Dentro do arquivo serverless.ts mudar importação do arquivo hello
Importar a funcao via path, excluir importação que vem por default dos arquivos e pastas que excluímos.
Código:
// import the function via pathsfunctions: { hello: { handler: "src/functions/hello.handler", events: [ { http: { path: "hello", method: "get", cors: true } } ] } }
Passo 8: Incluir plugin serverless offline
Comando:
npm i serverless-offline -D
Inserir config de plugin no arquivo serverless.ts
Código:
plugins: ['serverless-offline'],
Observação
Como o arquivo serverless.ts estava antes por default:
Como o arquivo serverless.ts ficou após todas as alterações:
Passo 9: rodar projeto localmente
Comando:
serverless offline
Passo 10: acessar o link que aparece no terminal que é a request get
Resultado:
Conclusão
Espero que esse artigo te ajude a dar os primeiros passos com AWS Lambda. Se você tentou fazer o hello world e precisa de ajuda, pode consultar esse meu repo aqui: https://github.com/simaraconceicao/hello-serverless.
Caso queira trocar ideia sobre esse ou outro conteúdo, vou adorar te receber na comunidade do telegram quero ser dev: https://t.me/queroserdev
Como pessoas iniciantes na programação, uma das ferramentas que pode nos dar confiança em quase toda linha de código que a gente escreve são os testes unitários.
Além disso, o mercado espera que advoguemos pela qualidade do nosso trabalho. Por isso, em entrevistas de emprego costumam perguntar: “Você tem alguma familiaridade com testes unitários?”
E pra você que está estudando ReactJS, esse artigo vai te ajudar a responder essa pergunta com um “SIM”bem grandão. 🙂 Vamos nessa?
O que são testes unitários?
Testes unitários são testes realizados de forma isolada para garantir qualidade para pequenas partes do seu código, como as funções, as classes e por aí vai.
3 benefícios de realizar testes unitários
Encontrar e corrigir bugs, otimizando o tempo da pessoa QA
Aumentar a confiabilidade da sua aplicação
Servir como documentação
Vamos aprender como fazer os testes unitários dos componentes numa aplicação bem simples em reactjs?
Ferramentas
Em vez de usar Jest, vamos usar o vitest como ambiente para rodar nossos testes. Esta é uma alternativa para projetos criados com vite. Se você ainda não conhece o vitest, se liga no que sua própria documentação diz sobre ele:
Vitest é uma estrutura de teste de unidade extremamente rápida, desenvolvida pela Vite.
Já para criação do testes a gente vai automatizar a forma como a pessoa usuária poderia interagir com a nossa tela. Pra isso vamos usar o testing library react que segundo a documentação é:
Uma família completa de pacotes para criar testes utilizando boas praticas centradas no comportamento da pessoa usuária.
Entendendo um teste unitário
Bloco de teste
Renderizar o componente que queremos testar
Encontrar os elementos que queremos interagir
Interagir com esses elementos
Afirmar o resultado esperado
describe, test e expect
describe serve para criarmos um conjunto de testes
test serve para criar um caso de teste
expect serve para descrever o que esperamos com resultado ideal para aquele teste
screen é o que nos permite visualizar a tela e a partir daí encontrar os nós do DOM
render é o metodo que renderiza nosso componente no ambiente de testes
userEvent simula alguns eventos e interações da pessoa usuária
queryBy…/findBy… são as queries, alguns dos muitos metódos que nos ajudam a encontrar, buscar, trazer um ou mais elementos da tela
toBeInTheDocument/toHaveTextContent são os matchers, alguns dos muitos metodos que nos ajudam a comparar o resultado esperado com o resultado recebido. Eles nos ajudam também com o log de mensagens de erro.
Vamos para o tutorial
Configurando ambiente
Vamos usar o vite para criar nosso projeto que vem um contador por padrão, não esqueça de escolher react as duas vezes que aparecem para escolher a linguagem:
npm create vite@latest aprendendo-testes
Vamos entrar no projeto:
cd aprendendo-testes
Vamos baixar as dependências importante para o projeto reactjs funcionar:
npm install
Agora vamos configurar nosso projeto para receber e rodar testes unitários com vitest e testing library react:
Passo 1: Instalar as dependências como dependências de desenvolvimento
import '@testing-library/jest-dom'
export { default as userEvent } from '@testing-library/user-event'
Agora vamos criar nossos testes:
Passo 5: Criar arquivo de testes
App.test.jsx
Passo 6: Incluir a config do jsdom no arquivo de cada teste
/**
* @vitest-environment jsdom
*/
Passo 7: Importar tudo que é necessário para realizar os testes
import { describe, test } from 'vitest'
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import App from './App'
Passo 8: Agora vamos escrever nosso primeiro teste que cobre os caos de renderizar corretamente o h1 e testa se o contador funciona:
describe('App', () => {
test('should return the correct text', () => {
render(<App />)
expect(screen.getByText('Vite + React')).toBeInTheDocument()
})
test('should return 1 when the user click one time at button', () => {
render(<App />)
const buttonElement = screen.getByRole('button')
expect(screen.queryByText('count is 0')).toBeInTheDocument()
userEvent.click(buttonElement)
waitFor(() => expect(screen.queryByText('count is 1')).toBeInTheDocument() )
})
})
Passo 9: Agora vamos rodar nossos testes:
npm run test
ou
npm run test:ui
Prontinho! Esse aqui é o resultado esperado:
Espero que esse guia tenha te ajudado. Me conta nos comentários se tentou fazer.
Criei esse artigo pra compartilhar alguns dos principais desafios no início da carreira de uma pessoa desenvolvedora. Nele, eu aponto os problemas e aproveito também pra trazer algumas das vivências que me ajudam a enfrentá-los.
Mas antes disso, se você ainda não conhece minha trajetória profissional é importante saber que:
Eu fiz a migração de carreira para tech após os 30 anos e vindo de uma área completamente diferente.
Eu criei o podcast quero ser dev que inspira mulheres diversas a entrar na área de tecnologia.
Minha jornada como dev, começou em bootcamps (cursos imersivos com mão na massa) em 2019.
Hoje sou desenvolvedora na Thoughtworks e também dou aula de programação para iniciantes.
Agora, vamos aos desafios de uma dev iniciante:
Nesse iniciozinho da carreira, principalmente se você está vindo de uma área completamente diferente e se você faz parte de grupos subrrepresentados no mercado de tech, você encara muitos desafios diariamente. Não vou mentir para você, não é fácil e dariam muitos outros artigos como este para citá-los! Mas vou falar aqui sobre 3 deles que são muito frequentes:
1- Criar uma trilha de conhecimento que faça sentido
São muitos caminhos, muitas linguagens, muitas abordagens, muito conteúdo disponível. Qual linguagem de programação devo estudar? Qual área é melhor pra mim: dados, backend, front-end, produto, ux, negócio? O que vem depois do “Olá, mundo!”?
Saber criar um passo a passo coerente para o início de carreira é um super desafio, mas você não precisa passar por isso sozinha. Peça ajuda! Peça mentorias, faça parte de comunidades e faça também parte de programas imersivos em parceria com empresas atuantes no mercado. Tudo isso faz total diferença e você não se sentirá tão perdida.
2- Ganhar mais confiança. Quando eu sei que estou pronta?
Um dos maiores desafios de uma dev iniciante é se enxergar enquanto potência e referência. A gente sente medo de, praticamente, tudo. Desde um erro que dá no console, até de apagar algumas linhas de nosso código achando que vai acabar com tudo. Quem nunca comentou linhas e linhas, só pelo medo de botar tudo a perder? rs
Eu tenho trilhado uma jornada de muito estudo, criando portfólio e mesmo assim a síndrome da impostora bate no meu ombro às vezes. Mas nem tudo está perdido, vem aqui embaixo conferir como lido com isso. Vai que faz sentido pra você também!
Faça terapia! Simmm, procure ajuda profissional, pois fazer transição de carreira sobretudo num contexto de pandemia é uma tarefa muito árdua e revolucionária. Essa jornada coloca a gente pelo avesso e toda ajuda é válida.
Você pode também praticar muito e aumentar o seu repertório, sua bagagem. Além de também compartilhar o seu conhecimento. Não há nada que a gente saiba tão pouco que a gente não possa compartilhar. Com certeza alguém tá aí te observando em segredo e se inspirando em você!
Por isso, já aproveito pra deixar um recadinho do coração: os erros na tela não dizem nada sobre você, na programação tá tudo bem errar dentro desse ambiente controlado que é o inicio de carreira, isso mostra que você está tentando coisas novas, está crescendo. ERRE MAIS e se der medo? Vai com medo mesmo!
3- Ganhar autonomia para resolução dos problemas
Quando a gente começa no primeiro emprego como dev, tem muita ansiedade envolvida no processo. A gente queria muito aquela oportunidade, os processos seletivos são longos e super concorridos. A gente até celebra a vitória, mas daí o danado do medo volta.
E a gente volta a achar que vai ser impossível entender como aplicar a nossa lógica de programação para resolver problemas reais, sem errar a sintaxe da linguagem que estamos estudando. E normalmente, quando o primeiro erro aparece a gente trava.
Então para lidar com isso RESPIRE! Entenda que existem vários caminhos para se chegar a uma solução, não tem isso de certo ou errado, temos que entender que existe sim a solução ótima e ideal, mas ainda estamos no caminho para aprender a desenvolvê-la.
E você é Júnior, ou como eu gosto de falar, Sandy! Você é iniciante e tem todo um time para te dar suporte. Tem também todo um processo super estruturado que vai garantir que sua colaboração no código não vai quebrar a versão do sistema em produção(aquela onde as clientes realmente têm acesso).
Esses processos envolvem ambientes diferentes com estratégias de versionamento com um caminho para produção, revisão no seu código, testes unitários e automatizados, pareamento com devs experientes e tem muito mais dependendo da empresa que você iniciar.
Então abuse das suas habilidades de pesquisar com os termos-chave corretos e em fontes confiáveis, além de revisitar códigos que você já fez que parecem funcionar bem pra aquele contexto.
É legal também dividir os grandes desafios em partes menores para facilitar o processo de codar. Lembre-se da sua primeira aula de algoritmos e descreva o passo a passo finito que o computador deve percorrer para executar as instruções que você irá passar.
Por fim e não menos importante, aprenda sobre melhores práticas de desenvolvimento de software: metodologias ágeis, qualidade, contexto de negócio, CI/CD/feature toggle, padrão de projeto, codesmell, entre outras. Isso aqui vai virar o jogo a seu favor!
Conclusão
Isso é tudo, pessu! Compartilhe nos comentários mais desafios e soluções, vamos tornar esse início menos doloroso para nossas manas devas sandy!
Como diz o meme que tá rolando por aí, nosso dia a dia é assim, mas a gente se diverte e cresce muito: “Suave como um vulcão, tranquila como um vulcão, se joga no vulcão.” haha
Fiz 6 projetos de CRUD MongoDB, ao longo de 10 dias, com o objetivo de consolidar o meu aprendizado. E compartilho aqui a evolução e as lições aprendidas.
Iniciei minha migração para área de tecnologia em 2019, você pode conhecer essa história completa ouvindo o quero ser dev.
Motivação para criar esse desafio
Fui convidada para ensinar na Reprograma para mais de 40 mulheres iniciantes em backend como criar um CRUD MongoDB usando o mongoose.
E toda vez que estou me preparando para uma aula eu fico imersa no conteúdo pensando em construir a melhor experiência possível para minhas queridas alunas.
Eu embarquei nesse desafio, pois acredito que não há nada que a gente saiba tão pouco que não possa compartilhar.
Quando conheci MongoDB
Eu tenho uma história engraçada sobre como me apaixonei pelo MongoDB, rs.
Em 2020, antes de entrar na TW eu apliquei pra lá em uma vaga de dev full stack. Lembro que a entrevista foi em inglês e com uma colaboradora baseada em NYC e uma das primeiras perguntas foi: você já usou nossa ferramenta?
E eu bem garota, faceira, ousada, iniciante mais que tudo respondi que não havia ainda tido a oportunidade de usar, mas que era uma entusiasta.
Fui reprovada, óbvio, rs. A verdade é que eu tinha ficado feliz demais só de ter sido considerada para vaga, ao ser convocada para essa primeira entrevista.
Saí de lá decidida a usar o MongoDB em meus projetinhos de estudo e ganhar mais maturidade em padrão de projeto e melhores práticas de desenvolvimento.
Afinal de contas, eu queria carreira em uma empresa global, que tivesse um programa explicito de diversidade e de desenvolvimento para as pessoas colaboradoras.
Fico feliz de ter alcançado tudo isso aqui na empresa que estou atualmente, a gente só consegue conectar os pontos olhando pra trás, já dizia Jobs. <3
O que é um CRUD?
Pra quem tá chegando agora, CRUD é um acrônimo para Create, Read, Update e Delete(criação, consulta, atualização e remoção de dados). São as 4 operações principais em um banco de dados.
Eu fiz o projeto 1 acompanhando o tutorial do Kyle e a partir do projeto 2 fui implementando e modificando conforme meu repertório ia deixando, rs.
Para ter embasamento teórico assisti aulas de de data driven, aulas de conceitos, mapa mental sobre tipos de bancos de dados. Aqui está um comparativo entre SQL e NoSQL:
NoSQL
Surgiu no final dos anos 90 e como uma alternativa de natureza não relacional.
Possuem alta escalabilidade e desempenho.
Alguns tipos de bancos de dados não relacional: armazenamento de chave-valor, armazenamento column family, orientado a grafos e orientado a documentos.
SQL
RDBMS ou Sistema de Gerenciamento de Banco de Dados Relacional, armazenam dados em um formato estruturado, usando linhas, colunas e tabelas.
Structured Query Language, ou Linguagem de Consulta Estruturada ou SQL, é a linguagem de pesquisa declarativa padrão para banco de dados relacional.
Geralmente demanda distribuição vertical de servidores, o que gera mais custo, pois quanto mais dados, mais memória e mais disco um servidor precisa.
Aqui está um comparativo dos termos MongoDb e SQL:
A cada dia, ficava mais fluído entender a responsabilidade de cada arquivo, a lógica de cada função do CRUD, percebia os comportamentos e conseguia lidar melhor com os erros também.
Mas Simara, faz sentido criar basicamente o mesmo projeto 6 vezes? Faz muito sentido! De tanto repetir, eu comecei a não precisar consultar o tutorial ou algum projeto meu anterior.
O último então fluiu que só. Consegui desenhar toda a estratégia de como compartilhar o conhecimento com as meninas, comparando com o que elas já viram antes conectando pontos para o entendimento fluir melhor.
Começando com o MongoDb
Os dados são armazenados no formato que se parece muito com JSON, o que é uma grande facilidade para quem já programa com Javascript.
Podemos usar o Mongo pelo serviço de nuvem(cloud) ou localmente fazendo o download para nossa máquina (eu usei essa opção) e ainda é possível integrar as 2 formas.
Além disso, o Mongo possui seu driver com suas próprias queries(comandos para interação com o banco que se assemelham muito com javascript com orientação a objeto), podemos também usar uma interface gráfica(usei o MongoDb Compass) e ainda podemos usar um ODM, ferramenta que mapeia entre nosso objeto e a db(usei o mongoose).
Teste, teste e teste
Eu não criei uma estratégia de testes, mas fiz testes manuais com Insomnia e tratei os possíveis erros para retornar status e mensagens coerentes.
Não usei o driver do MongoDB, usei a interface gráfica MongoCompass para verificar se meus dados estavam salvando direitinho.
Mongoose faz um meio de campo lindão entre nosso projeto e o MongoDb
Sabe quando a gente inventa de editar uma foto no photoshop, mesmo sabendo que existem filtros prontos que fazem um ótimo trabalho? Então usar o mongoose é apelar para templates prontos, lindos e rápidos.
– Mas muita atenção, pois a comunicação dele com o MongoDB é feita de forma assíncrona.
– Passando nossa string de conexão e informações default é possível fazer a Criação da conexão com a db e também tratar os erros.
– Mas o melhor de todos os pontos, é que ele cria nosso model, informando exatamente como nossos documentos e collections serão. <3
Separar as responsabilidades faz sentido demais
A partir do terceiro projeto fui percebendo o quanto os arquivos de server e de routes estava ficando densos e estranhos com tantas informações, dessa forma modularizei melhor e separei a minha lógica. Você pode perceber a diferença do primeiro para o último.
Compartilhar conhecimento/vivência é disparada a melhor maneira para aprender de forma eficiente
Repito: não há nada que a gente saiba tão pouco que não possa compartilhar.
Estou em constante aprendizado, nessa minha rotina de transição, mas eu só tenho segurança pra dizer que entendi algo de verdade depois que eu compartilho esse conhecimento.
Além disso, compartilhar é uma troca linda e eu sempre aprendo muito com essas vivências. <3
Próximos passos
Quero me aventurar com infra e fazer o deploy de algum desses CRUDs, permitindo de forma pública as integrações e também penso em implementar uma estratégia de testes automatizados.
É isso, pessu! Me enviem feedbacks sobre esse artigo e sobre essa minha forma de estudar.Vou amar trocar ideias com vocês. Até a próxima!
Quem me conhece sabe o quanto sou apaixonada por educação e tecnologia. E é justamente por essa paixão que minha carreira gira em torno dessas duas áreas.
Meus olhos brilham tanto quando meu código funciona, mas brilham ainda mais quando uma pessoa estudante consegue aprender algo novo comigo.
Eu acredito de verdade que não há nada que saibamos tão pouco que não possamos compartilhar, por isso tudo o que eu aprendo sobre tecnologia, programação e carreira em tech desde 2019 eu compartilho com a galeris que me acompanha nas redes sociais, no podcast quero ser dev, nas palestras e nas salas de aula.
Além disso, cada pessoa funciona de uma forma diferente no aprendizado e a minha forma eficiente é de longe quando estou planejando ou compartilhando algum conteúdo.
Já dizia um provérbio africano: “Não se senta para ensinar quem não senta para aprender.”
Vem embarcar comigo nas minhas participações em 2 podcasts das principais empresas de educação em tecnologia da atualidade: Gama Academy e Rocketseat.
Carreiras digitais da Gama Academy
A Gama é uma empresa de educação que prepara talentos para o mercado digital com programas educacionais.
Lá as pessoas participantes enfrentam desafios reais, se conectam com empresas digitais, recebem mentorias de profissionais que estão mandando bem em suas áreas e, ainda têm a oportunidade de ensinar e aprender com a comunidade visando o emprego, transição de carreira e o life long learning.
O podcast Carreiras Digitais é apresentado por Guilherme Junqueira, fundador da Gama Academy. Além disso é o ponto de encontro para falar sobre as profissões que mais crescem no Brasil e no mundo, as tendências de tecnologia e insights para sair da zona de conforto, a partir de temas diversos no campo da programação, do design, do marketing, das vendas e das habilidades comportamentais.
E eu fui convidada para participar do episódio programação para pessoas não programadoras.
Descrição do episódio
Desde que surgiu, a programação é vista com um estereótipo de dificuldade, como se apenas poucas pessoas pudessem entender e construir os códigos.
Atualmente, a programação está presente em quase tudo que vemos. Nos aplicativos do celular, nos aparelhos eletrônicos, nos programas de computador, redes sociais e muito mais.
Neste episódio do podcast “Carreiras Digitais”, converso com a programadora Simara Conceição, ex-aluna da Gama Academy, sobre as possibilidades dentro dessa profissão que não para de crescer, além de desmistificar alguns mitos sobre programação.
Dê o play aqui:
Alumni da Rocketseat
A Rocketseat surgiu para ser um filtro para todas as informações disponíveis no universo da programação. Afinal de contas, a tecnologia não para de evoluir.
Os programas da rocket nos guiam indo direto ao ponto no que importa. Somando tecnologias alinhadas com o mercado a uma jornada completa de aprendizado.
O Alumni é um podcast de entrevista com alunos, ex alunos e profissionais de programação, sobre educação, caminhos e dificuldades profissionais para quem trabalha com tecnologia no Brasil.
Uma conversa cujo propósito é ligar todas as histórias em uma narrativa onde a educação tem um papel fundamental. Estudo de caso, perfil, histórias, trajetórias. Conectar o público alvo com o propósito da rockeatseat.
Afinal, como que a educação e a tecnologia podem mudar a vida de alguém?
Descrição do episódio
Nesta edição de Alumni vamos conhecer a história de Simara Conceição, que é professora de desenvolvimento na ONG Reprograma e hoje atua como dev na ThoughtWorks, empresa de Chicago/US.
Simara conta como foi o processo de transição de carreira e como a Rocketseat participou da sua jornada como dev.
Junto com nosso apresentador Mayk Brito, ela fala sobre o impacto da educação e do foco em novos desafios.
