React JS สำหรับผู้ใช้ WordPress: บทนำเบื้องต้น

เป็นเวลากว่า 15 ปีแล้วที่ WordPress เป็นโซลูชัน CMS ที่ได้รับความนิยมและสมบูรณ์แบบที่สุด ที่ให้คุณสร้างอะไรก็ได้ตั้งแต่พอร์ตโฟลิโอหน้าเดียวไปจนถึงแพลตฟอร์มอีคอมเมิร์ซที่เต็มเปี่ยม WordPress ใช้ PHP สำหรับโครงสร้างพื้นฐานแบ็กเอนด์ทั้งหมด เช่น การอัปเดต, API, auth, DB layer และส่วนหน้าส่วนใหญ่ อย่างไรก็ตาม เช่นเดียวกับเฟรมเวิร์กยอดนิยมอื่นๆ WordPress ก็ถูกบังคับให้ต้องพัฒนาในช่วงไม่กี่ครั้งที่ผ่านมา

ด้วยศักยภาพและศักยภาพที่เพิ่มขึ้นของแอปพลิเคชัน JavaScript สำหรับเว็บ เช่นเดียวกับเดสก์ท็อปและแอปพลิเคชันมือถือแบบเนทีฟ WP REST API พยายามเชื่อมช่องว่างระหว่างแกน PHP ดั้งเดิมของ WordPress และการเพิ่มขึ้นของ JavaScript ฉันเชื่อว่านี่เป็นก้าวย่างที่ยิ่งใหญ่สำหรับ WordPress ด้วยเหตุผลสองประการ:

1. เว็บไซต์ WP ที่มีอยู่สามารถใช้ React/Vue หรือไลบรารีส่วนหน้าอื่นเพื่อสร้างประสบการณ์ UI ที่ดีขึ้น
2. ในทางกลับกัน นักพัฒนาเว็บจะได้รับ CMS ที่ไม่มีหัวตามมาตรฐานอุตสาหกรรม ซึ่งสามารถรวมเข้ากับสแต็กที่เลือกได้อย่างง่ายดาย

นั่นเป็นสถานการณ์ที่วิน-วินสำหรับทุกคน ในบทความนี้ เราจะเน้นไปที่การสร้างส่วนหน้า React สำหรับแบ็กเอนด์ WordPress แต่ก่อนอื่น มาดูที่ WordPress REST API

พื้นฐาน WordPress REST API

การพัฒนา WP REST API เริ่มขึ้นเมื่อไม่กี่ปีที่ผ่านมาและได้รับการออกแบบให้เป็นปลั๊กอินคุณลักษณะแบบสแตนด์อโลนในขั้นต้น WordPress v4.4 ซึ่งมีชื่อรหัสว่า 'Clifford' ได้แนะนำโครงสร้างพื้นฐานที่แท้จริงของ REST API ลงในแกนหลักของ WordPress จุดสิ้นสุดที่เกิดขึ้นจริงได้ปรากฏใน WordPress v4.7 ซึ่งมีชื่อรหัสว่า 'Vaughan' WP API ให้คุณใช้ WordPress เป็น CMS ที่ไม่มีส่วนหัว ใช้งานง่าย เสถียร และเป็นมิตรกับ JSON

JSON

JSON เป็นรูปแบบที่ต้องการหากคุณจะรวม WordPress กับ JavaScript stack JSON นั้นคล้ายกับ XML ซึ่งทำให้เราสามารถถ่ายโอนข้อมูลได้อย่างมีประสิทธิภาพโดยใช้รูปแบบที่อ่านง่าย

JSON เป็นสตริงที่ประกอบด้วยการแสดงข้อความของวัตถุ JavaScript โดยจะเก็บข้อมูลไว้ในชุดของคู่คีย์-ค่า ตัวอย่าง JSON อย่างง่ายของโพสต์ WP สามารถมีลักษณะดังนี้ -

{
id: 1,
"title": {
"rendered": "Hello World"
  },
  "content": {
"rendered": "Welcome to WordPress. This is your first
post. Edit or delete it, then start blogging!"
  }
}

การตอบสนอง JSON ที่สมบูรณ์โดยใช้ WP REST API มักจะมีข้อมูลเพิ่มเติมเกี่ยวกับโพสต์ เช่น ข้อมูลเมตา คุณมีทุกสิ่งที่จำเป็นในการสร้างธีมส่วนหน้าหรือปลั๊กอินสำหรับแอปพลิเคชันของคุณ

จุดจบ

ปลายทาง WordPress สามารถเข้าถึงได้โดยสาธารณะ หากคุณกำลังใช้งาน WordPress เวอร์ชันล่าสุด คุณต้องเพิ่ม /wp-json/wp/v2 ต่อท้าย URL ตัวอย่างเช่น คุณสามารถเข้าถึงปลายทางพื้นฐานได้ที่ 127.0.0.1/wp-json/wp/v2 หากคุณได้ตั้งค่าอินสแตนซ์ WordPress ในโฮสต์ท้องถิ่นของคุณ หากคุณต้องการปรับแต่งผลลัพธ์ คุณสามารถใช้ส่วนขยายตัวแสดง JSON ที่ทำให้ JSON ดูสวยงามบนเบราว์เซอร์ของคุณ

