Desarrollo Full Stack: Una Aplicación de Tareas con React Native, NodeJS y MySQL

Introduction

This tutorial will guide you through creating a full-stack task management application using React Native for the front end, NodeJS with Express for the back end, and MySQL as the database. By following these steps, you will gain practical experience in building a complete web application and understand how these technologies interact with each other.

Step 1: Set Up Your Development Environment

To start, ensure you have the following installed on your machine:

• Node.js
• MySQL
• React Native CLI (or Expo for easier setup)

Practical Advice

• Verify the installation by running node -v and npm -v in your terminal.
• For MySQL, ensure you can access the MySQL shell and create a new database.

Step 2: Create the MySQL Database

1. Open your MySQL shell.
2. Create a new database for your project:

   CREATE DATABASE task_manager;
   

3. Use the new database:

   USE task_manager;
   

4. Create a table for tasks:

   CREATE TABLE tasks (
       id INT AUTO_INCREMENT PRIMARY KEY,
       title VARCHAR(255) NOT NULL,
       completed BOOLEAN DEFAULT FALSE
   );
   

Practical Advice

• Make sure to check for any existing databases or tables that might conflict before creating new ones.

Step 3: Set Up the NodeJS Backend

1. Create a new directory for your backend:

   mkdir task-manager-backend && cd task-manager-backend
   

2. Initialize a new Node.js project:

   npm init -y
   

3. Install necessary packages:

   npm install express mysql body-parser cors
   

Practical Advice

• Use cors to enable cross-origin requests, which is important for connecting your React Native app to the NodeJS server.

Step 4: Build the Express Server

1. Create a file named server.js in the backend directory.
2. Set up a basic Express server:

   const express = require('express');
   const bodyParser = require('body-parser');
   const cors = require('cors');
   const mysql = require('mysql');
   
   const app = express();
   app.use(cors());
   app.use(bodyParser.json());
   
   const db = mysql.createConnection({
       host: 'localhost',
       user: 'your_username',
       password: 'your_password',
       database: 'task_manager'
   });
   
   db.connect(err => {
       if (err) throw err;
       console.log('Database connected!');
   });
   
   app.listen(3000, () => {
       console.log('Server running on port 3000');
   });
   

Practical Advice

• Replace your_username and your_password with your actual MySQL credentials.

Step 5: Create API Endpoints

1. Add routes to handle task creation, retrieval, updating, and deletion:

   app.post('/tasks', (req, res) => {
       const task = req.body;
       db.query('INSERT INTO tasks SET ?', task, (err, result) => {
           if (err) throw err;
           res.send({ id: result.insertId, ...task });
       });
   });
   
   app.get('/tasks', (req, res) => {
       db.query('SELECT * FROM tasks', (err, results) => {
           if (err) throw err;
           res.send(results);
       });
   });
   

Practical Advice

• Test your endpoints using Postman or a similar tool to ensure they work properly.

Step 6: Set Up the React Native Frontend

1. Create a new React Native project:

   npx react-native init TaskManager
   

2. Navigate into your project directory:

   cd TaskManager
   

3. Install Axios for API requests:

   npm install axios
   

Practical Advice

• If using Expo, adjust your setup accordingly and ensure you have the Expo CLI installed.

Step 7: Build the User Interface

1. Create components for displaying, adding, and managing tasks.
2. Use Axios to connect to your backend API:

   import axios from 'axios';
   
   const fetchTasks = async () => {
       const response = await axios.get('http://localhost:3000/tasks');
       // Handle response
   };
   

Practical Advice

• Ensure your mobile device or simulator can access the backend server. You may need to use your machine's IP address instead of localhost.

Conclusion

You have successfully created a full-stack task management application using React Native, NodeJS, and MySQL. This tutorial covered setting up your environment, building the backend server with Express, and developing the React Native frontend.

Next Steps

• Expand your application by adding user authentication.
• Explore deploying your backend on platforms like Heroku or Vercel.
• Consider enhancing the UI with libraries such as React Navigation and Native Base for better user experience.