Bem vindes ao Intensivo 2023 de React do Núcleo de Tecnologia do MTST!
Esta é a primeira aula da nossa jornada para aprender React, uma extensão do JavaScript que nos ajudarão a dar o próximo passo no desenvolvimento de sites.
-
Objetivo:
- Aprender React mexendo com o site do núcleo do MTST https://nucleodetecnologia.com.br/
-
Duração:
- maio/junho
- possivelmente renovando por mais dois meses (depende da disponibilidade dos tutores)
-
Funcionamento:
- Aulas semanais de 1 hora
- Plantões semanais também de uma hora
- Grupos de 2/3 alunos com um tutor
-
Expectativa:
- No fim desses dois meses esperamos aprender mais sobre react e;
- Consigamos reproduzir algumas partes do site do núclelo usando React
O React é uma ferramenta criada pelo Facebook em 2013 e hoje em dia é amplamente utilizada por pessoas desenvolvedoras no mundo todo.
React é uma ferramenta para construção de websites. A palavra "React" vem do inglês "Reagir". Em outras palavras, o React ajuda o programador a interpretar e "reagir" às informações que o usuário coloca no site. Abaixo, vamos explorar mais esta definição.
Quando desenvolvemos um website, precisamos capturar a interação do usuário. Imagine, por exemplo, que você está desenvolvendo um site para venda de salgadinhos de festa. Nesse site, as pessoas escolhem os salgados, as quantidades e informam o endereço para entrega. Perceba que nesse site têm muitas interações do usuário. A todo momento o usuário tem que informar o que quer, e o site precisa reagir à informação que a pessoa deu. Por exemplo, se o usuário colocar um endereço muito distante para a entrega, o site tem que reagir e informar que não é possível continuar. Ou se a pessoa pedir mais salgados do que tem disponível, o site tem que reagir à informação dizendo para o usuário que não é possível fazer o pedido.
O React é uma ferramenta que facilita muito a criação e manutenção de um site como o descrito acima.
Alguns motivos do porquê aprender React:
- Alta demanda no mercado de trabalho: React é a principal ferramenta de desenvolvimento web hoje em dia e inúmeras empresas, grandes e pequenas, a utilizam. Algumas empresas conhecidas são: Twitter, Netflix, Uber, Facebook + Instagram (Meta)
- Facilita o desenvolvimento de websites que demandam interações do usuário por conta da sua arquitetura baseada em componentes
- Pré-requisitos simples: HTML, CSS e Javascript
- O React é um projeto de código aberto onde milhares de pessoas contribuem constantemente com melhorias e atualizações
- Padronização da solução de problemas. Independente da empresa ou organização onde trabalham, desenvolvedores React utilizam o mesmo conceito para tarefas comuns como: dividir o código em múltiplos arquivos, modularização de componentes, performance, manutenção e etc
Os componentes em React são blocos de construção reutilizáveis que permitem criar interfaces de usuário dinâmicas e interativas. Eles são como peças de Lego que podem ser combinadas para construir um site completo.
Vamos imaginar agora como são estes componentes na prática. Imagine que você está fazendo um site para um restaurante, onde os fregueses podem reservar uma mesa. O site tem um Cabeçalho, o Cardápio e um Formulário para Reserva. Neste cenário podemos imaginar 3 componentes React:
- Cabeçalho
- Cardápio
- Formulário de Reserva
Uma vez que temos os 3 componentes, podemos utilizá-los para montar o site do restaurante.
Chega de teoria! Agora vamos ver React na prática, e o que muda no desenvolvimento de sites quando saímos do HTML, CSS e JS convencionais e vamos para o React.
Vamos fazer um site simples, que mostra alguns retângulos na tela com textos dentro. Vamos fazer este mesmo site com HTML, CSS e JS puros e depois o mesmo site com React.
Acesse o passo-a-passo de como construir a versão HTML, CSS e JS puros aqui. No final desse guia você encontrará o link para o passo-a-passo de como construir a versão React.
- DevMedia - REACT.JS Primeiros passos - 9 minutos
- Código Fonte TV - React JS // Dicionário do Programador - 10 minutos