El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest projecte, construirem una aplicació de llista de tasques (To-Do List) utilitzant React Native. Aquest projecte ens permetrà aplicar els conceptes apresos en els mòduls anteriors i veure com es poden combinar per crear una aplicació funcional.

Objectius del Projecte

Crear una interfície d'usuari per afegir, visualitzar i eliminar tasques.
Utilitzar l'estat per gestionar les tasques.
Implementar estilització amb Flexbox.
Emmagatzemar les tasques localment utilitzant AsyncStorage.

Passos del Projecte

Configuració Inicial

Crear un nou projecte de React Native:

npx react-native init TodoListApp
cd TodoListApp

Instal·lar les dependències necessàries:

npm install @react-native-async-storage/async-storage

Estructura del Projecte

Organitzarem el projecte en diversos components per mantenir el codi net i modular.

App.js
components/TaskInput.js
components/TaskItem.js
components/TaskList.js

Implementació dels Components

3.1. TaskInput.js

Aquest component serà responsable de capturar l'entrada de l'usuari per afegir noves tasques.

import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';

const TaskInput = ({ onAddTask }) => {
  const [task, setTask] = useState('');

  const handleAddTask = () => {
    if (task.trim()) {
      onAddTask(task);
      setTask('');
    }
  };

  return (
    <View style={styles.inputContainer}>
      <TextInput
        placeholder="Add a new task"
        style={styles.input}
        value={task}
        onChangeText={setTask}
      />
      <Button title="Add" onPress={handleAddTask} />
    </View>
  );
};

const styles = StyleSheet.create({
  inputContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
  },
  input: {
    width: '80%',
    borderBottomColor: 'black',
    borderBottomWidth: 1,
    padding: 10,
  },
});

export default TaskInput;

3.2. TaskItem.js

Aquest component representarà cada tasca individualment.

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

const TaskItem = ({ task, onDelete }) => {
  return (
    <TouchableOpacity onPress={() => onDelete(task.id)}>
      <View style={styles.taskItem}>
        <Text>{task.text}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  taskItem: {
    padding: 10,
    backgroundColor: '#ccc',
    borderColor: 'black',
    borderWidth: 1,
    marginVertical: 10,
  },
});

export default TaskItem;

3.3. TaskList.js

Aquest component gestionarà la llista de tasques.

import React from 'react';
import { FlatList, StyleSheet } from 'react-native';
import TaskItem from './TaskItem';

const TaskList = ({ tasks, onDeleteTask }) => {
  return (
    <FlatList
      data={tasks}
      renderItem={({ item }) => (
        <TaskItem task={item} onDelete={onDeleteTask} />
      )}
      keyExtractor={(item) => item.id.toString()}
    />
  );
};

const styles = StyleSheet.create({});

export default TaskList;

Integració a App.js

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, SafeAreaView, StatusBar } from 'react-native';
import TaskInput from './components/TaskInput';
import TaskList from './components/TaskList';
import AsyncStorage from '@react-native-async-storage/async-storage';

const App = () => {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    const loadTasks = async () => {
      try {
        const storedTasks = await AsyncStorage.getItem('tasks');
        if (storedTasks) {
          setTasks(JSON.parse(storedTasks));
        }
      } catch (error) {
        console.error(error);
      }
    };

    loadTasks();
  }, []);

  useEffect(() => {
    const saveTasks = async () => {
      try {
        await AsyncStorage.setItem('tasks', JSON.stringify(tasks));
      } catch (error) {
        console.error(error);
      }
    };

    saveTasks();
  }, [tasks]);

  const addTask = (taskText) => {
    setTasks((currentTasks) => [
      ...currentTasks,
      { id: Math.random().toString(), text: taskText },
    ]);
  };

  const deleteTask = (taskId) => {
    setTasks((currentTasks) => currentTasks.filter((task) => task.id !== taskId));
  };

  return (
    <SafeAreaView style={styles.screen}>
      <StatusBar barStyle="dark-content" />
      <View style={styles.container}>
        <TaskInput onAddTask={addTask} />
        <TaskList tasks={tasks} onDeleteTask={deleteTask} />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  container: {
    padding: 50,
  },
});

export default App;

Proves i Depuració

Prova l'aplicació en un simulador/emulador per assegurar-te que totes les funcionalitats funcionen correctament.
Depura qualsevol error que pugui sorgir durant el desenvolupament.

Conclusió

En aquest projecte, hem creat una aplicació de llista de tasques utilitzant React Native. Hem après a gestionar l'estat, a estilitzar components amb Flexbox, i a emmagatzemar dades localment amb AsyncStorage. Aquest projecte ens ha proporcionat una base sòlida per a desenvolupar aplicacions més complexes en el futur.

Exercici Pràctic:

Afegir una funcionalitat per marcar les tasques com a completades.
Implementar una funcionalitat per editar les tasques existents.

Solució:

Per marcar les tasques com a completades, pots afegir una propietat completed a cada tasca i canviar el seu estil en funció d'aquesta propietat.
Per editar les tasques, pots afegir un botó d'edició a cada TaskItem i gestionar l'actualització del text de la tasca en l'estat.

Projecte 1: Aplicació de llista de tasques

Objectius del Projecte

Passos del Projecte

Configuració Inicial

Estructura del Projecte

Implementació dels Components

3.1. TaskInput.js

3.2. TaskItem.js

3.3. TaskList.js

Integració a App.js

Proves i Depuració

Conclusió

Curs de React Native

Mòdul 1: Introducció a React Native

Mòdul 2: Components bàsics i estilització

Mòdul 3: Estat i cicle de vida

Mòdul 4: Navegació

Mòdul 5: Xarxes i dades

Mòdul 6: Conceptes avançats

Mòdul 7: Desplegament i publicació

Mòdul 8: Projectes del món real