Thủ thuật Website

Headless WordPress with React

Phần giới thiệu về cách xây dựng các trang web hỗ trợ WordPress được tách rời bằng cách sử dụng API REST của WordPress và Tạo ứng dụng ReactÂ

Trong những tháng gần đây, tôi rất quan tâm đến WordPress REST API (sau đây gọi là WP-API) và React. Tôi đang viết một loạt bài giới thiệu về WP-API, nhưng quyết định ngắt để có một bài đăng chi tiết, đầy đủ hơn.

Bài đăng này sẽ trình bày cách bắt đầu xây dựng các ứng dụng web WordPress tách rời (hoặc “không đầu”) với Tạo ứng dụng React và WP-API. Trong khi bài đăng này sẽ tập trung vào React cho giao diện người dùng, một số khái niệm chung vẫn được áp dụng nếu bạn muốn xây dựng giao diện người dùng của mình bằng một thứ gì đó khác như Angular, Rx, Ember hoặc Vue.

Và bạn không cần phải dừng lại với các ứng dụng web. Bạn có thể sử dụng WP-API để cấp nguồn không chỉ cho các ứng dụng web mà còn cả các ứng dụng dành cho thiết bị di động, ứng dụng bảng điều khiển trò chơi, v.v.

Trước khi bắt đầu, vui lòng sao chép kho lưu trữ cho bản demo này .

Tại sao?

Tại sao sử dụng WordPress?

Câu hỏi đầu tiên của bạn có thể là “tại sao tôi nên quan tâm rằng WordPress có API?” Tôi đã viết về điều này một chút trong một bài đăng khác , nhưng nếu bạn không muốn mở một tab khác, đây là một số điểm nổi bật:

  1. Tính đến tháng 11, WordPress hiện chiếm hơn 27% web . Và kể từ phiên bản 4.7, được phát hành chỉ vài tháng trước, tất cả các điểm cuối nội dung cho WP-API hiện đã được bao gồm trong lõi WordPress, vì vậy hàng triệu API mới đã xuất hiện trực tuyến.
  2. WordPress siêu thân thiện với người dùng. Đây có thể là lý do lớn nhất duy nhất tại sao WordPress lại được áp dụng rộng rãi như vậy. Nó cho phép bất kỳ ai, ngay cả những người không chuyên về kỹ thuật, tạo và chỉnh sửa một trang web. Không có công cụ nào khác có số lượng tính năng và hỗ trợ tương tự như WordPress.
  3. WordPress là một nền tảng quản lý nội dung mạnh mẽ . Đó là một quan niệm sai lầm phổ biến của một số nhà phát triển chưa bao giờ sử dụng WordPress (hoặc những người đã không sử dụng nó trong một thời gian dài) rằng WordPress chỉ đơn thuần để viết blog. Mặc dù nó tuyệt vời để viết blog, nhưng nó thực sự tuyệt vời để quản lý hiệu quả nội dung tùy chỉnh thông qua Loại bài đăng tùy chỉnh .

Tại sao nên tạo ứng dụng ReactÂ?

Trừ khi bạn đang sống dưới một tảng đá trong thế giới phát triển web, chắc chắn bạn đã nghe nói về React cho đến bây giờ. Tìm hiểu nền tảng của React nằm ngoài phạm vi của bài viết này, nhưng tôi muốn giới thiệu với bạn Tạo ứng dụng React , cách dễ nhất để bắt đầu với React.

Bản thân việc bắt đầu với React khá dễ dàng. Bạn có thể thả React và ReactDOM vào ứng dụng của mình ngay hôm nay:

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

Nhưng nếu bạn đang xem xét sử dụng React trên nhiều phần nhỏ của ứng dụng của mình, độ sâu của lỗ thỏ có thể nhanh chóng trở nên quá tải. Muốn tìm hiểu sâu về React thường dẫn đến rất nhiều thứ phải học: ES6, JSX, Babel, Webpack, và nhiều thứ khác nữa, đòi hỏi đầu tư thời gian đáng kể để thực sự hiểu.

Sau đó, ngay cả khi đã có được kiến ​​thức sâu sắc về các chủ đề này, bạn vẫn sẽ dành một lượng thời gian đáng kể để cấu hình cho hầu hết các dự án không tầm thường.
Nhưng nếu bạn chỉ muốn thử React thì sao? Hoặc điều gì sẽ xảy ra nếu bạn muốn bắt đầu với một tập hợp các mặc định cấu hình và sau đó sửa đổi các mặc định đó khi bạn tiếp tục?

