0

Aprendendo React e colocando a mão na massa (Construindo uma calculadora - parte 1)

Andre Rodrigues
Andre Rodrigues


Fala pessoal, tudo bem? Hoje iremos conhecer a estrutura base de nossa aplicação, então pegue um café e se arrume na cadeira que lá vem leitura e código. Hoje iremos começar a desenvolver uma calculadora com o nosso querido React, você irá aprender a partir daqui uma maneira bem legal de organizar os componentes, e facilitando assim as suas futuras manutenções.

 

Primeiros passos


Para iniciarmos nosso projeto, antes iremos criar um repositório no Github para guardar nossas alterações. Ter um repositório é um muito importante, e isso nos da uma segurança para não perdermos nossa aplicação. O repositório que irei criar em meu Github, irá se chamar: “serie-artigos-react”, e dentro dele teremos nossas aplicações. Abaixo o endereço do link.

```link repositório

https://github.com/Andre-Rodrigues-Dev-Web/serie-artigos-react

```

Após criado nosso repo, podemos criar nosso projeto, para isso é necessário abrir a pasta do repositório no terminal e mandar o seguinte comando: “npx create-react-app calculadora-react”, feito esse procedimento clique enter e aguarde baixar os pacotes (pode ser que demore um pouco, por isso sugiro pegar um café e beber em quanto conclui o processo srsr).

 

Estrutura de nossa aplicação

 

Ao baixar os pacotes do react, iremos alguns diretórios que terão as partes importantes para executar nossa aplicação. Abaixo a raiz de nossa aplicação.

 

  • node_modules
  • public
  • src
  • package.json
  • .gitignore
  • readme.md

 

Como visto acima, temos em nossa raiz as pastas: node_modules, public, src e arquivos como package.json, git ignore e um readme.md onde mostra como executar nossa aplicação. Calma iremos ver agora o que cada um faz.

 

 

Entendendo a raiz de nossa aplicação

 

node_modules:

 

A pasta node_modules é responsável por conter os diversos pacotes que irão rodar desde o servidor, até mesmo o core do React em si que vai nos possibilitar manipular o DOM, ao longo dos projetos iremos adicionar muitas libs e frameworks nessa pastinha.

 

Public:

 

Está pasta é responsável pelos arquivos de mídias (imagens, áudio e vídeo), dessa forma os arquivos do tipo de mídia ficam separados dos arquivos de códigos da aplicação.

 

Src:

 

Chegamos na pasta mais esperada até o momento, a pasta src. Está pasta abriga todos os códigos de nossa aplicação, sendo eles: css, ts e js.


Arquivo package.json:

 

O Arquivo package.json é responsável pelas características e por conter os nomes das dependências que são baixadas na aplicação.

 

Arquivo git ignore:

 

Este arquivo é para que o Git possa ignorar alguns arquivos e pastas no repositório online, evitando assim subir um peso desnecessário, digo isso devido a capacidade de baixarmos pacotes de nossa aplicação usando apenas o npm install, ou yarn install.


O que está achando até agora? Espero que esteja gostando, em :) ! Mas continuando... Vamos agora ver o código de nossa aplicação, para isso siga as seguintes etapas:


  1. Abra a pasta src
  2. Clique no app.js


Você irá ver o seguinte código no arquivo app.js:


import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

O código acima é uma espécie de "Hello World", você pode ver ele executando com o seguinte comando no terminal:


$ npm start


Ao mandar o comando acima, automaticamente irá subir um servidor, geralmente esse servidor é executado na porta 3000, caso a porta esteja em uso o mesmo irá encontrar uma outra porta que possa ser subida, se você não conhece sobre esses termos porta e servidor, depois irei criar um artigo a fundo, mas para isso gostaria que você comentasse o seguinte: "#euqueroartigosobrerede", assim saberei o quanto de pessoas querem o artigo.


Bom, após ver o codigo base da aplicação vamos onde ela é passada no elemento html, para isso basta abrir o index.js, lá teremos os seguintes trechos


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Esse trecho importa as bibliotecas que manipula o DOM, além do css de reset padrão vindo do react, logo abaixo tempos o import do componente app.js e uma função que renderiza o app em um elemento do html com a id root. Para fecharmos o artigo de hoje, vamos apenas excluir alguns arquivos e trechos de código que não usaremos no próximo artigo, os arquivos são esses: app.css e logo.svg. Abra o app.js e exclua tudo dentro do render e os imports logo e css, o arquivo deverá ficar assim:


function App() {
  return (
    
  );
}

export default App;


E aí curtiu o que vimos hoje? Se gostou se prepare que na segunda etapa vai ter muito código, por hora vou finalizando aqui, mas não deixe de praticar o que já fizemos hoje, isso irá te ajudar a entender melhor os próximos passos. Um grande abraço e até a próxima.

0
0

Comentários (1)

0
Marcelo Rosa

Marcelo Rosa

16/10/2021 00:09

Muito legal André, no aguardo por mais conteúdos.

28 anos, mineiro, amante de tecnologias

Brasil