ข้อมูลที่แสดงบนหน้าจอของคุณคือเนื้อหาและข้อมูลเมตาในรูปแบบ JSON สิ่งที่คุณทำที่นี่คือการกำหนดเส้นทางและขอให้เบราว์เซอร์ดึงข้อมูลให้คุณ

เราหมายถึงอะไรโดยเส้นทาง? เส้นทางคือ URL ที่แมปกับวิธีการเฉพาะ แกนหลักของ WordPress อ่านเส้นทางและเข้าใจว่าทุก '/' หมายถึงเส้นทางหรือพารามิเตอร์เฉพาะที่ต้องปฏิบัติตาม

ตัวอย่างเช่น จุดปลายอาจเป็น '/wp-json/wp/v2/posts/1' ซึ่งคุณขอโพสต์ที่มี id เทียบเท่า 1 WordPress APIs มีประโยชน์เนื่องจากค่อนข้างกว้างขวาง นี่แปลเป็นความสามารถในการนำข้อมูลใด ๆ จากเว็บไซต์ของคุณและเปลี่ยนเป็นปลายทาง รองรับฟังก์ชันการทำงานหลักเกือบทั้งหมดใน WordPress และคุณสมบัติที่จะเกิดขึ้นทั้งหมดจะได้รับการสนับสนุนด้วย นี่คือรายการของ WordPress APIs ที่ได้รับการสนับสนุนในขณะที่เขียนบทช่วยสอนนี้:

นักพัฒนาธีม ตลอดจนนักพัฒนาปลั๊กอิน สามารถสร้างปลายทางที่กำหนดเองสำหรับแอปพลิเคชันของตนได้ หากคุณต้องการตรวจสอบปลายทางต่างๆ ทั้งหมดที่มี คุณสามารถดาวน์โหลดแอปพลิเคชัน เช่น บุรุษไปรษณีย์ ซึ่งจะให้ GUI ที่สร้างขึ้นเป็นพิเศษสำหรับการสำรวจ API ยิ่งไปกว่านั้น คุณสามารถเรียก API ไปยังแอพของบุคคลที่สามได้โดยตรงโดยไม่ต้องพึ่งปลั๊กอิน

ลองมาดูตัวอย่างกัน การอัปโหลดไฟล์และการดูแลรักษาหลายเวอร์ชันเป็นข้อกำหนดที่สำคัญสำหรับเว็บแอปพลิเคชันสมัยใหม่ โดยเฉพาะอย่างยิ่งในกรณีของไฟล์มีเดีย ใน WordPress มีปลั๊กอินมากมายที่สามารถทำสิ่งนี้ให้คุณได้ อย่างไรก็ตาม คุณอาจต้องโทรไปยังเซิร์ฟเวอร์ WordPress เพื่อใช้งาน

ด้วย WP API ตรรกะการจัดการสื่อสามารถแยกออกจาก WordPress ได้ คุณสามารถทำการเรียก API บุคคลที่สามทั้งหมดได้โดยตรงจากส่วนหน้า ซึ่งดีมากในแง่ของการแยกข้อกังวล คุณสามารถใช้ไลบรารีเช่น Cloudinary เพื่อจัดการรูปภาพและไฟล์สื่ออื่น ๆ ได้ทันที แล้วอัปโหลดไปยังคลาวด์ เมื่ออัปโหลดแล้ว URL ของรูปภาพสามารถเก็บไว้ในแบ็กเอนด์ WP ได้ ตัวเลือกไม่มีที่สิ้นสุดและคุณสามารถรวมชิ้นส่วนต่างๆ เข้าด้วยกันตามที่เห็นสมควร

ตอนนี้เรามาดูวิธีเชื่อมต่อแบ็กเอนด์ WordPress กับ React กัน

เริ่มต้นใช้งาน React

React เป็นไลบรารีส่วนหน้าสำหรับการสร้างส่วนต่อประสานผู้ใช้และแอปพลิเคชันแบบโต้ตอบบนเว็บ ด้วย React คุณสามารถเขียนโค้ดที่นำกลับมาใช้ใหม่ได้อิสระซึ่งเรียกว่าส่วนประกอบ มาสร้างองค์ประกอบแรกของเราด้วยการสร้างโครงการ React