Vâng, có hy vọng: Tạo ứng dụng React.

Mùa hè năm ngoái, Facebook đã phát hành Create React App, một công cụ soạn sẵn với một bộ tiêu chuẩn cấu hình hợp lý để bạn có thể nhanh chóng bắt đầu với chính React và sau đó đi xuống lỗ hổng theo tốc độ của riêng bạn.

Tạo Ứng dụng React đi kèm với Webpack, ESLint, Babel, Autoprefixer, Jest và các công cụ tuyệt vời khác từ cộng đồng.

Tại sao sử dụng WordPress không có đầu?

Được rồi, vì vậy WordPress rất tuyệt. React là tuyệt vời. Vậy tại sao chúng ta nên kết hợp cả hai?

  1. JavaScript là tương lai của WordPress . Vào cuối năm 2015, Automattic, công ty đứng sau WordPress, đã viết lại toàn bộ ứng dụng quản trị của họ ( tên mã là “Calypso” ) bằng JavaScript. Và vài tuần sau, Matt Mullenweg, Giám đốc điều hành của Automattic, đã đưa ra một bài tập lớn về nhà cho tất cả các nhà phát triển WordPress: “ hãy học JavaScript một cách sâu sắc ”.
  2. Bởi vì phân tách giao diện người dùng / phụ trợ là tốt cho người dùng và nhà phát triển trên toàn thế giới . Có thể có trải nghiệm người dùng tốt hơn. Duy trì các cơ sở mã lớn hiệu quả hơn. Hiệu suất tốt hơn.
  3. Công ty của bạn có thể thuê nhiều tài năng chuyên môn hơn . Các kỹ sư frontend không nhất thiết phải biết WordPress và ngược lại. Thay vì thuê một nhà phát triển chủ đề / plugin WordPress chung chung, bạn có thể thuê các vai trò riêng biệt, những người có kiến ​​thức sâu về kỹ thuật giao diện người dùng và WordPress tương ứng.

Tiến lên!

Được rồi, bây giờ chúng ta đã xác định được lý do tại sao điều này lại quan trọng, hãy đi sâu vào!

Những gì chúng tôi sẽ xây dựng

Đối với hướng dẫn này, chúng tôi sẽ xây dựng một ứng dụng đơn giản hiển thị dữ liệu về từng bộ phim Chiến tranh giữa các vì sao. Dữ liệu sẽ được cung cấp bởi một API REST của WordPress mà chúng tôi sẽ xây dựng và chúng tôi sẽ sử dụng nó với giao diện người dùng React được tích hợp với Create React App.

Bước một: Tạo cài đặt WordPress mới

Tôi sẽ không đi sâu về vấn đề này, vì có hàng ngàn tài nguyên trên web để thiết lập cài đặt WordPress.

Nếu đây là lần đầu tiên bạn tìm hiểu sâu về WordPress, thì tôi sẽ cho rằng bạn chưa thiết lập môi trường cục bộ. Có một số giải pháp tiện ích, chẳng hạn như MAMP và DesktopServer, rất tốt để tiến hành nhanh chóng. Hiện tại, tôi đang sử dụng Vagrant với Varying Vagrant Vagrant và Variable VVV .

vv + VVV = Môi trường cục bộ tuyệt vời cho WordPress

Khi bạn đã thiết lập xong bản cài đặt WordPress mới, hãy tiếp tục và truy cập trang tổng quan quản trị của bạn:http://your-site.dev/wp-admin

Nhìn vào cài đặt mới lạ mắt đó!  ✨

Bước hai: Cài đặt Plugin WordPress REST API (có thể không bắt buộc)

Bước này chỉ bắt buộc nếu bạn đang chạy phiên bản WordPress cũ hơn 4.7. Bạn có thể kiểm tra phiên bản WordPress bạn đang chạy bằng cách đi tới Trang tổng quan> Cập nhật:

~Bảng điều khiển WordPress - Phần cập nhật

Kể từ WordPress 4.7, WP-API được tích hợp vào lõi WordPress . Vì vậy, nếu bạn đang chạy 4.7 hoặc cao hơn, bạn đã sẵn sàng.

