Давайте разом створимо наш перший додаток на MERN!

текст перекладу
У цьому посібнику ми створимо простий додаток для управління завданнями за допомогою стека MERN (MongoDB, Express.js, React, Node.js). Цей посібник призначений для початківців, із усіма необхідними кроками для створення повноцінного додатку.

MERN Stack

Передумови

Перед тим, як почати, переконайтеся, що у вас встановлене наступне:

• Node.js та npm: Завантажити тут
• MongoDB: Завантажити тут
• Редактор коду, наприклад, VS Code

Структура проєкту

Ми організуємо додаток у два каталоги:

1. Frontend: Містить код React.
2. Backend: Містить код сервера Express і підключення до MongoDB.

Налаштування бекенду

Щоб створити надійний бекенд для нашого додатку Task Manager, нам потрібно налаштувати сервер для керування зберіганням, отриманням і обробкою даних. Цей розділ проведе вас через процес ініціалізації бекенду, підключення до бази даних MongoDB і налаштування сервера Express.

Крок 1: Ініціалізація бекенду

На цьому кроці ми налаштуємо основне середовище бекенду для нашого проєкту. Це включає створення нової папки для бекенду, ініціалізацію її за допомогою npm і встановлення необхідних залежностей, таких як Express.js, Mongoose і CORS. Це налаштування забезпечить готовність нашого сервера до обробки вхідних запитів і зв'язку з базою даних MongoDB.

1. Створіть папку з назвою backend.
2. Відкрийте термінал у цій папці та виконайте:

• npm init -y

Це створить файл package.json.

1. Встановіть необхідні залежності:

• npm install express mongoose cors

Крок 2: Налаштування MongoDB

Підключення до MongoDB — важливий крок для зберігання і керування даними нашого додатку. У цьому проєкті ми використаємо MongoDB Atlas, хмарний сервіс баз даних для зберігання інформації про завдання, такої як назва, опис і статус виконання кожного завдання. MongoDB Atlas дозволяє зручно керувати і масштабувати нашу базу даних без необхідності хостити її локально.

Налаштування MongoDB Atlas

1. Створіть акаунт MongoDB Atlas:

• Перейдіть на MongoDB Atlas і зареєструйтесь для безкоштовного акаунта.
• Увійдіть і створіть новий проєкт.

2. Створіть кластер:

• У вашому проєкті натисніть “Build a Cluster” і виберіть безкоштовний кластер.
• Виберіть бажаного хмарного постачальника та регіон, а потім натисніть “Create Cluster”.

3. Додайте користувача бази даних:

• У вашому кластері перейдіть до розділу “Database Access” і натисніть “Add New Database User”.
• Встановіть ім'я користувача та пароль (не забудьте записати їх, оскільки вони знадобляться пізніше).

4. Дозвольте доступ до мережі:

• Перейдіть до розділу “Network Access” і натисніть “Add IP Address”.
• Ви можете дозволити доступ зі своєї поточної IP-адреси або налаштувати доступ з будь-якої IP-адреси, додавши 0.0.0.0/0 (не рекомендується для продакшн-оточення).

5. Отримайте рядок підключення:

• У розділі “Clusters” натисніть “Connect” і виберіть “Connect your application”.
• Скопіюйте наданий рядок підключення, який виглядатиме приблизно так:
• mongodb+srv://<username>:<password>@cluster0.mongodb.net/?retryWrites=true&w=majority
• Замініть <username>, <password> і <dbname> на ваші фактичні облікові дані та ім'я бази даних.

Підключення до MongoDB Atlas у коді

Створіть файл з назвою db.js для підключення до MongoDB:

const mongoose = require('mongoose');  
const connectDB = async () => {  
 try {  
 const conn = await mongoose.connect('YOUR_MONGO_URI');  
 console.log(`MongoDB Connected: ${conn.connection.host}`);  
 } catch (error) {  
 console.log(`Error: ${error.message}`);  
 process.exit(1);  
 }  
};  
module.exports = connectDB;

Замініть YOUR_MONGO_URI на рядок підключення з MongoDB Atlas. Переконайтеся, що рядок включає ваше ім'я користувача, пароль та ім'я бази даних.

Тепер ваш бекенд налаштовано для підключення до бази даних MongoDB Atlas!

Крок 3: Створення моделі завдання

Модель завдання визначає структуру даних, які будуть зберігатися у нашій базі даних MongoDB.
текст перекладу
Кожне завдання матиме заголовок, необов'язковий опис і статус виконання, що вказує на те, чи виконано завдання. Ця модель служить шаблоном для взаємодії з даними про завдання в додатку.

У папці models створіть файл task.js:

const mongoose = require('mongoose');  
const taskSchema = new mongoose.Schema({  
 title: {  
 type: String,  
 required: true,  
 },  
 description: {  
 type: String,  
 },  
 completed: {  
 type: Boolean,  
 default: false,  
 },  
});  
const Task = mongoose.model('Task', taskSchema);  
module.exports = Task;

Крок 4: Налаштування сервера Express

Сервер Express є основою нашої бекенд-системи. Він обробляє всі API-запити та відповіді, забезпечуючи безперебійну комунікацію між фронтендом і базою даних. На цьому кроці ми налаштуємо базовий сервер Express і конфігуруємо його для управління маршрутами, пов'язаними з завданнями.

Створіть файл server.js:

