Como dar os primeiros passos no React?

Como dar os primeiros passos no React?

Dentre nossos últimos textos, abordamos um pouco do React, uma biblioteca para o desenvolvimento front-end baseado em JavaScript. Agora, vamos te fornecer dicas de como estudar e dar os primeiros passos em uma das bibliotecas mais famosas do JavaScript.

Nas próximas linhas, separamos três tipos e formas para você aprender e entender melhor o React.

Documentação

Dentro de TI, documentação é um conjunto de informações (documentos, textos, diagramas, mapas conceituais, códigos etc…), cujo intuito principal é auxiliar no entendimento de uma determinada tecnologia (mesmo sem a pessoa ter um contato prévio).

Ler (e entender), a documentação é super importante! Essa prática nos permite ir além e poupar diversas horas perdidas com bugs. Muitas vezes, as documentações são confusas, extensas e não amigáveis. Porém, para você que está querendo se aventurar e desbravar o mundo do React, tenho uma ótima notícia: A documentação oficial do React é bem organizada (dividi-se em 8 itens, que vão desde introdução a conceitos mais avançados). Além disso, possui dois tipos de tutoriais (um mais prático e outro mais teórico) específicos para quem deseja iniciar os estudos no React.

Se você é o tipo de pessoa que aprende melhor fazendo, ou seja, codando, o primeiro tutorial será uma excelente opção! Nele, você fará de forma prática um jogo da velha e ao mesmo tempo aprenderá conceitos essenciais do React, como por exemplo (O que é React? Como passar dados por props? Como fazer componentes interativos? Como fazer alterações de Estado?).

Caso você aprenda melhor seguindo um passo-a-passo, lendo, grifando, codando e descobrindo os conceitos, o segundo tutorial é o mais indicado. Dividido em cinco partes, aborda desde conceitos primordiais (introdução ao JSX , como renderizar elementos, props, etc…), até tópicos mais avançados como conceber uma aplicação em React do zero ao fim.

Ou seja, independentemente da forma que você melhor aprende, a documentação do React é uma fonte essencial para os seus estudos.

Cursos

Atualmente, o que não falta são cursos voltados para a aprendizagem de React. Se você é o tipo de pessoa que gosta de aprender com vídeos ou conteúdos mais estruturados, os cursos são uma ótima opção.

Citarei aqui alguns cursos interessantes para o seu aprendizado.

1. DIO (Português)

DIO, é uma plataforma brasileira que conta com mais de 600 mil pessoas desenvolvedoras como estudantes. O principal objetivo dela é impulsionar a sua carreira na velocidade do mercado de tecnologia (ou seja, rápido).

Na DIO, você pode conseguir bolsas de estudos para fazer bootcamps de empresas; há um sistema de rankeamento do seu perfil tornando-o visível para as empresas; há alguns projetos práticos onde você pode construir um portfólio bem legal e atrativo.

Em relação ao React, você pode estudar nessa ordem :

  • Introdução ao React.Js
  • Trabalhando com Componentes em React
  • Introdução ao Redux com React.Js
  • Desenvolvimento de Aplicações para a Internet com React.Js
  • Introdução ao React Hooks
  • Práticas Avançadas com React.Js

2. Scrimba (Inglês)

O Scrimba é um site que contém um excelente conteúdo sobre React.Js. Com 147 vídeos, subdivididos em quatro módulos, você aprenderá de forma gratuita sobre: JSX, Componentes Customizáveis, Props, Local Storage, Diferença entre props e estados e muito mais.

Além disso, você aprenderá o conteúdo com projetos práticos e turbinando o seu portfólio. Alguns projetos que serão construídos ao longo do curso são:

  • Landing Page com fatos interessantes sobre React
  • Cartão pessoal profissional
  • Clone do Airbnb
  • Uma página sobre viagens
  • Um gerador de memes
  • Aplicativo de Notas
  • Um Jogo
  • Quizz

3. Fullstackopen (Inglês e Espanhol)

Conteúdo de qualidade, completo e de forma gratuita? Se é isso que você procura, este é o site que você deve consultar.