Nếu không, hãy điều hướng đến Plugin> Add New và tìm kiếm “WordPress REST API (Version 2)”. Hãy tiếp tục và Cài đặt nó và sau đó Kích hoạt nó.

Bước 3: Kiểm tra SanityÂ

Kích hoạt công cụ yêu cầu API yêu thích của bạn (tôi thích sử dụng Postman) hoặc cửa sổ Terminal nếu bạn thích.

Kích hoạt một yêu cầu GET tới http://your-site.dev/wp-json/. Bạn sẽ lấy lại một số JSON chứa tất cả các tài nguyên của trang web WordPress của bạn và các điểm cuối tương ứng của chúng.

http://your-site.dev/wp-json/wp/v2/posts/1bài kiểm tra đi kèm với tất cả các cài đặt WordPress mới theo mặc định. Nếu bạn đã xóa bài kiểm tra, bạn sẽ không nhận lại được gì.

Bước 4: Cài đặt các Plugin cho Dự án này

Điều tiếp theo cần làm là cài đặt các plugin mà chúng tôi cần cho dự án demo này. Hãy tiếp tục và cài đặt những thứ này và sau đó quay lại để xem giải thích về từng thứ (trừ khi có ghi chú khác, mỗi thứ có thể được tìm kiếm và cài đặt từ Plugins> Add New).

Giao diện người dùng CPT

Loại bài đăng tùy chỉnh (CPTs) là một trong những tính năng mạnh mẽ nhất của WordPress. Nó cho phép bạn tạo các loại nội dung tùy chỉnh để vượt ra ngoài các Bài đăng và Trang mặc định mà WordPress cung cấp.

Mặc dù chắc chắn có thể (và khá đơn giản) để tạo CPTs thông qua PHP, nhưng tôi thực sự thích giao diện người dùng CPT dễ sử dụng. Ngoài ra, nếu bạn đang đọc bài này mà không có kinh nghiệm WordPress trước đây, tôi muốn bạn có thể tập trung vào chính WP-API thay vì WordPress và PHP.

Đối với bản demo của chúng tôi, chúng tôi sẽ tạo một CPT có tên là Phim.

Tôi sẽ trình bày cách thêm Movies CPT theo cách thủ công, nhưng nếu bạn muốn bỏ qua điều đó và chỉ nhập dữ liệu, hãy chuyển đến Giao diện người dùng CPT> Công cụ và dán vào phần sau:

{
"movies": {
"name": "movies",
"label": "Movies",
"singular_label": "Movie",
"description": "",
"public": "true",
"publicly_queryable": "true",
"show_ui": "true",
"show_in_nav_menus": "true",
"show_in_rest": "true",
"rest_base": "movies",
"has_archive": "false",
"has_archive_string": "",
"exclude_from_search": "false",
"capability_type": "post",
"hierarchical": "false",
"rewrite": "true",
"rewrite_slug": "",
"rewrite_withfront": "true",
"query_var": "true",
"query_var_slug": "",
"menu_position": "",
"show_in_menu": "true",
"show_in_menu_string": "",
"menu_icon": "",
"supports": [
"title",
"editor",
"thumbnail"
],
"taxonomies": [],
"labels": {
"menu_name": "",
"all_items": "",
"add_new": "",
"add_new_item": "",
"edit_item": "",
"new_item": "",
"view_item": "",
"search_items": "",
"not_found": "",
"not_found_in_trash": "",
"parent_item_colon": "",
"featured_image": "",
"set_featured_image": "",
"remove_featured_image": "",
"use_featured_image": "",
"archives": "",
"insert_into_item": "",
"uploaded_to_this_item": "",
"filter_items_list": "",
"items_list_navigation": "",
"items_list": ""
},
"custom_supports": ""
}
}

Bây giờ cho quy trình thủ công:

  1. Chuyển đến Giao diện người dùng CPT> Thêm / Chỉnh sửa Loại bài đăng
  2. Đối với Slug Loại bài đăng, hãy nhập moviesâ € Š – â € Šđây là URL slug mà WordPress sẽ sử dụng.
  3. Đối với Nhãn số nhiều, hãy nhậpMovies
  4. Đối với Nhãn số ít, hãy nhậpMovie
  5. QUAN TRỌNG: Cuộn xuống khu vực Cài đặt và tìm tùy chọn “Hiển thị trong API REST”. Theo mặc định, điều này được đặt thành Sai. Nếu bạn không thay đổi nó thành True, bạn sẽ không thể truy vấn CPT này bằng WP-API. Ngay bên dưới tùy chọn đó, bạn sẽ thấy tùy chọn “REST API base slug” và bạn có thể nhập vào moviesđây.
  6. Cuộn xuống hết cỡ và nhấp vào Thêm loại bài đăng.

