Tuesday, March 2, 2021
Lưu Xuân Trường's Blog
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ
No Result
View All Result
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ
No Result
View All Result
Lưu Xuân Trường's Blog
No Result
View All Result

React framework for WordPress

truongluu by truongluu
02/11/2020
in Frontity
Reading Time: 4min read
0 0
0
React framework for WordPress
0
SHARES
112
VIEWS
Share on FacebookShare on Twitter

Đọ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é:

  1. Tạo project với Frontity cli
  2. Connect project tới api của WordPress
  3. Cài đặt theme ban đầu và tùy chỉnh giao diện (styled-component)
  4. 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

Tags: FrontityreactJSSSRwordpress
Previous Post

How to run bash script in NodeJS

Next Post

Frontity cơ bản phần I (Tạo và chạy dự án)

truongluu

truongluu

Next Post
Frontity cơ bản phần I (Tạo và chạy dự án)

Frontity cơ bản phần I (Tạo và chạy dự án)

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Quotations

About me

Field of interests: Svelte, ReactJS, Angular, VueJS, React Native, Flutter, NodeJS, MongoDB, Message Broker, WordPress, AdonisJS, NestJS, NuxtJS, Docker, Microservice, Arduino, Game HTML5. Hope to share my experiences with everybody

Recent Posts

  • Code push in React Native
  • What’s middleware? How does it work?
  • Styled components trong ReactJS
  • Frontity cơ bản phần I (Tạo và chạy dự án)
  • React framework for WordPress

Recent Comments

  • truongluu on Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)
  • Hung on Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)
  • Redux Saga phần III (Tips khi làm việc) - Lưu Xuân Trường's Blog on Quản lý trạng thái tải khi dùng redux-saga
  • Redux Saga phần II (Các khái niệm cơ bản) - Lưu Xuân Trường's Blog on Cheatsheets Non Blocking, Blocking Redux Saga
  • truongluu on Giới thiệu về UmiJS P4 (Server Side Rendering)

Archives

  • February 2021
  • January 2021
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • March 2020
  • February 2020
  • January 2020
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • April 2018
  • March 2018

Categories

  • AdonisJS
  • Angular
  • Arduino
  • Backend
  • Câu Hỏi Phỏng Vấn
  • CSS
  • Ebook
  • Frontend
  • Frontity
  • Góc Ngoài Lề
  • How to
  • IOS
  • IQ Test
  • Javascript
  • Kinh nghiệm
  • Kinh nghiệm làm việc
  • Máy chủ
  • Mobile
  • MongoDB
  • NestJS
  • NodeJS
  • NuxtJS
  • Plugins
  • React Native
  • React Native
  • ReactJS
  • Redis
  • Redux-Saga
  • RxJS
  • Tutorials
  • UmiJS
  • Uncategorized
  • VueJS
  • WordPress

Friends

Phu's blog
  • RxJS toàn tập (P1 giới thiệu RxJS là gì)

    RxJS toàn tập (P1 giới thiệu RxJS là gì)

    0 shares
    Share 0 Tweet 0
  • Giới thiệu về UmiJS P1 (Tổng quan về umiJS)

    0 shares
    Share 0 Tweet 0
  • Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)

    0 shares
    Share 0 Tweet 0
  • Redux Saga phần I (Giới thiệu)

    0 shares
    Share 0 Tweet 0
  • Một số câu hỏi phỏng vấn frontend developer

    0 shares
    Share 0 Tweet 0

About me

Lưu Xuân Trường

Field of interests: Svelte, ReactJS, Angular, VueJS, React Native, Flutter, NodeJS, MongoDB, Message Broker, WordPress, AdonisJS, NestJS, NuxtJS, Docker, Microservice, Arduino, Game HTML5. Hope to share my experiences with everybody

© 2020 https://luuxuantruong.info

No Result
View All Result
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ

© 2020 https://luuxuantruong.info

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In