Primeiro CRUD em React Native: Guia Completo para Iniciantes
Este guia te acompanha na criação do seu primeiro CRUD (Create, Read, Update, Delete) em React Native. Vamos abordar os conceitos fundamentais e fornecer um código exemplo prático para você começar a construir seus aplicativos mobile.
O Que É um CRUD?
CRUD é um acrônimo que representa as quatro operações básicas que podem ser realizadas em dados persistentes: Criar, Recuperar, Update e Deletar. É a base para a maioria das aplicações que interagem com um banco de dados ou armazenamento local.Pré-requisitos
Antes de começar, certifique-se de ter o seguinte instalado:- Node.js: nodejs.org
- npm ou Yarn: Gerenciadores de pacotes do Node.js
- React Native CLI:
npm install -g react-native-cli - Expo CLI (opcional): Para desenvolvimento mais rápido, você pode usar o Expo:
npm install -g expo-cli - Emulador Android ou iOS: Para testar seu aplicativo.
Passo a Passo
1. Criando um Novo Projeto React Native
Use o React Native CLI ou o Expo CLI para criar um novo projeto:# Usando React Native CLI
react-native init MeuCRUD
# Usando Expo CLI
expo init MeuCRUD
2. Estrutura do Projeto
Uma estrutura básica para o seu projeto CRUD pode ser:
MeuCRUD/
├── App.js
├── components/
│ ├── Formulario.js
│ ├── ListaItens.js
│ └── Item.js
└── services/
└── api.js
3. Definindo o Modelo de Dados
Para este exemplo, vamos trabalhar com um modelo simples de "Tarefa":
// Exemplo de objeto Tarefa
{
id: 1,
titulo: "Lavar a louça",
descricao: "Não esquecer de usar sabão!",
concluida: false
}
4. Criando os Componentes
Vamos criar os componentes React Native:Formulario.js
Responsável por criar novas tarefas.
import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
const Formulario = ({ adicionarTarefa }) => {
const [titulo, setTitulo] = useState('');
const [descricao, setDescricao] = useState('');
const handleSubmit = () => {
if (titulo && descricao) {
adicionarTarefa({ titulo, descricao });
setTitulo('');
setDescricao('');
}
};
return (
Título:
Descrição:
);
};
const styles = StyleSheet.create({
container: {
padding: 20,
},
label: {
fontSize: 16,
fontWeight: 'bold',
marginBottom: 5,
},
input: {
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
marginBottom: 10,
},
});
export default Formulario;
useState para gerenciar o título e a descrição da tarefa. Quando o botão "Adicionar Tarefa" é pressionado, a função handleSubmit é chamada, que envia os dados para a função adicionarTarefa (passada como prop) e limpa os campos do formulário.
ListaItens.js
Exibe a lista de tarefas.
import React from 'react';
import { View, FlatList } from 'react-native';
import Item from './Item';
const ListaItens = ({ tarefas, apagarTarefa, atualizarTarefa }) => {
return (
item.id.toString()}
renderItem={({ item }) => (
)}
/>
);
};
export default ListaItens;
ListaItens utiliza o FlatList para renderizar uma lista otimizada de tarefas. Cada item da lista é renderizado pelo componente Item.
Item.js
Representa um único item da tarefa.
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
const Item = ({ tarefa, apagarTarefa, atualizarTarefa }) => {
return (
{tarefa.titulo}
{tarefa.descricao}
atualizarTarefa({ ...tarefa, concluida: !tarefa.concluida })}>
{tarefa.concluida ? 'Desmarcar' : 'Concluir'}
apagarTarefa(tarefa.id)}>
Apagar
);
};
const styles = StyleSheet.create({
container: {
padding: 10,
borderBottomWidth: 1,
borderBottomColor: '#ccc',
},
titulo: {
fontSize: 18,
fontWeight: 'bold',
},
botoes: {
flexDirection: 'row',
justifyContent: 'space-around'
},
botao: {
padding: 5,
backgroundColor: '#eee',
borderRadius: 5
}
});
export default Item;
Item exibe os detalhes de uma tarefa individual e permite marcar/desmarcar como concluída e apagar. Os botões utilizam TouchableOpacity para fornecer feedback visual ao toque.
5. Lógica Principal em App.js
Gerencia o estado das tarefas e as operações CRUD.
import React, { useState, useEffect } from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import Formulario from './components/Formulario';
import ListaItens from './components/ListaItens';
import { buscarTarefas, criarTarefa, atualizarTarefa, apagarTarefa } from './services/api'; // Importa as funções da API
const App = () => {
const [tarefas, setTarefas] = useState([]);
useEffect(() => {
carregarTarefas();
}, []);
const carregarTarefas = async () => {
const tarefasCarregadas = await buscarTarefas();
setTarefas(tarefasCarregadas);
}
const adicionarTarefa = async (novaTarefa) => {
const tarefaCriada = await criarTarefa(novaTarefa);
setTarefas([...tarefas, tarefaCriada]);
};
const atualizarTarefaItem = async (tarefaAtualizada) => {
await atualizarTarefa(tarefaAtualizada);
setTarefas(tarefas.map(t => t.id === tarefaAtualizada.id ? tarefaAtualizada : t));
}
const apagarTarefaItem = async (id) => {
await apagarTarefa(id);
setTarefas(tarefas.filter(t => t.id !== id));
}
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20,
},
});
export default App;
useState para manter a lista de tarefas e useEffect para carregar as tarefas iniciais quando o componente é montado. As funções adicionarTarefa, atualizarTarefaItem e apagarTarefaItem atualizam o estado das tarefas e interagem com a camada de serviço (api.js).
O componente ScrollView permite rolar a tela caso o conteudo ultrapasse a altura da tela.
6. Criando a Camada de Serviço (api.js)
Isola a lógica de acesso aos dados (simulados, neste caso).
// services/api.js
// **IMPORTANTE:** Substitua por chamadas reais a uma API ou banco de dados!
let tarefasSimuladas = [
{ id: 1, titulo: "Comprar leite", descricao: "Ir ao mercado e comprar leite integral.", concluida: false },
{ id: 2, titulo: "Pagar contas", descricao: "Pagar a conta de luz e água.", concluida: true },
];
let proximoId = 3;
export const buscarTarefas = async () => {
return tarefasSimuladas;
};
export const criarTarefa = async (tarefa) => {
const novaTarefa = { ...tarefa, id: proximoId++, concluida: false };
tarefasSimuladas.push(novaTarefa);
return novaTarefa;
};
export const atualizarTarefa = async (tarefaAtualizada) => {
tarefasSimuladas = tarefasSimuladas.map(t => t.id === tarefaAtualizada.id ? tarefaAtualizada : t);
return tarefaAtualizada;
};
export const apagarTarefa = async (id) => {
tarefasSimuladas = tarefasSimuladas.filter(t => t.id !== id);
return id;
};
tarefasSimuladas). Em um aplicativo real, você substituiria isso por chamadas a uma API ou a um banco de dados.
7. Executando o Aplicativo
Execute o projeto React Native:# Usando React Native CLI
react-native run-android
# ou
react-native run-ios
# Usando Expo CLI
expo start
Próximos Passos
- Persistência de Dados: Integre um banco de dados (SQLite, Realm, Firebase) para persistir os dados.
- Estilização: Melhore a interface do usuário com componentes estilizados (Styled Components, NativeBase, etc.).
- Validação: Adicione validação aos formulários para garantir a integridade dos dados.
- Testes: Implemente testes unitários e de integração para garantir a qualidade do código.
- Navegação: Adicione navegação entre diferentes telas do seu aplicativo usando React Navigation.
- Redux/Context API: Para aplicações maiores, considere usar um gerenciador de estado como Redux ou Context API para gerenciar o estado global da aplicação.
Sem comentários