Bạn sẽ thấy một tùy chọn Phim mới xuất hiện trong thanh bên:

Phim xuất hiện trong thanh bên của Bảng điều khiển WordPress

Trường tùy chỉnh nâng cao

Nói theo thuật ngữ cơ sở dữ liệu, nếu CPT là bảng, thì Trường tùy chỉnh là cột. Đây thực sự không phải là cách WordPress lưu trữ các CPT và Trường tùy chỉnh trong cơ sở dữ liệu của nó, nhưng tôi thấy minh họa này hữu ích cho những người có giới hạn hoặc không có kinh nghiệm WordPress. CPT là tài nguyên (tức là “Phim”) và Trường tùy chỉnh là siêu dữ liệu về tài nguyên đó (tức là “Năm phát hành, Xếp hạng, Mô tả”).

Trường tùy chỉnh nâng cao (ACF) là plugin dành cho Trường tùy chỉnh của WordPress. Tất nhiên, bạn có thể tạo Trường tùy chỉnh bằng PHP (giống như CPTs), nhưng ACF là một công cụ tiết kiệm thời gian (và thật thú vị khi sử dụng).

Bạn có thể lấy cái này từ Plugins> Add New, nhưng nếu bạn muốn sử dụng chức năng nhập để nhập dữ liệu mẫu của tôi, bạn sẽ cần phiên bản Pro, bạn có thể tìm thấy ở đây ).

Nếu bạn có phiên bản Pro, hãy chuyển đến Trường tùy chỉnh> Công cụ sau khi Kích hoạt plugin. Sau đó, bạn có thể dán JSON này để nhập các trường bạn cần:

[
{
"key": "group_582cf1d1ea6ee",
"title": "Movie Data",
"fields": [
{
"key": "field_582cf1d9956d7",
"label": "Release Year",
"name": "release_year",
"type": "number",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"min": "",
"max": "",
"step": ""
},
{
"key": "field_582cf1fc956d8",
"label": "Rating",
"name": "rating",
"type": "number",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"min": "",
"max": "",
"step": ""
},
{
"key": "field_5834d24ad82ad",
"label": "Description",
"name": "description",
"type": "textarea",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"maxlength": "",
"rows": "",
"new_lines": "wpautop"
}
],
"location": [
[
{
"param": "post_type",
"operator": "==",
"value": "movies"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": 1,
"description": ""
}
]

Nếu bạn không có phiên bản Pro, đây là cách thiết lập Trường tùy chỉnh của bạn:

Tạo nhóm trường

ACF tổ chức các bộ sưu tập Trường tùy chỉnh trong Nhóm trường. Đây là miền dành riêng cho ACF. Đó là tất cả những gì bạn thực sự cần biết về Nhóm trường lúc này.

1.Đi đến Trường tùy chỉnh> Nhóm trường

  1. Nhấp vào “Thêm mới”
  2. Đối với tiêu đề Nhóm trường, hãy nhập “Dữ liệu phim”
  3. Cuộn xuống cho đến khi bạn thấy metabox Vị trí. Đặt Nhóm trường này chỉ hiển thị nếu Loại bài đăng bằng Phim:

Cài đặt hiển thị ACF cho Nhóm trường

Sau đó, bạn có thể cuộn xuống metabox Cài đặt. Bạn có thể để tất cả các tùy chọn này được đặt thành mặc định, nhưng bạn vẫn có thể đặt lại một lần so với ảnh chụp màn hình này:

Cài đặt nhóm trường ACF Phim

Sau đó, nhấp vào Cập nhật để lưu cài đặt Nhóm trường của bạn.

Tạo các trường tùy chỉnh

Trước tiên, hãy tạo trường Năm phát hành:

Field Label: Release Year
Field Name: release_year
Field Type: Number
Required? No

Tiếp theo là trường Xếp hạng:

Field Label: Rating
Field Name: rating
Field Type: Number
Required? No

Và cuối cùng, trường Mô tả:

Field Label: Description
Field Name: description
Field Type: Text Area
Required? No

Đừng quên nhấp vào Cập nhật để lưu các Trường tùy chỉnh mới của bạn.

Bây giờ, nếu bạn vào Phim> Thêm mới, rồi cuộn xuống một chút, bạn sẽ thấy một siêu hộp có tên Dữ liệu phim (tên nhóm trường của bạn) cùng với từng Trường tùy chỉnh bạn đã tạo bên trong:

Nhóm trường Phim hiện xuất hiện nếu trên trang Phim mới

ACF sang API REST

Bây giờ chúng ta đã có Trường tùy chỉnh, chúng ta cần hiển thị chúng với WP-API. ACF hiện không có hỗ trợ WP-API, nhưng có một giải pháp plugin tuyệt vời từ cộng đồng được gọi là ACF to REST API. Tất cả những gì bạn phải làm là cài đặt (bạn có thể tìm thấy nó bằng cách tìm kiếm nó tại Plugins> Add New) và kích hoạt nó, và nó sẽ ngay lập tức hiển thị các trường tùy chỉnh ACF của bạn cho API.

Nếu chúng tôi đã tạo Trường tùy chỉnh của mình trực tiếp thông qua PHP (không sử dụng plugin), thì cũng có một vài hàm tiện lợi để hiển thị trường với API. Thêm về điều đó ở đây .

Bước 5: Đăng nhập dữ liệu

Đây là bước cuối cùng để cài đặt WordPress của chúng tôi sẵn sàng phục vụ dữ liệu Chiến tranh giữa các vì sao của chúng tôi.

Đầu tiên, chúng ta cần nhập tất cả các Phim. Thật may mắn cho bạn, tôi đã làm tất cả các công việc thủ công và tất cả những gì bạn phải làm là nhập một tệp tiện lợi. 🙂

Đi tới Công cụ> Nhập. Ở cuối trang, bạn sẽ thấy tùy chọn để nhập từ WordPress với liên kết Cài đặt ngay bên dưới:

Ảnh chụp màn hình Nhập WordPress

Sau khi cài đặt WordPress Import, bạn sẽ thấy một liên kết để chạy trình nhập. Nhấp vào đó và nhập tệp này ở màn hình tiếp theo .

Màn hình tiếp theo sẽ yêu cầu bạn gán các bài viết đã nhập cho một tác giả. Bạn có thể chỉ định chúng cho tài khoản quản trị mặc định của mình và nhấp vào Gửi:

Màn hình hậu nhập để chỉ định tác giả mới

Cuối cùng, đi tới Phim> Tất cả phim. Bạn sẽ thấy danh sách các phim Chiến tranh giữa các vì sao (Tập 1–7). Bởi vì tôi đã phát triển trong môi trường cục bộ của mình, tệp nhập không thể nhập các hình ảnh nổi bật cho Phim (không thể tìm nạp chúng từ máy chủ gốc), vì vậy bạn sẽ phải thêm các hình ảnh đó theo cách thủ công (chỉ mất khoảng 30 giây ).

Cách ưa thích của tôi (và cách nhanh nhất) là di chuột qua từng bài đăng trên trang Tất cả phim và giữ Command (Control trên Windows) và nhấp vào Chỉnh sửa cho từng bài đăng. Thao tác này sẽ mở một tab cho mỗi Phim.

Trên mỗi trang chỉnh sửa, trong thanh bên phải, tìm metabox Hình ảnh Nổi bật và nhấp vào Đặt Hình ảnh Nổi bật. Đây là một tệp ZIP với mỗi hình ảnh bạn sẽ cần . Hoặc bạn có thể sử dụng bất kỳ hình ảnh nào khác mà bạn muốn.

Đối với cách đầu tiên, dễ nhất là tải tất cả hình ảnh lên chế độ Hình ảnh mà bạn thấy khi nhấp vào Đặt Hình ảnh Nổi bật và sau đó chỉ chọn hình ảnh bạn cần cho Phim đầu tiên đó (điều này sẽ giúp bạn tiết kiệm thời gian tải lên từng hình ảnh riêng lẻ trên tất cả Phim của bạn):

Nếu điều đó có vẻ không rõ ràng, đây là một GIF hy vọng sẽ có ý nghĩa hơn nỗ lực giải thích kém cỏi của tôi.

Đối với mỗi Phim, hãy nhớ nhấp vào Cập nhật sau khi chọn hình ảnh nổi bật.

Bây giờ bạn tốt để đi! Bây giờ, hãy để máy chủ WordPress của bạn đang chạy và hãy tiếp tục.

Bước 6: Cài đặt Tạo ứng dụng ReactÂ

Giả sử bạn đã cài đặt Node và npm trên máy tính của mình, chỉ cần chạy lệnh sau:

npm install -g create-react-app

Đó là nó! Bạn đã sẵn sàng sử dụng Tạo ứng dụng React.

Bước 7: Tạo ứng dụng

cdvào thư mục bạn muốn tạo giao diện người dùng (điều này không nhất thiết phải (và không nên) cùng thư mục với cài đặt WordPress của bạn). Sau đó chạy:

create-react-app headless-wp

Quá trình này sẽ mất một vài phút, nhưng sau khi hoàn tất, bạn sẽ có thể cd vào thư mục mới được tạo headless-wp. Từ đó, chạy:

npm start

Lệnh này kích hoạt một số thứ, nhưng tất cả những gì bạn cần biết vào lúc này là nó sẽ khởi động một máy chủ nhà phát triển Webpack. Trình duyệt của bạn sẽ tự động mở đến http://localhost:3000:

Trang mặc định khi bạn khởi động ứng dụng React mới lần đầu tiên.

You can leave the server running in your shell. Hot reloading will automatically refresh your webpage every time you save a file.

Step Eight: Create Your Component

Since this demo app is very simple, we’ll only be using one component. We could easily create another component (it’s as easy as creating another ComponentName.js file and importing it into its parent component), but we’re instead going to edit our App.js component.

Open up App.js. You can go ahead and delete all the existing code from this file except for the first and last lines.

At this point, App.js should look like this:

import React, { Component } from 'react';
export default App;

Next, create the render() function for this component. This function gets called every time the state changes. If you aren’t sure what this means, have some patience. It’ll make sense soon.

App.jsbây giờ sẽ trông như thế này:

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div>
        <h2>Star Wars Movies</h2>
      </div>
    )
  }
}
export default App;