A universidade de Helsinque na Finlândia juntamente com a empresa Houston de desenvolvimento de software desenvolveram o site Fullstackopen. A página, dividida em 12 partes, tem como intuito fornecer uma formação web full-stack (front-end e back-end) completa (React, Redux, Node.js, MongoDB, GraphQL e TypeScript) e aberta.

Quando trata-se de React, os módulos zero, um e cinco são específicos sobre o tema. Além disso, o site fornece vários exercícios para praticar. O legal desse projeto é que você pode escolher entre os seguintes idiomas: Suomi (finlandês), Inglês, Espanhol e Chinês.

Projetos

Uma ótima forma de aprender React é fazendo projetos práticos. Com isso, você assimila melhor o conteúdo e de bônus cria um bom portfólio.

Vamos listar aqui quatro projetos legais, porém você pode e deve ir além e buscar novos.

  1. Landing Page

Nesse mundão de internet, você já deve ter visto uma Landing Page. Landing Pages são páginas de destino cujo objetivo é converter o usuário. Ou seja, uma página simples, sem distração, para que o usuário realize alguma ação.

Um exemplo de Layout simples é esse a seguir. Na esquerda temos: em roxo uma imagem e em rosa podemos por um pequeno texto sobre o negócio. Já na direita, podemos fazer um formulário de inscrição, onde o primeiro campo é o Nome do usuário, o segundo é o E-mail e o terceiro campo é o Telefone para contato, além de um botão de inscrição.

Nesse projeto, você pode treinar alguns conceitos como: importação de imagem, estilização em React e React forms.

2. Lista com os seus Hobbies e Favoritos

Nesse projeto, você poderá usar sua criatividade para treinar o React.js. Crie alguns cartões (retângulo vermelho), e insira neles algumas informações (quadrados brancos) sobre os seus Hobbies. Caso você não tenha muitas atividades de interesse, tente fazer uma lista de músicas favoritas, livros lidos, séries que você curte ou artigos.

O importante aqui é você treinar alguns conceitos do React.Js como: Renderização de Listas e Componentização.

3. Diário de Viagem

Se tem algo mais interessante e agregador que viajar, eu desconheço. Que tal registrar os lugares que você já viajou ou deseja viajar e ainda aprender um pouquinho de React?

Para esse projeto, você pode seguir um layout igual ao de baixo. Um banner (retângulo azul) com a foto do local e alguns cards com informação sobre o lugar (retângulos vermelhos com branco). Aqui você treinará algumas habilidades do React, como: Componentização, importação de imagem e renderização de informações.

4. Calculadora

Geralmente, a calculadora é um projeto que fazemos quando estamos estudando JavaScript para treinar a lógica. Apesar de ser um mini-projeto, as operações são bem elaboradas. Como Layout, você pode usar o exemplo abaixo (visor — retângulo branco, botões de apagar e fazer operações — quadrados azuis , botões com os números — quadrados amarelos e botão de enter — retângulo roxo).

5. Dica Bônus — Ideias de Layout

Caso você não tenha gostado de nenhum projeto, ou não seja uma pessoa criativa, ou ainda está buscando referências para novos projetos, vou deixar aqui duas dicas super legais de sites para você se inspirar.

O primeiro é um que eu gosto bastante, chama-se Frontend Mentor. Nele, você consegue testar suas habilidades de pessoa desenvolvedora front-end por meio de mais de 70 desafios.

Os projetos são divididos em 5 níveis ( Novato — Júnior — Intermediário — Avançado — Guru), onde a base é feita com o Vanilla raíz (ou seja, o Javascript puro). Porém, você pode utilizar as referências para fazer o seu projeto React.

O segundo é o Dribbble. Ele é um site onde o foco é a exposição de projetos (ou seja, um portfólio). Nele, você pode consultar algumas referências de sites e tentar reproduzi-los em React.

….

Se você fez algum projeto do texto, compartilhe e marque a DUPLA !

Gostou do que leu? Então não se esqueça de dar mais de 50 claps e curtir nossas redes. É um pequeno gesto mas que auxilia este conteúdo impactar a vida de mais mulheres.

Deixe um comentário