React — Criando o primeiro componente - Parte 1
Olá, tudo bem com vocês? Depois dos meus dois primeiros artigos falarem um pouco de Javascript (pra mim, sempre será Javascripto), o primeiro sobre desestruturação:
E o segundo sobre hoisting e um pouco sobre como funciona o Javascript:
Hoje iremos falar de um framework/library que anda bem popular e que eu sou apaixonado, o React.
Dessa vez não darei um background sobre o React, iremos direto ao código, apenas deixarei alguns links para fazer o setup do ambiente de desenvolvimento, para quem está começando agora. Bora lá!
Ambiente de desenvolvimento
Antes de tudo, LEIA A DOCUMENTAÇÃO. Se você não sabe, nem o que é React, recomendo dar uma passada na documentação antes, na verdade, recomendo qualquer um ler a documentação da linguagem que está usando. Vai lá que eu espero, é rapidinho:
Agora que você já está sabendo mais, podemos continuar sem nos preocuparmos com os pormenores da linguagem.
Você precisa instalar três coisas para conseguir rodar o projeto:
- Node.js
- create-react-app
- yarn ou npm (npm já vem com o node.js)
Mais uma vez, não vou explicar como instalar eles, porque iria demorar muito tempo, mas basta ir no site, que lá já está tudo bem explicado e para todas plataformas.
Feito isso, basta rodar node -v e yarn -v /npm -v para saber se as versões estão instaladas mesmo e podemos ir para a parte que realmente interessa!
Criando a aplicação
Primeiro, vamos criar a aplicação inicial com o create-react-app , ele vai fazer todo bootstrap da nossa aplicação e configurar o webpack e o babel para nós.
No seu terminal, vá para uma pasta qualquer, por exemplo projetos e rode, caso for npm, o comando:
npx create-react-app meu-primeiro-componenteou se for com o yarn:
yarn create react-app meu-primeiro-componentePronto! Ele irá criar uma pasta com o nome que você deu depois do create-react-app, no nosso caso meu-primeiro-componente, com toda uma estrutura já montada para nós, fácil, não? Lembrando que há como você criar a aplicação sem usar o create-react-app mas isso seria em casos mais específicos, e você teria que configurar tudo manualmente, no nosso caso, podemos usar o create-react-app mesmo.
Agora basta entrar na nova pasta criada com:
cd meu-primeiro-componente
E rodar o seguinte comando dentro desta pasta:
npm start ou yarn start
Ele irá abrir uma aba no seu navegador e pronto! Você tem sua primeira aplicação React rodando bem na sua frente.
Editando o primeiro arquivo
Se você chegou até aqui, parabéns! Você já fez o bootstrap da sua primeira aplicação em React e está começando a entrar pra esse ecossistema incrível!
Lembro que quando rodei minha primeira aplicação fiquei abestalhado com a simplicidade que foi, pra mim, quando você é iniciante quanto menos obstáculos você tiver para rodar sua primeira aplicação, e ver as coisas funcionando e agindo na sua frente, mais você tende a gostar da linguagem e querer saber cada vez mais sobre, e pra mim o React se encaixa nesse perfil.
Mas vamos lá, bora editar um pouco essa primeira página e começar a criar um componente.
Editando a página inicial
O create-react-app , cria uma estrutura mais ou menos assim:
meu-primeiro-componente
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
Nesse post, não vou explicar o que cada arquivo faz, mas vamos focar em dois arquivos aqui agora o index.js e App.js , no index.js temos a seguinte estrutura:
Nesse aquivo, preste atenção na linha 7, ela renderiza uma componente chamado <App /> , que é importado de './App' , vamos até esse arquivo agora, e você verá esse arquivo:
Vamos ver o que está acontecendo aqui, antes de editar qualquer coisa. Nas linhas 1 à 3, estamos importando algumas coisas coisas que precisamos, na linha 5 criamos uma função chamada App que nos retorna um JSX, da linha 7 até a linha 22 é como se fosse uma HTML normal, mas com alguma diferenças, por isso chamamos de JSX. E por fim, na linha 26 exportamos como padrão essa função App, essa mesma função App é a que usamos na index.js .
Então vamos lá, se puder, coloque o programa que você usa para desenvolver ao lado da aba no navegador que está rodando o React, e faça uma edição, por exemplo na linha 11 ou na linha 19, salve e veja a mágica.
Viu? Ele atualiza sozinho, sem precisar recarregar a página, isso poupa bastante tempo ao desenvolver no React.
Alguma modificações antes de partirmos para o componente, mude o do componente App para um nome qualquer, por exemplo:
E salve, tudo certo né? Não? Mas o que que aconteceu? Se você for na sua aba, provavelmente verá um erro assim:
Vamos entender o erro, ele nos diz que há um problema em ./src/App.js , ou seja, no arquivo que acabamos de editar, logo em seguida ele nos diz que na linha 26 , App não está definido. Mas por qual razão? Porque mudamos o nome da nossa função para NomeCriativo , então não tem nenhum App para exportarmos e sim temos NomeCriativo , vamos fazer essa alteração:
Agora funciona, certo? Certo!
Mas eu te pergunto, como está funcionando se no index.js estamos usando o componente com o nome App ainda e nós acabamos de mudar para NomeCriativo? Algum palpite? Vamos descobrir agora…
Export vs export default
No React, temos duas formas de exportação: export e o export default, a diferença reside na forma que você pode importar a função ou classe em outtro lugar. Porque exemplo, no caso do NomeCriativo, usamos o export default, então na hora de importar esse componente, fazemos dessa forma:
Ao usarmos o export default, podemos importar nosso componente com o nome que quisermos, desde que, comece com uma letra maiúscula, que é o padrão do React para componentes, para poder diferenciar das tags HTML que começam com a letra minúscula. Então, se você alterar de App para Gandalf o programa continuará rodando.
Mas porque? Porque estamos dizendo para o React, que esse é a exportação padrão daquele arquivo, então NÃO podemos ter dois export default no mesmo arquivo, e já que temos essa regra, ao importar, temos apenas uma importação que poderemos fazer daquele arquivo, então poderemos dar o nome que quisermos para esse componente.
Agora é diferente quando usamos apenas o export, vamos modificar nosso código para usar esse metódo:
Ao fazer isso e salvar, teremos o seguinte erro:
Pelo erro, você pode ver que não dando erro, por causa do nome, mas ele está nos dizendo que não há uma exportação padrão(default export) no arquivo ./App isso porque, para importarmos componentes que usam apenas o export teremos que usar { } , então o index.js , ficará assim:
Veja que agora, além de usarmos { } no import, o nome também deve ser exatamente igual ao nome que exportarmos no arquivo. Tente mudar você o nome, e veja que dará erro.
Ao usar export podemos ter várias funções ou classes, sendo exportadas do arquivo, então temos que especificar exatamente qual queremos dessas funções/classes. E repare também que parece um pouco a desestruturação, não posso afirmar que seja uma desestruturação mesmo que acontece por debaixo dos panos, mas é bem similar.
Criando o primeiro componente
Agora que já entendemos um pouco, sobre o que está acontecendo, vamos finalmente criar nosso primeiro componente, um botão que ao ser clicado exibe um alert na nossa tela.
Vamos assumir aqui, o nosso arquivo App.js será nossa página inicial, em que vamos inserir o o nosso botão, primeiro vamos modificar algumas coisas nesse arquivo, para limpar um pouco essa tela:
Removemos todo header e substituímos por um p com um “Oi” dentro.
Agora, dentro da pasta src, criaremos uma outra pasta chamada components, para organizamos um pouco a estrutura, lembrando que não é necessário criar essa pasta, você pode colocar o componente aonde quiser, desde que você importe ele com o caminho certo. E então criaremos um novo arquivo, com o nome button.js dentro da pasta components. A estrutura ficará assim:
Tudo certo até agora? Se sim, criar nosso componente nesse arquivo agora. Criaremos um stateless component , ou seja, um componente que não possui estado ou state, faremos assim porque nosso botão não precisa guardar nenhum estado, apenas receber propriedades. Só por curiosidade, ou para vocês pesquisarem mais afundo sobre, quando o componente tem um state, chamamos ele de stateful component.
De novo, não irei me aprofundar em estados dos componentes agora, só isso rende um post separado.
Vamos ao código:
Pronto! Criamos um componente de botão, nada novo por enquanto. Mas o que fazemos com isso agora? Bom, temos que importar esse componente no App.js e renderizá-lo na nossa página inicial. E repare que como eu disse, nome de componentes no React, sempre com a primeira letra maiúscula.
Agora no nosso App.js:
Fácil não? Importamos nosso componente e usamos ele na linha 9, é como se tivéssemos criado nossa própria tag HMTL com o nome Button, que tem as propriedades que definimos nele. Por exemplo, adicionássemos algum estilo no arquivo do Button, qualquer lugar do meu código em que usasse esse botão, teria o mesmo estilo, ou seja, reaproveitaríamos nosso código já feito e só bastaria usar esse componente, que já tem o estilo do nosso sistema.
E é aí que tá umas coisas legais do React, reaproveitar componentes e evitar ficar replicando código, sem falar do intercâmbio de componentes que pode haver entre diferentes equipes de React.
Vou encerrar a primeira parte por aqui, por já estar bem extenso. Na segunda parte, iremos implementar o alert ao clicar no botão, e iremos aprender um pouco sobre estados, props e funções onClick no React.
Espero que tenham gostado de criar seu primeiro componente, que é uma das bases do React, a componentização e espero também tenham se interessado pelo React, que é objetivo afinal!
Como sempre obrigado a todos que ficaram até o fim e qualquer dúvida, reclamação, sugestão, crítica ou quiser bater um papo sobre, comenta aí embaixo ou me mande mensagem nas redes sociais abaixo! Até a próxima!
Redes sociais
Linkedin: https://www.linkedin.com/in/leonardofalmeida/
CALMA, antes de ir queria recomendar todos a verem os conteúdos da Rocketseat, o pessoal de lá manda muito e foi a base que tive para aprender React, sem falar da comunidade incrível que eles criaram. É isso até mais!