วิธีที่นิยมมากที่สุดในการสร้างโครงการ React คือการเรียกใช้ create-react-app CRA นำเสนอสภาพแวดล้อมที่สะดวกสบายสำหรับการเรียนรู้ React และเป็นวิธีที่ดีที่สุดในการเริ่มสร้างแอปพลิเคชันหน้าเดียวใหม่หากคุณเป็นมือใหม่ มันตั้งค่าสภาพแวดล้อมการพัฒนาของคุณเพื่อให้คุณสามารถใช้คุณสมบัติ JavaScript ล่าสุด เช่น ES6 และ webpack นอกจากนี้ create-react-app ยังมอบประสบการณ์ที่ดีสำหรับนักพัฒนาและเพิ่มประสิทธิภาพแอปของคุณสำหรับการผลิต

คุณจะต้องมี Node >= 8.x และ npm >= 5.2 บนเครื่องของคุณ ในการสร้างโปรเจ็กต์ ให้รันคำสั่งต่อไปนี้:


npx create-react-app wp-react-demo


คำสั่งด้านบนสร้างเทมเพลตสำเร็จรูปสำหรับแอปพลิเคชัน react ซึ่งเราตั้งชื่อว่า wp-react-demo


cd wp-react-demo
npm start


หากทุกอย่างเป็นไปด้วยดี ก็ควรจะสามารถให้บริการแอปพลิเคชันที่สร้างขึ้นใหม่บนเซิร์ฟเวอร์การพัฒนาที่ http://localhost:3000/

หากคุณอยากรู้ว่าโครงสร้างไดเร็กทอรีที่สร้างโดย create-react-app จะมีลักษณะดังนี้:

.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lock


ไดเร็กทอรีสาธารณะมีเนื้อหาทั้งหมดที่จำเป็นสำหรับการเริ่มต้นแอปพลิเคชัน ไดเร็กทอรี src ประกอบด้วยไฟล์ JavaScript ทั้งหมดที่เราจะดำเนินการและคุณจะใช้เวลาส่วนใหญ่ที่นั่น

เมื่อคุณไปที่ localhost:3000 ไฟล์ index.html จะถูกโหลด หากคุณเปิดไฟล์ public/index.html ก็ไม่มีอะไรมาก แต่คุณจะพบบรรทัดนี้อยู่ตรงกลาง:

<div id="root"></div>

นั่นคือจุดเริ่มต้นที่ React แสดงโครงสร้างส่วนประกอบในรูทของแอปพลิเคชัน

นั่นหมายความว่าอย่างไร? ตรงไปที่ไดเร็กทอรี src และเปิดขึ้น index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

React พยายามค้นหาองค์ประกอบที่มี id “root” ในเอกสารแล้วฉีด ส่วนประกอบในรูท ในความเป็นจริง องค์ประกอบของแอพได้รับการเรนเดอร์ และนั่นคือที่มาของโลโก้ React ที่หมุนได้ คุณสามารถตรวจสอบได้โดยเปิดไฟล์ src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
 render() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
       </header>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}

export default App;

นี่คือสิ่งที่ส่วนประกอบดูเหมือน แต่ละองค์ประกอบแสดงผลเป็นส่วนหนึ่งของ UI ของคุณ คุณสามารถเขียนองค์ประกอบหนึ่งภายในองค์ประกอบอื่นได้ และนั่นคือวิธีที่คุณจะได้โครงสร้างแผนผังองค์ประกอบเช่นนี้:

หากคุณสงสัยว่าเหตุใดเราจึงสามารถใช้ HTML ในการแสดงผล () ได้ นั่นคือความมหัศจรรย์ของ JSX JSX เป็นส่วนขยายไวยากรณ์ของ JavaScript และให้คุณใช้ HTML ธรรมดาในไฟล์ JavaScript คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในเอกสารอย่างเป็นทางการ

ฉันจะลบเนื้อหา HTML ทั้งหมดแล้วแทนที่ด้วย a

<div>
<h2> WordPress Blog </h2>
</div>

constructor (props){
   super(props);

   this.state = {
     title: {},
     date: "",
     content: {}
   };
 }

componentDidMount() {
       return fetch(`http://wordpress.com/wp-json/wp/v2/posts/`)
       .then((response) => response.json())
       .then((responseJson) => {
        // Update state here         
       })
       .catch((error) => {
         console.error(error);
       });         
 }

const { title, date, content } =  responseJson;

        this.setState({ title, date, content });

render() {
   return (
     <div>
     {this.state.title.rendered}
     </div>
   );
 }
}

<div
    className= "content"
    dangerouslySetInnerHTML={{ __html: this.state.content.rendered }}>
</div>

render() {
   return (
     <div>
       <div>
             <div className="row">
               <div className="leftcolumn">
                 <div className="card">
                   <div className= "title">
                     <h1>{this.state.title.rendered}</h1>
                     <p> {this.state.date} </p>
                   </div>
                
                   <div
                     className= "content"
                     dangerouslySetInnerHTML={{ __html: this.state.content.rendered }} />
                 </div>
               </div>
             </div>
           </div>
     </div>
   );
 }
}

import './App.css';