Introdução ao React JS e seus principais conceitos.
Matéria: Projeto de Sistemas I.
Integrantes: Daniela de Lima Souza, Letícia Martins Alarcon, Lucas Baradel Marchiori.
1. INTRODUÇÃO
Ao se deparar com o desenvolvimento de um sistema, site ou similar, você já esteve diante de alguma dificuldade sobre qual tecnologia usar para esse fim? Pois bem, grande parte dos desenvolvedores possuem essa dificuldade. Pode-se dizer que as tecnologias estão em constante evolução, cada dia um novo framework, uma nova biblioteca ou até mesmo uma ferramenta de desenvolvimento surgem.
Desse modo, uma linguagem que vem ganhando destaque nos últimos anos é o JavaScript, também chamado de JS. Uma pesquisa realizada pelo provedor HackerRank, com quase 120 mil desenvolvedores, apontou que essa linguagem de programação tem se tornado uma das mais conhecidas entre os desenvolvedores. Além disso, o JS também constitui grande parte de sites considerados “gigantes” da internet, como o site do Mercado Livre, do Facebook, etc.
Assim sendo, dentre a gama de possibilidades que o JavaScript oferece aos desenvolvedores para utilizarem em seus respectivos projetos, há uma chamada React, que permite a criação de interfaces. Logo, a tecnologia acima citada será abordada no presente artigo. Mas, como ele é utilizado? Como funcionam os seus componentes? Essas dúvidas serão respondidas nas próximas seções.
2. O QUE É REACT?
React é uma biblioteca JavaScript, ou seja, uma coleção de códigos pré-escritos que podem ser utilizados pelo programador ao longo da aplicação.
Essa tecnologia foi concebida em 2013 pelo Facebook, com o intuito de criar interfaces através de componentes. Isso significa que ao projetar um site, por exemplo, há a possibilidade de dividi-lo em diversos trechos pequenos de código, que podem ser reutilizados posteriormente em outras partes do mesmo e, se fosse necessário editá-lo, bastaria passar alguns parâmetros: os props. O funcionamento dos componentes e da passagem de parâmetros em React serão melhor abordados nas próximas seções através de códigos.
2.1 COMPONENTES
Pode-se dizer que grande parte das pessoas ficam confusas quando o assunto é sobre os componentes e sua posterior reutilização. Se você é iniciante no React, talvez já possa ter criado um componente sem nem mesmo saber, pois hoje a maioria das aplicações são divididas em componentes, sejam eles de alta ou baixa complexidade.
Assim, o mesmo pode auxiliar muito em relação ao tempo e produtividade, como por exemplo, um projeto que tenha longo prazo poderá ser entregue em menor tempo, pois desenvolver um componente não é desenvolver apenas para uma finalidade específica e sim pensando em várias aplicações que o mesmo poderá ter futuramente.
Esse conceito pode ser melhor observado na Figura 01. Nela, há um slider de imagens, um calendário, uma barra de pesquisa e cards contendo imagem e texto, indicados respectivamente pelos componentes 1, 2, 3, e 4. Dessa forma, se fosse necessário utilizar, por exemplo, a barra de pesquisa em outros locais, bastaria reaproveitar esse componente, sem necessidade de adicionar mais código a aplicação.
2.2 PROPS
Digamos que seja necessário criar um componente para exibir um título e um texto em uma página web e o seu conteúdo será alterado de acordo com o seu uso, como poderíamos fazer isso?
No React é possível resolver tal questão utilizando os props (uma abreviação para properties), que nada mais são do que componentes que recebem parâmetros.
Dessa forma, conforme demonstrado na Figura 02, começamos criando o componente “ExemploParametro” e em seguida criamos as tags <h1> e <p>. O conteúdo dinâmico será apresentado dentro dessas tags, para isso é preciso abrir chaves dentro delas e indicar o nome do parâmetro criado, no caso “props”, e o identificador do conteúdo que o mesmo irá receber, nesse caso “titulo” e “texto”.
Assim, já podemos utilizar o componente passando o conteúdo desejado. Na Figura 03, abrimos a tag <ExemploParametro> e passamos para “titulo” a mensagem “React JS” e para “texto” a mensagem “Exemplo com parâmetros”. Dessa forma, o componente irá receber essas mensagens como parâmetros e exibi-las nas tags criadas.
Adiante, na Figura 04, apresentará o resultado na aba do navegador.
Dessa forma, caso desejássemos acrescentar mais um título seguido de texto na página bastaria copiar a tag do componente exibido na Figura 04 e alterar seu conteúdo, sem necessidade de adicionar mais código a aplicação, como pode ser visto na Figura 05.
Logo, o resultado será o seguinte:
2.3 JSX
Como você pode ter notado nas figuras anteriores, como por exemplo na Figura 02, há presença de trechos de linguagem de marcação de texto (HTML) em meio ao código. Isso se deve ao fato de o React utilizar a extensão JSX, que seria uma combinação de HTML juntamente com o JavaScript. A utilização da mesma seria para tornar a escrita de codificação de forma simples e legível.
3. COMO UTILIZAR?
Para o desenvolvimento de uma aplicação utilizando o React, da mesma forma com outras bibliotecas, o mesmo depende de uma IDE, ou seja, um ambiente para o seu desenvolvimento que, no exemplo demonstrado, está sendo utilizado o Visual Studio Code. Sendo assim, para a construção de uma aplicação, existem alguns requisitos a serem seguidos antes:
- É necessário ter o Node.js instalado (não é necessário uma versão específica), que funcionará como o servidor local da aplicação;
- É importante ter um gerenciador de pacotes, tais como o Yarn ou o NPM instalado, para poder “buildar” a aplicação, ou seja, transformar um código programável em executável.
Veja a seguir um passo a passo sobre como “rodar” uma aplicação React utilizando o NPM:
Abra o terminal do seu sistema e informe o seguinte comando:
npm install -g create-react-app
Aguarde o carregamento dos arquivos e então, digite o comando abaixo para criar a pasta onde será armazenada a sua aplicação. No comando, o “my-app” pode ser substituído pelo nome que você desejar para a sua aplicação.
create-react-app my-app
Aguarde novamente o carregamento dos arquivos. Quando os mesmos forem carregados, você já poderá inicializar a sua aplicação e, para isso, é necessário entrar na pasta criada anteriormente através do terminal e rodar o comando npm start, como apresentado a seguir.
cd my-app
npm start
Com isso, uma aba do navegador será aberta, como apresentada na Figura 07.
4. VANTAGENS E DESVANTAGENS EM UTILIZAR O REACT
A principal vantagem de utilizar o React é o reaproveitamento de código através dos componentes e, também, a comunidade extensa que o mesmo possui, possibilitando a troca de diferentes conhecimentos e experiências entre os desenvolvedores desta tecnologia. Além disso, é muito mais prático para questões de produtividade ter uma biblioteca que já possui o que será necessário para o desenvolvimento a escrever código do zero.
Já a desvantagem seria que a sintaxe do JSX pode assustar os desenvolvedores iniciantes de React, pois se tratar da junção de HTML com JavaScript.
5. CONCLUSÃO
Destarte, no presente artigo foi apresentada uma introdução sobre o React e suas características. Para uma aplicação que for feita utilizando esta tecnologia, a mesma poderá ser desenvolvida em um tempo curto, devido a possibilidade de reaproveitamento dos componentes na aplicação, se for comparado com a criação dos mesmos do zero. A biblioteca criada pelo Facebook é bem fácil de utilizar, possui uma SEO amigável perante aos motores de busca, como o Google e, é uma das mais requisitadas para o mercado de trabalho.
6. REFERÊNCIAS
https://computerworld.com.br/2020/02/07/javascript-mantem-a-lideranca-entre-as-linguagens-mais-conhecidas/
hostinger.com.br/tutoriais/o-que-e-react-javascript
https://medium.com/reactbrasil/react-estruturando-projetos-e-nomeando-componentes-b62ddad69a11
https://tableless.com.br/guia-completo-react-ecossistema/
https://blog.geekhunter.com.br/um-guia-para-usar-react-js/
https://medium.com/tableless/o-guia-completo-do-react-e-o-seu-ecossistema-b31a10ecd84f
https://medium.com/rocketseat/um-guia-para-iniciantes-no-react-js-80e1ac357649
https://tableless.com.br/react-o-que-e-e-como-funciona-essa-ferramenta/
