Hướng dẫn fullstack web dev với Node.js và React

Mở bài

Trong thời đại công nghệ số hiện nay, việc phát triển ứng dụng web fullstack với Node.js và React đang trở thành một kỹ năng quan trọng cho các lập trình viên. Sự kết hợp giữa Node.js ở phía server và React ở phía client giúp tối ưu hóa hiệu suất và trải nghiệm người dùng. Bài viết này sẽ hướng dẫn bạn từng bước để tạo ra một ứng dụng web fullstack hoàn chỉnh.

Mục lục

• Điều kiện tiên quyết
• Các bước thực hiện
• Kiểm thử và rollback
• Lỗi thường gặp
• FAQ

Điều kiện tiên quyết

• Node.js phiên bản 14 trở lên
• NPM hoặc Yarn để quản lý gói
• Kiến thức cơ bản về JavaScript
• Cài đặt MongoDB (tuỳ chọn cho việc lưu trữ dữ liệu)

Các bước thực hiện

Dưới đây là các bước để xây dựng ứng dụng web fullstack:

Bước 1: Cài đặt Node.js và tạo project

mkdir my-fullstack-app
cd my-fullstack-app
npm init -y

Bước 2: Cài đặt express và cors cho backend

npm install express cors

Bước 3: Tạo server với Express

Tạo một file server.js và thêm mã sau:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.json());

app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.listen(5000, () => {
    console.log('Server is running on port 5000');
});

Bước 4: Cài đặt React cho frontend

npx create-react-app client

Bước 5: Kết nối frontend và backend

Trong thư mục client/src, mở file App.js và thêm mã sau:

import React, { useEffect, useState } from 'react';

function App() {
    const [message, setMessage] = useState('');

    useEffect(() => {
        fetch('http://localhost:5000/')
            .then(res => res.text())
            .then(data => setMessage(data));
    }, []);

    return 
{message}
;
}

export default App;

Bước 6: Chạy ứng dụng

Mở 2 terminal: một cho server và một cho client:

node server.js

cd client
npm start

Kiểm thử và rollback

• Kiểm tra server hoạt động bằng cách truy cập http://localhost:5000/.
• Kiểm tra frontend hoạt động bằng cách truy cập http://localhost:3000/.
• Trong trường hợp có lỗi, bạn có thể quay lại phiên bản trước bằng cách sử dụng git checkout.

Lỗi thường gặp

• Lỗi CORS: Nếu bạn gặp lỗi liên quan đến CORS, hãy kiểm tra xem bạn đã thêm middleware app.use(cors()); chưa.
• Không tìm thấy module: Đảm bảo rằng tất cả các gói đã được cài đặt đúng cách.
• Ứng dụng không phản hồi: Kiểm tra console để xác định lỗi và sửa chữa mã nguồn.

FAQ

• Node.js và React có tương thích không?
  Node.js và React thường được sử dụng cùng nhau. Node.js chạy trên server, còn React chạy trên client.
• Có cần biết nhiều về JavaScript không?
  Để phát triển ứng dụng fullstack, bạn cần có kiến thức cơ bản về JavaScript.
• Tôi có thể sử dụng cơ sở dữ liệu nào?
  Bạn có thể sử dụng MongoDB, MySQL hoặc bất kỳ cơ sở dữ liệu nào mà bạn muốn.

Với hướng dẫn này, bạn đã có thể bắt đầu phát triển ứng dụng web fullstack với Node.js và React. Hãy thực hành và khám phá thêm nhiều tính năng khác để nâng cao kỹ năng lập trình của mình. Đừng quên theo dõi các bài viết khác trên The Mia Việt Nam để cập nhật thêm kiến thức mới!