Como criar sua primeira aplicação com React.JS

Oláh a todos novamente, sejam bem vindos a mais um post aqui do Café Para Programar.

Hoje vou mostrar a vocês como criar sua primeira aplicação no ReactJS, meu nome é Jorge e eu faço programa 😏☕

Antes de mais nada vamos entrar no youtube e colocar um lo-fi hip hop para codar bem relaxado.

Requisitos

Aqui vai uma lista das coisas que você vai precisar ter instalado previamente.

  • NodeJS
  • npm ou yarn
  • VSCode (ou outro editor de sua preferencia.

Inicializando um novo projeto

Nossa aplicação será um webApp de listagem de tarefas o famoso simpleTasks. Vamos abrir o cmd ou powershell na pasta onde queremos criar nosso projeto e rodar o seguinte comando:

npx create-react-app simple-task

npx:

Nesse comando estamos usando o npx que é uma ferramenta que permite a gente executar pacotes sem ter eles instalados localmente.

create-react-app:

E estamos executando o pacote “create-react-app“. Esse pacote serve para montar um projeto ReactJS e já fazer todas as configurações básicas como o babel e webpack, estamos usando ele justamente para não perder tempo com essas configs e também para não assustar que esta começando kkk.

simple-task:

E por fim passamos o nome do nosso projeto “simple-task“, lembrando que não podemos passar letras maiúsculas no nome do projeto. Outra dica boa é NUNCA usar diretórios com espaço no nome, isso pode te complicar no futuro.

Será criado uma pasta chamada “simple-task“, vamos abrir ela no VSCode, podemos usar o comando “code nome-da-pasta” pelo terminal ou clicar com o botão direito e ir em “abrir com vscode”.

Subindo a aplicação:

Agora vamos abrir o terminal no VSCode, podemos usar o atalho ( CTRL + SHIFT + ‘ ) e vamos rodar o seguinte comando para subir a nossa aplicação e podermos visualizar ela no navegador:

npm start

Fazendo isso ele já vai abrir automaticamente um aba no seu navegador com a aplicação.

show de bola, agora podemos limpar alguns arquivos e começar a desenvolver.

Vamos remover todos os arquivos na pasta src e deixar apenas esses 2 (App.js e index.js):

Agora vamos remover todos os importes e código desnecessário de forma que os arquivos ficarão assim:

App.js

import React from 'react';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

index.js

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

ReactDOM.render(, document.getElementById('root'));

Pronto, já temos nosso projeto pronto para começarmos a desenvolver

Partiu Desenvolver

A raiz do nossa aplicação é o app.js, é nele que vai ficar todo nosso código. claro que vamos componentizar algumas coisas em arquivos separadas mas todos serão chamados nesse arquivo.

Antes de mais nada é importante fazermos nosso hello world para nos livrar da maldição.

app.js

import React from 'react';

function App() {
  return (
    <div>
      Hello World
    </div>
  );
}

export default App;

Ufa essa foi por pouco kk.

Criando um componente

Agora chega de enrolação e vamos arregaçar as mangas para começar a codar.

Primeiro vamos criar um componente chamado Task.

import React from 'react';

function Task() {
  return <div>Hello World</div>
}


function App() {
  return (
    <div>
      Hello World
    </div>
  );
}

export default App;

Sim no React a gente cria componentes com funções(ou classes), que vão retornar códigos html, isso pode parecer meio louco para você mas logo você vai se acostumar kkk.

agora para chamar esse componente dentro de app podemos fazer de duas formas. Usando JSX ou uma função. Mas recomendo usar JSX.

Para quem não sabe JSX é tipo uma junção de xml com javascript, nosso código vai ficar dessa forma, muito massa né.

function Task() {
  return <div>Hello World</div>
}


function App() {
  return (
    <div>
      <Task />
    </div>
  );
}

OBS: É importante apontar que nossos componentes sempre devem retornar o código html com uma tag em volta de tudo, você não pode retornar duas tags irmãs que já quebraria no build.

Propriedades

A capacidade de um componente pai passar propriedades(variáveis) a um componente filho é uma das bases do React.

Para passar as propriedades fazemos da seguinte forma:

function App() {
  return (
    <div>
      <Task title={"Tarefa numero 1"} />
    </div>
  );
}

Aqui estamos passando uma propriedade pelo componente pai (App) para o componente filho(Task).

E para recuperarmos essa propriedade podemos fazer de duas formas:

A primeira é recebendo um objeto props por parâmetro, e acessando nossos propriedades através dele.

function Task(props) {
  return (
    <div>
      //É com {chaves} que inserimos código javascript dentro do html
      {props.title} 
    </div>
  )
}

E a segunda forma é usando a desestruturação, que é a forma que eu geralmente uso:

function Task({ title }) {
  return (
    <div>
      {title}
    </div>
  )
}

Legal já pegamos dois conceitos, o de componentização e o de propriedades, já da para fazer mais algumas coisas antes de eu passar o ultimo conceito para vocês.

Vamos criar uma lista de tarefas para mostrarmos com nosso componente Task, vou criar algumas baseadas na minha rotina.

const tasks = [
  'Codar',
  'Tomar café',
  'Estudar',
  'Tomar café de novo',
  'tentar dormir desistir e ir assistir séries'
]

function Task({ title}) {
  return (
    <div>
      {title}
    </div>
  )
}

show, agora só precisamos percorrer essa lista e passar cada item para um componente Task.

Vamos fazer isso usando o método map do javascript, esse é um de muitos métodos de listas, e usamos ele da seguinte forma:

const lista = [1, 2, 3, 4 ,5 ]

lista = lista.map(numero => { return numero + 1})

console.log(lista)

//resultado [2, 3, 4, 5, 6]

Esse é um exemplo simples para entendermos melhor a função map. Ela percorreu cada item passou pela nossa função que adicionou +1 ao item e o retornou.

Agora vamos usar essa função para nos retornar uma lista de componentes Task.

const tasks = [
  'Codar',
  'Tomar café',
  'Estudar',
  'Tomar café de novo',
  'tentar dormir desistir e ir assistir séries'
]


function Task({ title}) {
  return (
    <div>
      <input type="button" value="X" />
      <span>
        {title}
      </span>
    </div>
  )
}


function App() {
  return (
    <div>
      {
        tasks.map(item => {
          return <Task title={item} />
        })
      }
    </div>
  );
}

Fazendo isso já vamos ver nossas tarefas renderizados no navegador.

Melhorando nosso componente

Vamos fazer algumas alterações no nosso componente.

Primeiro vamos adicionar um botão para podermos remover as tarefas futuramente.

function Task({ title }) {
  return (
    <div>
      <input type="button" value="X" />
      <span>
        {title}
      </span>
    </div>
  )
}

Fazendo isso teremos algo parecido com isso:

Não ta muito bonito mas é o que a gente tem por enquanto ksks.

Agora vamos passar uma propriedade especial do React que é a key. E devemos passa-la nos items sempre que estamos criando uma lista. Ela serve para o React não confundir os elementos da lista. E claro devemos passar sempre um valor único.

No nosso caso vamos passar o item em si, já que cada tarefa vai ter um nome diferente.


function App() {
  return (
    <div>
      {
        tasks.map(item => {
          return <Task key={item} title={item} />
        })
      }
    </div>
  );
}

Agora acho que já podemos começar a usar estados do React.

Usando estados

Para isso vamos usar um Hook(uma função) do React que se chama useState, vamos importa-la da seguinte forma:

import React, { useState } from 'react';

E esse função sempre deve ser usada dentro de um componente. No nosso caso vamos usa-la dentro do App para podermos ter uma lista que altere de valor durante uma interação , no nosso caso excluir uma tarefa.

Usamos essa função da seguinte forma:

const tasks = [
  'Codar',
  'Tomar café',
  'Estudar',
  'Tomar café de novo',
  'tentar dormir desistir e ir assistir séries'
]

function App() {
  const [list, setList] = useState(tasks)

  return (
    <div>
      {
        tasks.map(item => {
          return <Task key={item} title={item} />
        })
      }
    </div>
  );
}

Pode parecer meio confuso no começo, mas vou explicar item a tem para vocês entenderem melhor.

  • list: é a variável que vamos usar para acessar a nossa lista.
  • setList: é a função que vamos usar para alterar os valores da lista.
  • tasks: é o valor inicial que estamos passando para list, no caso é a lista que criamos mais cedo, poderíamos passar também um array vazio.

beleza agora vamos usar a função map nessa lista list e não mais na taks

function App() {
  const [list, setList] = useState(tasks)

  return (
    <div>
      {
        list.map(item => {
          return <Task key={item} title={item} />
        })
      }
    </div>
  );
}

Show agora já podemos criar uma função para excluir os itens.

Primeiro vamos declarar a função e passar como propriedade do Task, para então passarmos para o botão que esta dentro de Task, já ta ficando complexo kk mas fica tranquilo que vou mostrar passo a passo.

function App() {
  const [list, setList] = useState(tasks)

  //declaramos a função
  function deleteTask() {

  }

  return (
    <div>
      {
        list.map(item => {
          //Aqui vamos passar como props
          return <Task deleteTask={deleteTask} key={item} title={item} />
        })
      }
    </div>
  );
}

Dahora, agora podemos recuperar ela dentro de Task:

//recebemos aqui a função
function Task({ title, deleteTask }) {

  return (
    <div>
      <input
        //Passamos dentro de uma arrow function para que não seja executada
        //antes do click.
        onClick={() => deleteTask(title)}
        type="button"
        value="X"
      />
      <span>
        {title}
      </span>
    </div>
  )
}

Aqui já passamos a função para um onClick, usamos as propriedades igual o html mas com camelCase. Já passamos o title como parâmetro para conseguirmos achar a tarefa e então exclui-la.

Agora já podemos voltar para a função, vamos criar uma nova lista sem o item que foi passado por parâmetro e então passar essa nova lista para o setList, confere:

  function deleteTask(title) {
    const newList = list.filter(item => item !== title)

    setList(newList);
  }

Estamos usando a função filter para criar uma nova lista com todos os itens que são diferentes do title passado por parâmetro pelo Task.

E então passando para setList (função que criamos no useState)a nossa nova lista.

Fazendo isso vamos alterar o valor de list e o React vai renderizar novamente todos componentes que dependem do list.

Já podemos excluir nossas tarefas ao clicar no botão. Agora só precisamos adicionar a funcionalidade de adicionar tarefas.

Adicionando tarefas

Vamos criar um input e um botão dentro de App:

  return (
    <div>
      {
        list.map(item => {
          return <Task deleteTask={deleteTask} key={item} titulo={item} />
        })
      }

      <input />
      <input type="button" value="Adicionar" />
    </div>
  );

Agora precisamos criar um estado para armazenar o valor que vamos inserir no input. Vamos chamar essa variável com estado de newTask.

Vamos fazer da seguinte forma:

const [newTask, setNewTask] = useState("")

Como a task vai ser um texto vamos inicializa-la com uma string vazia.

Agora vamos chamar o setNewTask dentro do onChange do nosso input, de forma que sempre que houver alterações vai atualizar o valor de newTask. Desta forma:

<input value={newTask} onChange={event => setNewTask(event.target.value)} />

Passamos o value para manter o valor o input o mesmo do newTask, e usamos o event.target.value para recuperar o valor que esta sendo digitado.

Pronto agora já temos uma variável com valor da nova tarefa, agora só precisamos criar a função que vai adicionar a tarefa quando clicarmos no botão:

  function deleteTask(titulo) {
    const newList = list.filter(task => task !== titulo)
    setList(newList);
  }

  function insertNewTask() {
    //Interrompe se newTask estiver vazio
    if (!newTask) return

    //Adiciona item a lista
    setList([...list, newTask])
    
    //limpa input 
    setNewTask("")
  }

Usamos o “setList([…list, newTask])” porque não podemos alterar os valores de list porque estados são imutáveis. Então não poderíamos usar algo como “list.push()“. Mas caso prefira poderia fazer assim “list.concat([newTask])“.

Agora já temos nossa lista de tarefas funcionado legal, já podemos inserir e excluir nossas tarefas.

Ta feia que é um demônio, mas como o foco não é estilização fica para uma próxima.

Espero que não tenho ficado complicado, qualquer dúvida pode deixar um comentário que eu do uma força, até a próxima rapazes e rapozas.