const express = require('express');  
const connectDB = require('./db');  
const Task = require('./models/task');  
const cors = require('cors');  
const app = express();  
const PORT = 5000;  
connectDB();  
app.use(cors({ origin: 'http://localhost:3000' }));  
app.use(express.json());  
app.get('/', (req, res) => {  
 res.send('Welcome to Task Manager API');  
});  
app.post('/tasks', async (req, res) => {  
 try {  
 const task = await Task.create(req.body);  
 res.status(201).json(task);  
 } catch (error) {  
 res.status(500).json({ message: error.message });  
 }  
});  
app.get('/tasks', async (req, res) => {  
 try {  
 const tasks = await Task.find();  
 res.json(tasks);  
 } catch (error) {  
 res.status(500).json({ message: error.message });  
 }  
});  
app.listen(PORT, () => {  
 console.log(`Server running on http://localhost:${PORT}`);  
});

Налаштування фронтенду

Щоб доповнити наш бекенд, ми налаштуємо фронтенд за допомогою React. Фронтенд є користувацьким інтерфейсом, що дозволяє користувачам взаємодіяти з додатком, переглядати завдання та ефективно їх керувати. Цей розділ проведе вас через ініціалізацію React-додатку, створення компонентів та інтеграцію з API бекенду.

Крок 1: Ініціалізація фронтенду

Цей крок створює основу для нашого React-додатку, який служитиме користувацьким інтерфейсом для нашого додатку Task Manager. Ініціалізуючи фронтенд, ми налаштовуємо структуру, необхідну для створення інтерактивних компонентів і ефективного керування потоком даних.

1. Створіть папку з назвою frontend.
2. Відкрийте термінал у цій папці та виконайте:

• npx create-react-app .

1. Встановіть Axios для HTTP-запитів:

• npm install axios

Крок 2: Налаштування файлу API

Файл API централізує конфігурацію для виконання HTTP-запитів до нашого бекенду. Такий підхід спрощує код і дозволяє легше вносити оновлення, наприклад, змінюючи базовий URL або додаючи заголовки запитів. Створюючи багаторазову інстанцію Axios, ми забезпечуємо постійну комунікацію між фронтендом і бекендом.

На цьому кроці ми створимо спеціальний файл для конфігурації Axios. Це налаштування забезпечує зручне використання всіх компонентів для взаємодії з API без дублювання коду. Також це дозволить нам у майбутньому додавати такі можливості, як заголовки автентифікації або обробка помилок в одному центральному місці.

Створіть файл src/Api.js:

import axios from 'axios';  
const API = axios.create({  
 baseURL: 'http://localhost:5000',  
});  
export default API;

Крок 3: Створення компонента TaskList

Компонент TaskList відповідає за отримання та відображення завдань з бекенду. Він використовує хук React useEffect для завантаження завдань під час монтування компонента. Відображаючи список завдань, компонент надає чіткий і організований вигляд усіх завдань, що зберігаються в базі даних.

На цьому кроці ви також дізнаєтесь, як використовувати хук useState для керування станом списку завдань і динамічного оновлення інтерфейсу.
текст перекладу
Цей компонент буде служити основою для перегляду всіх завдань, дозволяючи користувачам легко стежити за своїм прогресом.

Створіть файл src/TaskList.js:

import { useState, useEffect } from "react";  
import API from './Api';  
function TaskList() {  
 const [tasks, setTasks] = useState([]);  
 useEffect(() => {  
 const fetchTasks = async () => {  
 try {  
 const response = await API.get('/tasks');  
 setTasks(response.data);  
 } catch (error) {  
 console.log(error.message);  
 }  
 };  
 fetchTasks();  
 }, []);  
 return (  

Task List
    {tasks.map((task) => (    
    {task.title} - {task.completed ? 'Completed' : 'Pending'}    
    ))}    
    );   }   export default TaskList; 

Крок 4: Створення компонента AddTask

Компонент AddTask надає форму для введення нових завдань користувачами. Він управляє станом форми за допомогою хука useState (React) і відправляє POST-запит до бекенду при подачі форми. Це дозволяє користувачам безпосередньо додавати завдання в базу даних, не взаємодіючи безпосередньо з бекендом.

На цьому кроці ви дізнаєтесь, як обробляти подачу форм у React, перевіряти введені користувачем дані та оновлювати бекенд новими даними. Ця функція додає інтерактивності додатку, роблячи його більш цікавим для користувачів.

Створіть файл src/AddTask.js:

import { useState } from "react";  
import API from './Api';  
function AddTask() {  
    const [title, setTitle] = useState('');  
    const [description, setDescription] = useState('');  
    const submitHandler = async (e) => {  
        e.preventDefault();  
        try {  
            const response = await API.post('/tasks', { title, description });  
            console.log('Task added', response.data);  
            setTitle('');  
            setDescription('');  
        } catch (error) {  
            console.log('Error:', error.message);  
        }  
    };  
    return (        
        Add Task
        <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} />     
        <textarea value={description} onChange={(e) => setDescription(e.target.value)} />    
        <button onClick={submitHandler}>Add Task</button>   
    );  
}  
export default AddTask;  

Крок 5: Об'єднання компонентів у App.js

На фінальному етапі налаштування фронтенду ми інтегруємо всі окремі компоненти в основний додаток. Компонент App служить коренем нашого React-додатку, об'єднуючи список завдань і форму для додавання завдань в єдиний інтерфейс. Структуруючи додаток таким чином, ми створюємо зручний користувацький досвід, де завдання можна легко переглядати та додавати.

Оновіть файл src/App.js:

import TaskList from './TaskList';  
import AddTask from './AddTask';  
function App() {  
    return (    
        <div>
            <TaskList />
            <AddTask />
        </div>
    );  
}  
export default App;  

Запуск додатку

Запуск бекенду

У папці backend виконайте:

node server.js

Запуск фронтенду

У папці frontend виконайте:

npm start

Вітаємо! Ви успішно створили додаток для керування завданнями за допомогою MERN-стеку. Налаштуйте його далі під ваші потреби. Успіхів у програмуванні!

Перекладено з: Let’s Build Our First MERN Application Together!