GoonGiới thiệu về Phát triển Full-Stack với Remix và Strapi
Phát triển full-stack là một cách tiếp cận toàn diện để xây dựng ứng dụng web, bao gồm cả phần front-end và back-end. Trong bài viết này, chúng ta sẽ tìm hiểu một khóa học nhanh về phát triển full-stack sử dụng Remix và Strapi. Chúng ta sẽ xây dựng một ứng dụng đơn giản hiển thị danh sách các bài viết được lấy từ back-end Strapi và sử dụng Remix cho phần front-end.
Tổng quan về Strapi và Remix
Strapi là một hệ thống quản lý nội dung không giao diện (headless CMS) cho phép quản lý nội dung dễ dàng, cung cấp API RESTful hoặc GraphQL. Mặt khác, Remix là một框架用于构建现代的React应用程序，支持服务器端渲染，优化了性能和用户体验。
课程先决条件
要跟随本课程，您需要具备JavaScript、React和Node.js的基础知识。此外，请确保您的计算机上已安装Node.js和npm。
第一步：设置Strapi
要设置Strapi，我们首先需要创建一个新的Strapi项目。打开您的终端并运行命令以创建一个名为my-strapi-backend的新Strapi项目。
接下来，我们定义一个内容类型。通过导航到http://localhost:1337/admin打开Strapi管理面板，并创建一个新的集合类型名为article，包含标题和内容字段。
然后，我们通过进入articles集合并创建一些示例文章来添加文章。
要设置权限，转到settings -> roles -> public，并启用article的find和findOne权限。
最后，获取API URL，该URL将可从http://localhost:1337/api/articles访问。
第二步：设置Remix应用程序
要设置Remix应用程序，创建一个新的Remix项目，在新的终端窗口中按照提示选择您的偏好设置。
接下来，通过导航到您的Remix项目目录并运行安装命令来安装Axios以进行API调用。
第三步：在Remix中从Strapi获取数据
要在Remix中从Strapi获取数据，通过创建一个新文件app/routes/articles.jsx来创建文章的路由。
在该代码中，我们从Strapi获取文章并以列表形式显示。最后，通过修改app/routes/index.jsx添加一个链接到文章页面。
结论
总之，您现在拥有一个使用Remix作为前端和Strapi作为后端的简单全栈应用程序。您可以通过添加创建、更新和删除文章等功能以及实现用户认证来扩展此应用程序。您还可以使用如Tailwind CSS或Bootstrap等CSS框架来自定义样式。如果您需要有关过程的任何特定部分的更多详细信息，请随时询问。
(Note: There is a slight error in the translation where "框架用于构建现代的React应用程序，支持服务器端渲染，优化了性能和用户体验" should be "một khung làm việc hiện đại để xây dựng ứng dụng React, hỗ trợ kết xuất phía máy chủ, tối ưu hóa hiệu suất và trải nghiệm người dùng.")
Corrected version:
Giới thiệu về Phát triển Full-Stack với Remix và Strapi
Phát triển full-stack là một cách tiếp cận toàn diện để xây dựng ứng dụng web, bao gồm cả phần front-end và back-end. Trong bài viết này, chúng ta sẽ tìm hiểu một khóa học nhanh về phát triển full-stack sử dụng Remix và Strapi. Chúng ta sẽ xây dựng một ứng dụng đơn giản hiển thị danh sách các bài viết được lấy từ back-end Strapi và sử dụng Remix cho phần front-end.
Tổng quan về Strapi và Remix
Strapi là một hệ thống quản lý nội dung không giao diện (headless CMS) cho phép quản lý nội dung dễ dàng, cung cấp API RESTful hoặc GraphQL. Mặt khác, Remix là một khung làm việc hiện đại để xây dựng ứng dụng React, hỗ trợ kết xuất phía máy chủ, tối ưu hóa hiệu suất và trải nghiệm người dùng.
Điều kiện cần để tham gia khóa học
Để theo dõi khóa học này, bạn cần có kiến thức cơ bản về JavaScript, React và Node.js. Ngoài ra, hãy đảm bảo rằng bạn đã cài đặt Node.js và npm trên máy tính của mình.
Bước 1: Thiết lập Strapi
Để thiết lập Strapi, chúng ta cần tạo một dự án Strapi mới. Mở terminal và chạy lệnh để tạo một dự án Strapi mới với tên my-strapi-backend.
Tiếp theo, chúng ta định nghĩa một loại nội dung. Mở bảng điều khiển quản trị Strapi bằng cách điều hướng đến http://localhost:1337/admin và tạo một loại tập hợp mới gọi là article với các trường cho tiêu đề và nội dung.
Định nghĩa Loại Nội Dung tại 26 giây
Sau đó, chúng ta thêm một số bài viết bằng cách điều hướng đến tập hợp articles và tạo một số bài viết mẫu.
Để thiết lập quyền, hãy chuyển đến settings -> roles -> public và kích hoạt quyền find và findOne cho article.
Cuối cùng, lấy URL API, sẽ có sẵn tại http://localhost:1337/api/articles.
![Lấy URL API](https://cdn.gotest.app/vid