Đọc tiêu đề thôi thì các bạn cũng hình dung được gì ReactJS framework for WordPress. Một chủ đề mình nghĩ đã cũ nhưng mà hay để tìm hiểu
Đã có một số framework ra đời nhưng vấn đề là cách tiếp cận khá phức tạp. Về việc xử dụng webapp SSR phần frontend thì mình có biết 1 số tiếp cận chẳng hạn Strapi, hướng tiếp cận là cũng cố gắn xây dựng 1 CMS giống với cách mà WordPress đang làm việc (api viết bằng NodeJS và phần frontend có thể là React, Vue, Angular, NuxtJS)
Nhưng cách tiếp cận khá phức tạp, lại không tận dụng được thế mạnh là bạn vẫn dùng CMS WordPress để nhập liệu và phần frontend phải được tách rời
Tình cờ mình biết được Frontity và muốn làm 1 chuỗi bài về Frontity, vì sao vậy
- Cách tiếp cận quá nhanh, quá đơn giản (chỉ cần 1 config đơn giản).
- Có cung cấp một số theme mẫu và có thể xây dựng thêm.
- WordPress bây giờ đóng vai trò và nhập nội dung, quản lý page, post này nọ.
- React sẽ đảm nhận việc hiển thị nội dung ở frontend và hổ trợ luôn vấn đề SSR (SEO) cho mình.
- Việc làm layout theo ý mình vô cùng tiện lợi, làm trên nền ReactJS luôn.
- Có khả năng mở rộng, có thể xây dựng thêm package để làm việc (tích hợp luôn contact form 7), khá hay, tương lai có thể mở rộng cho nhiều plugin khác, nếu bạn nắm được rõ Frontity.
- Một vấn đề quan trọng nữa là mình đã xem qua user case bên này, điểm số rất cao nhé các bạn
- Tạo 1 ứng dụng webapp và chạy nó chưa tới 1 phút 🙂
Để tạo 1 ứng dụng, các bạn chỉ cần qua 4 bước nhé:
- Tạo project với Frontity cli
- Connect project tới api của WordPress
- Cài đặt theme ban đầu và tùy chỉnh giao diện (styled-component)
- Deploy ứng dụng
Tạo project với Frontity cli
|
1 2 3 4 5 6 7 8 9 10 11 12 |
npx frontity create my-app ✔ Creating package.json. ✔ Creating frontity.settings.js. ✔ Cloning @frontity/mars-theme. ✔ Installing dependencies. Frontity project created! Run cd my-app && npx frontity dev and have fun! 🎉 cd my-app |
Connect project tới api của WordPress
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// frontity.settings.js export const settings = { packages: [ { name: "@frontity/wp-source", state: { source: { api: "https://frontity.org/wp-json" }, }, } ], }; |
Khai báo api path để connect với WordPress. Ví dụ với WordPress của mình thì link api sẽ là https://luuxuantruong.info/wp-json
Cài đặt theme ban đầu và tùy chỉnh giao diện
|
1 2 3 4 5 6 7 |
import { styled } from "frontity"; const StyledDiv = styled.div` width: 100%; text-align: center; color: white; `; |
Việc style sẽ khá quen thuộc với các bạn đã dùng styled-component bên ReactJS
Deploy ứng dụng
Deploy với dòng lệnh cơ bản
|
1 2 |
npx frontify build npm frontify serve |
Bài này mình chỉ giới thiệu sơ qua về Frontity và cách thức tiếp cận cơ bản của nó, bài sau mình sẽ đi chi tiết hơn về các mục như: cách tạo khai báo menu, cách chỉnh sửa layout, xây dựng một package…, và xây thêm 1 theme thì sẽ làm như thế nào
