Iniciando com ReactJS

Fundamentos do ReactJS

O React é uma biblioteca de interfaces altamente interativas que pode ser usado para Web, dispositivos móveis, TV e VR. Toda a interface é feita através do javaScript e não mais do HTML como nos modelos tradicionais.

Esse método de desenvolvimento utiliza SPA (Single Page Application) como padrão de renderização.

Para efeito de comparação, vou citar o padrão tradicional e mais comum de renderização que é o SSR (Server Side Rendering) que consiste em ter uma única aplicação Back-end e Front-end trabalhando juntas para servir um resultado em HTML, CSS e JS para o cliente que o solicitou (uma rota de /usuarios por exemplo).

Já o SPA consiste em ter uma aplicaão back-end separa do Front-end. Após o cliente realizar uma requisição, o back-end apenas entrega o resultado em formato JSON, e uma outra aplicação front-end (utilizando React por exemplo) é responsável por interpretar esse resultado e converter tudo em HTML, CSS e JS.

Bundlers e Compilers

Compiler tem a função de converter ou compilar o código javaScript na sua última versão utilizada no React por exemplo, para uma versão do javaScript que todos (ou a maioria) os browsers consigam entender, pois nem sempre os browsers entedem a última versão da linguagem.

Bundler tem a função de juntar todos os arquivos .js, .css, .png etc, para um arquivo único de cada extensão. Isso era necessário pois os browsers conseguim ler apenas o arquivo script.js e não aceitavam a importação de outros arquivos no script. Portanto o bundler gera um arquivo único contendo todos os scripts de todos os arquivos.

Compiler mais utilizado: Babel

Bundler mais utilizado: Webpack

Atualmente, usa-se o Vite ou Snowpack para criar uma aplicação em React, pois eles apresentam um compilador interno, não sendo necessário a utilização do Babel. E também utilizam o ESM (Ecma Script Model) para a leitura dos scripts pelo browser, não sendo necessário a utilização do Webpack.

Componentes

Consiste em uma parte da aplicação que pode ser repetida mais vezes e que facilita a manutenção futura.

É uma função javaScript que retorna HTML (por isso a extensão .jsx (Js + XML)).

Existe algumas formas de se exportar um componente para ser utilizado em outros componentes.

Default Exports

A "vantagem" é poder dar um nome na importação do componente e não na exportação. Para aplicá-la basta utilizar "export default nomeDoComponente" ao final do arquivo.

Named Exports

O nome da importação do componente precisa ser o mesmo da exportação. Para aplicá-lo basta exportar diretamente a função, ex: "export function nomeDoComponente() ..."

Deve-se utilizar chaves para importar o componente utilziando named export. Ex: "import { nomeDoComponente } from './nomeDoComponente' "

São informações que podemos passar para os componentes com o objetivo de (entre outros) alterar os elementos visuais de um componente.

Funciona similarmente aos atributos das tags HTML.

Exemplo de propriedades passadas ao componente Post:

<Post author="Lucas" content="Lorem ipsum" />

No arquivo Post.jsx (arquivo do componente), basta passar as propriedades utilziando props como parâmetro da função. Para acessar as propriedades usar: {props.author} (utilizar chaves para inserir js dentro do HTML)