Cảnh báo đúng! Đây không phải là một quá trình nhanh chóng, đơn giản, được hướng dẫn bởi chuyên gia về cách thiết lập các công nghệ này. Mặc dù, cuối cùng, chúng tôi đã thành công để mọi thứ diễn ra. Đây là về việc ghi lại trải nghiệm thực tế khi làm loại công việc này. Một số hoạt động dễ dàng, một số thì không. Đôi khi đó là lỗi của tôi. Đôi khi tài liệu không rõ ràng. Đôi khi những thay đổi đã xảy ra dưới chân chúng ta. Chúng ta phải chiến đấu vượt qua tất cả.
Chúng tôi có một kế hoạch nhỏ ở đây. Những gì chúng tôi muốn làm là tạo ra một dự án cục bộ sử dụng:
- React: Giả sử chúng tôi đang xây dựng một SPA và rất muốn làm việc với một mô hình thành phần.
- ReactDOM - Chúng tôi đang xây dựng cho web.
- Webpack: Chúng tôi muốn một máy chủ nhà phát triển, tải lại mô-đun nóng và một cách để gói các phụ thuộc của chúng tôi theo cách phù hợp với sản xuất.
- Babel: Chúng tôi có thể không cần biên dịch JavaScript nhiều trong tương lai, nhưng chúng tôi cần JSX và Babel là thứ biên dịch nó.
- Mô-đun CSS: Chúng tôi muốn viết một số CSS riêng biệt cho từng thành phần cụ thể và đây là một cách hay để làm điều đó trong đó các kiểu của chúng tôi vẫn còn trong các bảng định kiểu.
May mắn thay, khi đang định làm video này, tôi tìm thấy bài viết “Cách tạo ứng dụng React từ đầu bằng Webpack 4” của Linh Nguyen My. 12,5 nghìn lượt vỗ tay trên Phương tiện! Chà! Tôi cũng đã thêm một số lần vỗ tay vào nó, vì nó dường như là một hướng dẫn duy nhất thực sự bao gồm sự kết hợp bạn bè siêu phổ biến này theo một cách dễ tiếp cận mà thực sự hoạt động.
Điều đó không có nghĩa là mọi thứ diễn ra dễ dàng và suôn sẻ! Tôi gặp vô số rắc rối nhỏ trên đường đi. Một số trong số đó là những điều tôi mập mờ. Một số lỗi bí ẩn xuất hiện khi chúng tôi chạy các lệnh mà tôi hầu như không hiểu. Một số trong số đó dường như bị thiếu tài liệu về các tính năng. Tuy nhiên, cuối cùng chúng tôi đã sắp xếp tất cả và có một dự án hoạt động!