Bất render()kỳ lợi nhuận nào cũng là thứ được vẽ trên DOM. Nếu bạn lưu tệp này và quay lại trình duyệt của mình, tệp sẽ tự động tải lại và bạn sẽ thấy tệp này do h2chúng tôi tạo:

Một h2 mới sáng bóng!

Điều này thật tuyệt và tất cả, nhưng tất cả những dữ liệu tuyệt vời mà chúng tôi đã lưu trữ trong WordPress về phim Chiến tranh giữa các vì sao thì sao? Đã đến lúc lấy dữ liệu đó!

Cập nhật App.jsnhư vậy:

import React, { Component } from 'react';
class App extends Component {
  constructor() {
    super();
    this.state = {
      movies: []
    }
  }
componentDidMount() {
    let dataURL = "http://headless-wp.dev/wp-json/wp/v2/movies?_embed";
    fetch(dataURL)
      .then(res => res.json())
      .then(res => {
        this.setState({
          movies: res
        })
      })
  }
render() {
return (
      <div>
        <h2>Star Wars Movies</h2>
      </div>
    )
  }
}
export default App;

Chúng tôi vừa thêm hai chức năng mới vào chức render()năng của mình: constructor()và componentDidMount().

Hàm constructor()là nơi chúng ta khởi tạo trạng thái. Vì chúng tôi chỉ giải quyết một số JSON về phim của chúng tôi, trạng thái của chúng tôi sẽ khá đơn giản. Trạng thái ban đầu của chúng tôi sẽ chỉ là một moviesmảng trống vì chúng tôi đang mong đợi lấy lại JSON đó.

The componentDidMount() function fires after the component mounts. This is the best place to make external API calls, so this is where we’ve added our code to use the fetch API to grab all the movies from our WordPress API (be sure to update the URL to reflect your own URL!). Then, we’re taking the response, parsing it as JSON, and then pushing it into our state object.

Once the response gets pushed into our state, the component will re-render by firing the render() function because the state has changed. But this doesn’t really matter right now, because currently our render() function is still only returning a div with a h2 inside.

