Construa um Aplicativo de Notas com React - Tutorial Passo a Passo

Introdução

Neste projeto, criaremos um aplicativo de Notas simples usando React. O aplicativo permitirá que os usuários adicionem, editem e excluam notas. Dividiremos o desenvolvimento em várias etapas, garantindo que cada etapa atenda a requisitos específicos e adicione funcionalidades essenciais.

👀 Visualização

Notes App

🎯 Tarefas

Neste projeto, você aprenderá:

Como criar um novo projeto React com o comando Create React App
Como construir componentes React funcionais para criar uma interface de usuário
Como gerenciar o estado usando o hook useState do React
Como adicionar e gerenciar notas dentro do aplicativo
Como implementar recursos como adicionar, editar e excluir notas
Como lidar com interações e eventos do usuário em componentes React
Como estilizar uma aplicação React usando CSS
Como desenvolver uma aplicação CRUD (Create, Read, Update, Delete) básica
Como estruturar e organizar um projeto React
Como construir uma interface de usuário simples e responsiva para um aplicativo de Notas

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Configurar um novo projeto React
Criar e gerenciar componentes React
Usar hooks React como useState para gerenciar o estado do componente
Lidar com a entrada do usuário e envios de formulários em uma aplicação React
Passar dados e funções entre componentes pai e filho usando props
Criar interfaces de usuário responsivas e interativas em React
Implementar armazenamento e manipulação de dados básicos dentro de uma aplicação React
Estruturar e organizar arquivos de código em um projeto React
Usar CSS para estilizar componentes React
Depurar e solucionar problemas em aplicações React
Seguir as melhores práticas para construir uma aplicação React

Configuração do Projeto

Requisitos:

Instalação de dependências no novo projeto React.

Funcionalidade:

Inicializar o projeto com as dependências necessárias e uma estrutura básica do projeto.

Passos:

Abra um terminal e navegue até a pasta do projeto:
```
cd notes-app
```
Você precisa executar este comando dentro do diretório project.
Instalação de dependências no projeto:
```
npm install
```
Após a conclusão da instalação, uma pasta node_modules é criada; se ela não existir, significa que a instalação não foi bem-sucedida.

Criar Componente de Nota

Requisitos:

Criar um componente Note que represente uma nota individual.
O componente Note deve exibir o conteúdo da nota, fornecer um botão de edição e um botão de exclusão.

Funcionalidade:

Exibir o título e o texto de uma nota.
Fornecer botões para editar e excluir uma nota.

Passos:

Dentro da pasta src, crie um novo arquivo chamado Note.js.
Implemente o componente Note da seguinte forma:

import React from "react";

const Note = ({ note }) => {
  return (
    <div className="note">
      <h3>{note.title}</h3>
      <p>{note.text}</p>
      <button>Edit</button>
      <button>Delete</button>
    </div>
  );
};

export default Note;

Criar Componente App e Estado

Requisitos:

Criar um componente App que irá gerenciar as notas e seu estado.
Inicializar o estado para conter um array de notas.
Implementar funções para adicionar, excluir e editar notas.

Funcionalidade:

Manter um array de notas.
Adicionar novas notas.
Excluir notas.
Editar notas.

Passos:

Na pasta src, abra o arquivo App.js.

Importe o hook useState no topo do arquivo:

// App.js
import React, { useState } from "react";
import "./App.css";
import Note from "./Note";

Configure o estado inicial e as funções para adicionar, excluir e editar notas dentro do componente App:

// App.js
function App() {
  const [notes, setNotes] = useState([]);
  const [newNote, setNewNote] = useState({ title: "", text: "" });

  const addNote = () => {
    // TODO: Implement addNote function
  };

  const deleteNote = (id) => {
    // TODO: Implement deleteNote function
  };

  const editNote = (id, newText) => {
    // TODO: Implement editNote function
  };

  return <div className="App">{/* App content goes here */}</div>;
}

Implementar Funcionalidade de Adicionar Nota

Requisitos:

Implementar a função addNote para adicionar novas notas ao estado.
Assegurar que as notas tenham um título e texto.

Funcionalidade:

Adicionar novas notas ao estado.
Limpar os campos de entrada após adicionar uma nota.

Passos:

Implementar a função addNote:

// App.js
const addNote = () => {
  if (newNote.title && newNote.text) {
    const newId = Date.now().toString();
    setNotes([...notes, { ...newNote, id: newId }]);
    setNewNote({ title: "", text: "" });
  }
};

No seu JSX, use os manipuladores onChange para capturar os valores de entrada e atualizar o estado:

// App.js
return (
  <div className="App">
    <h1>Notes App</h1>
    <div className="note-form">
      <input
        type="text"
        placeholder="Title"
        value={newNote.title}
        onChange={(e) => setNewNote({ ...newNote, title: e.target.value })}
      />
      <textarea
        rows="4"
        cols="50"
        placeholder="Text"
        value={newNote.text}
        onChange={(e) => setNewNote({ ...newNote, text: e.target.value })}
      />
      <button onClick={addNote}>Add Note</button>
    </div>
  </div>
);

Implementar Funcionalidade de Exclusão de Nota

Requisitos:

Implementar a função deleteNote para remover uma nota do estado quando o botão "Excluir" for clicado.

Funcionalidade:

Excluir uma nota do estado quando o botão "Excluir" for clicado.

Passos:

Implementar a função deleteNote:

// App.js
const deleteNote = (id) => {
  const updatedNotes = notes.filter((note) => note.id !== id);
  setNotes(updatedNotes);
};

Passe a função deleteNote como uma prop para o componente Note para habilitar a exclusão de notas.

// App.js
<div className="App">
  <div className="note-list">
    {notes.map((note) => (
      <Note key={note.id} note={note} onDelete={deleteNote} onEdit={editNote} />
    ))}
  </div>
</div>

Implementar Funcionalidade de Edição de Nota

Requisitos:

Implementar a função editNote para atualizar o texto de uma nota quando o botão "Editar" for clicado.

Funcionalidade:

Exibir o texto da nota em uma área de texto editável (textarea).
Atualizar o texto da nota quando o botão "Salvar" for clicado.

Passos:

Implementar a função editNote:

// App.js
const editNote = (id, newText) => {
  const updatedNotes = notes.map((note) =>
    note.id === id ? { ...note, text: newText } : note
  );
  setNotes(updatedNotes);
};

Atualizar o componente Note para lidar com a edição:

// Note.js
import React, { useState } from "react";
const Note = ({ note, onDelete, onEdit }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [editedText, setEditedText] = useState(note.text);

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSave = () => {
    onEdit(note.id, editedText);
    setIsEditing(false);
  };

  return (
    <div className="note">
      <div className="note-header">
        <h3>{note.title}</h3>
        <button onClick={() => onDelete(note.id)}>Delete</button>
      </div>
      {isEditing ? (
        <>
          <textarea
            rows="4"
            cols="50"
            value={editedText}
            onChange={(e) => setEditedText(e.target.value)}
          />
          <button onClick={handleSave}>Save</button>
        </>
      ) : (
        <p>{note.text}</p>
      )}
      {!isEditing && <button onClick={handleEdit}>Edit</button>}
    </div>
  );
};

Estilização (App.css)

Requisitos:

Aplicar estilização básica ao aplicativo para uma interface visualmente agradável.

Funcionalidade:

Estilizar os componentes do aplicativo para uma melhor experiência do usuário.

Passos:

Crie um arquivo App.css e aplique a estilização básica aos seus componentes do aplicativo. Use o código CSS fornecido para estilizar o aplicativo.

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  max-width: 800px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.header {
  background-color: #343a40;
  color: #fff;
  padding: 20px 0;
  text-align: center;
  font-size: 32px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.note-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.note-form input[type="text"],
.note-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  border-bottom: 2px solid #007bff;
  background-color: transparent;
  font-size: 16px;
  transition: border-bottom 0.3s;
}

.note-form input[type="text"]:focus,
.note-form textarea:focus {
  border-bottom: 2px solid #0056b3;
  outline: none;
}

.note-form button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.note-form button:hover {
  background-color: #0056b3;
}

.note-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.note {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 300px;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.note:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.note-header h3 {
  margin: 0;
  font-size: 24px;
  color: #007bff;
}

.note-actions {
  display: flex;
  gap: 10px;
}

.note-actions button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.note-actions button:hover {
  background-color: #0056b3;
}

Executando o Aplicativo

Para executar seu aplicativo React Notes:

Abra seu terminal ou prompt de comando.
Certifique-se de estar no diretório raiz do projeto (onde o arquivo package.json está localizado).
Inicie o servidor de desenvolvimento:
```
npm start
```
Você deve agora ver um aplicativo React básico sendo executado em seu navegador na porta 8080. Vamos construir sobre essa base para criar nosso aplicativo Notes.
O efeito da página é o seguinte:

Resumo

Neste projeto, criamos um aplicativo Notes simples usando React, dividindo o desenvolvimento em várias etapas. Configuramos o projeto, criamos componentes para notas, implementamos funcionalidades para adicionar, excluir e editar notas, e aplicamos estilização básica. Seguindo estas etapas, você pode construir um aplicativo Notes funcional e expandir seus recursos para atender às suas necessidades.