Let’s fix that.

We’re now going to add a bit of extra code to our render() function that will take the JSON in the our state (currently stored in this.state.movies) and map each movie and its data into a div.

App.js should now look like this:

import React, { Component } from 'react';
class App extends Component {
  constructor() {
    super();
    this.state = {
      movies: []
    }
  }
componentDidMount() {
    let dataURL = "http://headless-wp.dev/wp-json/wp/v2/movies?_embed";
    fetch(dataURL)
      .then(res => res.json())
      .then(res => {
        this.setState({
          movies: res
        })
      })
  }
render() {
    let movies = this.state.movies.map((movie, index) => {
      return <div key={index}>
      <img src={movie._embedded['wp:featuredmedia'][0].media_details.sizes.large.source_url} />
      <p><strong>Title:</strong> {movie.title.rendered}</p>
      <p><strong>Release Year:</strong> {movie.acf.release_year}</p>
      <p><strong>Rating:</strong> {movie.acf.rating}</p>
      <div><strong>Description:</strong><div dangerouslySetInnerHTML={ {__html: movie.acf.description} } /></div>
      </div>
    });
return (
      <div>
        <h2>Star Wars Movies</h2>
      </div>
    )
  }
}
export default App;

If you save your file, the page will reload, but you still won’t see the Star Wars movie data load on the page. That’s because there’s one last thing to add. We’re mapping each of our movies to their own respective divs, and then storing all those movies inside the movies variable in our render() function. Now we just need to tell our render() function to return our movies variable by adding {movies} underneath our h2.

Finished App.js:

import React, { Component } from 'react';
class App extends Component {
  constructor() {
    super();
    this.state = {
      movies: []
    }
  }
componentDidMount() {
    let dataURL = "http://headless-wp.dev/wp-json/wp/v2/movies?_embed";
    fetch(dataURL)
      .then(res => res.json())
      .then(res => {
        this.setState({
          movies: res
        })
      })
  }
render() {
    let movies = this.state.movies.map((movie, index) => {
      return <div key={index}>
      <img src={movie._embedded['wp:featuredmedia'][0].media_details.sizes.large.source_url} />
      <p><strong>Title:</strong> {movie.title.rendered}</p>
      <p><strong>Release Year:</strong> {movie.acf.release_year}</p>
      <p><strong>Rating:</strong> {movie.acf.rating}</p>
      <div><strong>Description:</strong><div dangerouslySetInnerHTML={ {__html: movie.acf.description} } /></div>
      </div>
    });
return (
      <div>
        <h2>Star Wars Movies</h2>
        {movies}
      </div>
    )
  }
}
export default App;

Switch back over to your browser window and you should see the Star Wars data after the page reloads:

Cầu mong Thần lực ở bên bạn.

Đi xa hơn

Đây chỉ là bước khởi đầu của những gì bạn có thể làm với WP-API và React. Cả hai đều có nhiều tính năng khác và cả hai đều có cộng đồng khổng lồ .

Bạn có thể nâng cao WP-API bằng cách tìm hiểu về xác thực và yêu cầu ĐĂNG, điểm cuối tùy chỉnh và các truy vấn phức tạp hơn.

Và như tôi đã nói trước đó, Create React App được tạo ra để bạn chỉ cần chân ướt chân ráo. Khi bạn đã sẵn sàng tìm hiểu thêm, bạn có thể tìm hiểu thêm về những thứ như Redux, ES6, Webpack, React Native, v.v.

Tôi sẽ đề cập đến nhiều chủ đề này và nhiều chủ đề khác trong các bài đăng trong tương lai, vì vậy hãy nhớ kiểm tra lại. Hoặc nếu bạn muốn gửi những bài đăng này trực tiếp đến hộp thư đến của mình, hãy gửi cho tôi một email và tôi sẽ thêm bạn vào danh sách gửi thư của mình.

Câu hỏi?

Tôi rất vui được giúp đỡ! Để lại nhận xét bên dưới là cách nhanh nhất để nhận được phản hồi (ngoài ra, nó còn giúp những người khác gặp vấn đề tương tự!). Nếu không, hãy gửi cho tôi một dòng trên Twitter hoặc gửi cho tôi một email và tôi sẽ làm những gì có thể để giúp đỡ!

Related Articles

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Back to top button