WordPress هو نظام قوي لإدارة المحتوى (CMS) يتيح لك إنشاء كل شيء من المواقع البسيطة إلى متاجر التجارة الإلكترونية المعقدة. لدمج كود PHP للنظام الأساسي مع JavaScript يمكنك الاستفادة من WP REST API و WordPress React.

تم تطوير React بواسطة Facebook وهي مكتبة واجهة مستخدم (UI) تستخدم نهجًا بسيطًا يعتمد على المكونات لبناء تطبيقات قابلة للتطوير عبر الأنظمة الأساسية يسهل فهمها. ومع ذلك من المهم معرفة كيفية استخدامه بشكل صحيح لتحقيق أقصى استفادة من ميزاته ووظائفه.

في هذا الدليل سنشرح كيفية استخدام React مع WordPress. سنناقش ماهية إطار العمل ونلخص فوائده ونوضح لك كيفية استخدامه.

مقدمة إلى React

قبل أن نبدأ نريد أولاً طرح السؤال “ما هي React؟”. تُعرف أيضًا باسم ReactJS وهي إحدى مكتبات JavaScript الأكثر شيوعًا التي يمكنك استخدامها لتطوير الويب.

تم إنشاؤه وصيانته بواسطة Facebook وهو يتضمن مجموعة واسعة من مقتطفات تعليمات JavaScript البرمجية التي يمكن استخدامها لبناء مكونات واجهة المستخدم.

خلافًا للاعتقاد الشائع فإن ReactJS ليس إطار عمل JavaScript لأنه يعرض فقط مكونات طبقة عرض التطبيق. لذلك يمكنك إقرانه بإطار عمل فعلي مثل Vue.js إذا كنت تبحث عن وظائف أكثر تعقيدًا.

من المهم أيضًا ملاحظة أن هناك ReactJS و React Native. هذا الأخير عبارة عن إطار عمل JavaScript مفتوح المصدر مبني على مكتبة React. يمكنك استخدامه لإنشاء تطبيقات عبر الأنظمة الأساسية ومكونات خاصة بالنظام الأساسي لنظامي التشغيل iOS و Android.

ميزات ووظائف react

لفهم فوائد React من المفيد معرفة كيفية عملها. فيما يلي بعض أهم ميزاته ووظائفه:

JSX

الامتداد الأساسي لجافا سكريبت المستخدم في React هو JSX. يمكنك استخدامه لتضمين تعليمات HTML البرمجية في كائنات JavaScript وتبسيط هياكل التعليمات البرمجية المعقدة.

يساعد JSX أيضًا في منع هجمات البرمجة النصية عبر المواقع  (XSS) من خلال جعل من الصعب على الأطراف الثالثة إدخال تعليمات برمجية إضافية من خلال إدخال المستخدم غير المكتوب صراحةً في التطبيق.

تتضمن علامات JSX اسمًا وأبناء وسمات. قد تبدو علامة صورة HTML النموذجية على النحو التالي:

<img class="" src="" alt="" >

ومع ذلك قد تبدو علامة JSX كما يلي:

<img className="" src="" alt="" />

أيضًا يتم كتابة القيم الرقمية داخل أقواس متعرجة. على غرار JavaScript تمثل علامات الاقتباس سلاسل:

const name = 'John Doe’;
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Virtual DOM

يقدم نموذج كائن المستند  (DOM) صفحة ويب في بنية شجرة البيانات والتي تخزنها React في ذاكرتها. يمكن لـ React تنفيذ تحديثات لأجزاء معينة من الشجرة بدلاً من إعادة تصييرها بالكامل.

يوفر DOM الظاهري ربط البيانات في اتجاه واحد. هذا يجعل معالجته وتحديثه أسرع من DOM الأصلي.

يستخدم عملية تعرف باسم فرق. يحدث هذا عندما تنشئ React شجرة DOM افتراضية جديدة وتقارنها بالشجرة القديمة ثم تجد الطريقة الأكثر فاعلية لتطبيق التغييرات على DOM الحقيقي. يستغرق هذا وقتًا أقل ويتطلب موارد أقل وهو أمر مفيد للمشاريع الكبيرة التي تنطوي على الكثير من تفاعل المستخدم.

يدعم DOM أيضًا API التعريفي. هذا يعني أنه يمكنك إخبار React بالحالة التي تريد أن تكون فيها واجهة المستخدم للتأكد من أن DOM سيتطابق مع هذه الحالة.

Components

كما ذكرنا مكونات React عبارة عن أجزاء من التعليمات البرمجية قائمة بذاتها وقابلة لإعادة الاستخدام تشكل واجهة المستخدم. تعمل هذه المكونات بشكل مشابه لوظائف JavaScript. يقبلون الدعائم وهي مدخلات عشوائية. عندما يقوم مكون دالة بإرجاع عنصر فإنه يؤثر على شكل واجهة المستخدم.

الدعائم للقراءة فقط. هذا مثال:

import React, { useState } from 'react' 
import ReactDOM from 'react-dom' 
 
const ParentComponent = () => { 
    const [stateVariable, setStateVariable] = useState('this is the starting value for the variable'); 
 
    return ( 
        <div> 
            <h1>This is a function component view</h1>
            <ChildComponent exampleProp={stateVariable} />
        </div> 
    ) 
} 
 
const ChildComponent = (props) => {
    return (
        <div>
            <h2>{props.exampleProp}</h2>
        </div>
    )
}
 
 
ReactDOM.render( <ParentComponent />, document.getElementById('app') );

هناك نوعان رئيسيان – مكونات الطبقة والمكونات الدالیة. تستخدم مكونات الفئة خطافات دورة حياة WordPress واستدعاءات API:

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { };
  }
  render() {
    return (
      <div>
        <h1>This is a view created by a class component</h1>
      </div>
    );
  }
}

وفي الوقت نفسه يبدو المكون الوظيفي شيئًا مثل المثال أدناه:

const ExampleComponent = (props) => {
    const [stateVariable, setStateVariable] = useState('');
    return (
        <div>
            <h1>This is a function component view</h1>
        </div>
    )
}

State

تشير الحالة إلى الكائن المدمج في مكونات React. هذا هو المكان الذي تخزن فيه قيم خصائص العناصر. إذا تغيرت الحالة فإن المكون يعيد تصيير.

إدارة الحالة هي عملية إدارة حالات التطبيق هذه وتخزين البيانات في مكتبات إدارة الدولة. يمكنك استخدام عدد قليل من مكتبات إدارة الدولة بما في ذلك Redux و Recoil حيث تكون الأخيرة أكثر ملاءمة للمبتدئين.

لماذا نستخدم React؟

هناك العديد من الفوائد لاستخدام React لتطوير WordPress. بالنسبة للمبتدئين فهي صديقة للمبتدئين ويدعم الكثير من مزودي خدمات استضافة الويب استخدامها.

نظرًا لأنه يعتمد على مكونات ومكونات JavaScript عادية يمكنك استخدامه لإنشاء تطبيقات قائمة على الويب بعد أيام قليلة من تعلمها. هناك أيضًا الكثير من مواقع الويب لتعلم كيفية البرمجة مجانًا عبر الإنترنت. يمكن أن يؤدي الفهم القوي لأساسيات JavaScript إلى تبسيط العملية.

فائدة أخرى لـ React هي أنها تتيح لك إعادة استخدام المكونات في تطبيقات أخرى. إنه مفتوح المصدر لذا يمكنك إنشاء مكوناتك مسبقًا وإدراجها بين الآخرين دون تضخيم شفرتك.

تعد مكونات React أيضًا سهلة الكتابة نسبيًا وذلك بفضل تكامل JSX والذي سنناقشه بعد قليل. يمكنك دمج طباعة HTML والعلامات والاستفادة من عرض وظائف متعددة لتطوير التطبيق الديناميكي.

باستخدام React يمكنك أيضًا استخدام واجهة سطر الأوامر الرسمية (CLI)  – إنشاء تطبيق React  – لتسريع تطوير التطبيق أحادي الصفحة. يأتي مزودًا بأدوات معدة مسبقًا يمكنها مساعدتك في تبسيط عملية الإعداد والتعلم.

أخيرًا يعد React أيضًا صديقًا لتحسين محركات البحث. يساعد تطبيق Virtual DOM على زيادة سرعة الصفحة وتعزيز الأداء والعرض من جانب الخادم مما يسهل على الروبوتات الزحف إلى موقعك.

نظرة عامة على WP REST API

تتيح واجهة برنامج تطبيق WordPress REST (API) للمطورين دمج أطر عمل JavaScript مثل React مع WordPress. يمكنك الوصول إلى WP REST API من الواجهة الأمامية لموقعك وإضافة أنواع منشورات مخصصة وإنشاء تطبيق React مدعومًا بواجهة برمجة التطبيقات هذه.

WP REST API عبارة عن مجموعة من البروتوكولات المستخدمة لبناء تطبيقات البرامج. وهي تحدد كيفية مشاركة المعلومات والبيانات بين البرامج وكيفية تفاعل مكوناتها. يشير REST وهو اختصار لـ “نقل الحالة التمثيلية”  (Representational State Transfer) إلى القيود المعمارية التي تحدد النمط للبرامج.

يُطلق على التنسيق الخاص بهيكلة البيانات المراد قراءتها بواسطة التطبيقات اسم JavaScript Object Notation (JSON). يساعد في تبسيط الاتصال بين WordPress والتطبيقات والبرامج الأخرى.

ينتج عن WP REST API بيئة فصل تتيح للمستخدمين التعامل مع WordPress على أنه نظام إدارة محتوى بدون رأس. هذا يعني أنه يمكن استخدام مجموعة متنوعة من إطارات العمل الأمامية لربط النهاية الخلفية لـ WordPress. هذا مفيد للمطورين الذين ليسوا متحمسين بشكل مفرط لـ PHP.

React – قبل البدء

من شأن المعرفة الأساسية بلغة JavaScript و CSS و HTML أن تساعد في تعلم React. بالإضافة إلى ذلك يمكن أن تكون عملية التعلم أكثر كفاءة إذا كنت معتادًا على ECMAScript 6  (المعروف أيضًا باسم ES6) والبرمجة الوظيفية والبرمجة الموجهة للكائنات.

من ناحية البرنامج ستحتاج أيضًا إلى بعض التبعيات المثبتة على جهاز الكمبيوتر الخاص بك. يتضمن ذلك NodeJS و npm ومحرر نصوص. اختياريًا قد ترغب أيضًا في استخدام Git للتحكم في الإصدار.

الطريقة الأكثر شيوعًا لتطوير مشاريع React لـ WordPress هي استخدام تطبيق Create React:

WordPress React

توفر CRA بيئة بسيطة لتعلم React واستخدامها لبناء تطبيقات من صفحة واحدة. لاحظ أنه من أجل استخدامه ستحتاج أولاً إلى Node و npm على جهازك.

لإنشاء مشروع جديد يمكنك تشغيل الأمر التالي في جهازك الطرفي:

npx create-react-app wp-react-demo

بعد ذلك قم بتشغيل ما يلي:

cd wp-react-demo
npm start

ستبدو بنية الدليل كما يلي:

├── 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

في دليل src ستجد جميع ملفات JavaScript التي ستعمل عليها. الآن يمكنك زيارة localhost: 3000 لتحميل ملف index.html.

لا يحتوي الملف public / index.html على الكثير. ومع ذلك يمكنك العثور على السطر التالي والذي سيكون نقطة البداية لمشروعك:

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

ستجد ما يلي ضمن ملف index.js الخاص بدليل src:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
 
ReactDOM.render(<App />, document.getElementById('root'));

هذا يعني أنه يعرض مكون التطبيق والذي يمكنك العثور عليه ضمن src./App.js. يمكنك استبدال هذا بمحتوى HTML الخاص بك. يمكننا استخدام عرض ()HTML insider بفضل امتداد بناء جملة JSX.

كيفية عمل نسخة WordPress الاحتياطية (WordPress Backup)

كيفية الاستعلام عن WP REST API من React

بشكل افتراضي يمكنك تقديم طلب GET لاستخدام WP REST API في الواجهة الأمامية لموقعك. على سبيل المثال يمكنك استخدام / wp-json / wp / v2 / posts للحصول على جميع مشاركاتك. بالتمسك بالمثال السابق ستكون بيانات المنشور هذه موجودة في http: // localhost / wp-json / wp / v2 / posts.

لبدء استخدام React يمكنك تشغيل هذا الأمر في جهازك الطرفي:

npx create-react-app react-app

ثم قم بتشغيل ما يلي:

cd react-app 
npm install @material-ui/core

بعد ذلك يمكنك إدخال المثال أدناه:

import React, { useEffect, useState } from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
    
export default function Posts() {
    const [posts, setPosts] = useState([]);
    useEffect(() => {
        async function loadPosts() {
            const response = await fetch('/wp-json/wp/v2/posts');
            if(!response.ok) {
                // oups! something went wrong
                return;
            }
    
            const posts = await response.json();
            setPosts(posts);
        }
    
        loadPosts();
   }, [])
  return (
    <Grid container spacing={2}>
      {posts.map((post, index) => (
      <Grid item xs={4} key={index}>
        <Card>
           <CardContent>
                <Typography
                    color="textSecondary"
                    gutterBottom
                    dangerouslySetInnerHTML={{__html: post.title.rendered}} />
                <Typography
                    variant="body2"
                    component="p"
                    dangerouslySetInnerHTML={{__html: post.content.rendered}} />
            </CardContent>
        </Card>
      </Grid>
     ))}
    </Grid>
 );
}

يستخدم المثال أعلاه React Hooks useEffect و useState. الأول يعلن عن مصفوفة المنشورات ويدعو لتحديثها بينما الأخير يجلب الكود.

كيفية إنشاء نوع منشور مخصص باستخدام React

يمكنك أيضًا استخدام React لإنشاء نوع منشور مخصص على WordPress. ومع ذلك هناك بعض الأدوات التي ستحتاج إلى تثبيتها مسبقًا. سيساعد هذا في جعل العملية سلسة ومباشرة قدر الإمكان.

أولاً ستحتاج إلى إضافة المكون الإضافي Custom Post Type UI WordPress.

WordPress React

يبسط هذا المكون الإضافي عملية إنشاء أنواع منشورات مخصصة في WordPress.

نوصي أيضًا بتثبيت الحقول المخصصة المتقدمة (ACF).

WordPress React

هذه أيضًا أداة مجانية. يمكن استخدام المكون الإضافي لإنشاء وإضافة حقول مخصصة لأنواع منشوراتك المخصصة. نقترح أيضًا تثبيت ACF على REST API لإتاحة حقولك المخصصة لأنواع منشوراتك.

للبدء انتقل إلى CPT UI > إضافة / تحرير أنواع المنشورات من منطقة الإدارة الخاصة بك. في مثالنا سنستخدم اسم “الكتب”. سنحدد أيضًا خيار الملء التلقائي لبقية الحقول.

ضمن قسم Show in REST API اضبطه على True وأدخل “Books” باعتباره الرابط الأساسي لـ REST API. ضمن الدعم حدد خانتي الاختيار المؤلف والحقول المخصصة. انقر فوق حفظ نوع المنشور عند الانتهاء.

بعد ذلك يمكننا إنشاء حقول مخصصة لنوع المنشور المخصص. انتقل إلى الحقول المخصصة> إضافة جديد وأدخل العنوان المناسب مثل “معلومات الكتاب”. يمكنك النقر فوق إضافة حقل ثم إكمال تسمية الحقل واسمه ونوعه.

WordPress React

ضمن الموقع يمكنك تعيين نوع المنشور بحيث يتساوى مع نوع المنشور المخصص للكتاب. عند الانتهاء حدد “نشر” لتنشيط الحقل المخصص.

بعد ذلك انتقل إلى My Books> Add New وأدخل العنوان والملخص والصورة المميزة. يمكنك تكرار هذه العملية لإنشاء العدد الذي تريده.

الآن من الجهاز الطرفي أدخل الأمر التالي قم بتشغيل كل واحد قبل الانتقال إلى التالي:

npx create-react-app frontend
cd frontend
npm i axios
npm start

بعد ذلك داخل دليل src يمكنك إنشاء مجلد يسمى المكونات متبوعًا بملف يسمى books.js. عند الانتهاء أدخل ما يلي:

import React, { Component } from 'react';
import axios from 'axios';
export class Books extends Component {
   state = {
       books: [],
       isLoaded: false
   }
 componentDidMount () {
   axios.get('http://localhost:3000/wp-json/wp/v2/books')
       .then(res => this.setState({
           books: res.data,
           isLoaded: true
       }))
       .catch(err => console.log(err))
   }
   render() {
      console.log(this.state);
       return (
           <div>
             
           </div>
       )
   }
}
export default Books;

في ملف App.js أدخل ما يلي:

import React from 'react';
import './App.css';
import Books from './components/Books';
function App() {
 return (
   <div className="App">
    <Books>
   </div>
 );
}

لاحظ أنه يمكنك أيضًا فصل مجموعة الكتب في مكون كتاب واحد. يمكنك القيام بذلك عن طريق إنشاء ملف داخل src / المكونات. يمكنك أيضًا إضافة CSS مخصص لتصميم نوع المنشور المخصص (app.css).

كيفية إنشاء سمة WordPress React

ربما تتساءل عن كيفية إنشاء سمة WordPress باستخدام React. هناك عدد قليل من الخيارات لذلك دعونا نلقي نظرة على طريقتين شائعتين:

إنشاء سمة WordPress React باستخدام نصوص WP

في تطبيقات React النموذجية تحتاج إلى استيراد React في الجزء العلوي من الملفات. ومع ذلك اعتبارًا من الإصدار 5.0 من WordPress يأتي نظام إدارة المحتوى مع مكتبات React و ReactDOM ويصدرها إلى wp.element وهو كائن نافذة عالمي.

إذا كنت قد استخدمت React من قبل فمن المحتمل أنك استخدمت Create React App لتشغيل خادم التطوير. ومع ذلك هذا ليس ضروريًا مع WordPress.

أنشأ فريق WordPress حزمة wp-scripts بناءً على نصوص التفاعل المستخدمة مع Create React App. تتضمن مخطوطات WP الأوامر بشكل افتراضي.

لتحميل React في السمة الخاصة بك انتقل إلى ملف functions.php الخاص بالسمة الخاصة بك وأضف مقتطف الشفرة التالي:

Enqueue Theme JS w React Dependency
add_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' );
function my_enqueue_theme_js() {
  wp_enqueue_script(
    'my-theme-frontend',
    get_stylesheet_directory_uri() . '/build/index.js',
    ['wp-element'],
    time(), // Change this to null for production
    true
  );
}

سيؤدي هذا إلى إضافة عنصر wp كعنصر تبعية لملف JavaScript الخاص بك. بعد ذلك نحتاج إلى إعداد ملف package.json. من جذر قالب WordPress الخاص بك قم بتشغيل الأمر التالي:

npm init

بمجرد الانتهاء من ذلك قم بتشغيل ما يلي:

npm install @wordpress/scripts --save-dev

سيتم تنزيل نصوص WP على node_modules حتى تكون متاحة للاستخدام في سطر الأوامر. لتعيين نصوص WP إلى نصوص NPM يمكنك التصفح إلى ملف package.json الخاص بك وتحميل إعدادات ” scripts ” واستبدالها بهذا المثال:

{
  "name": "myreacttheme",
  "version": "1.0.0",
  "description": "My WordPress theme with React",
  "main": "src/index.js",
  "dependencies": {},
  "devDependencies": {
    "@wordpress/scripts": "^5.1.0"
  },
  "scripts": {
    "build": "wp-scripts build",
    "check-engines": "wp-scripts check-engines",
    "check-licenses": "wp-scripts check-licenses",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "lint:pkg-json": "wp-scripts lint-pkg-json",
    "start": "wp-scripts start",
    "test:e2e": "wp-scripts test-e2e",
    "test:unit": "wp-scripts test-unit-js"
  },
  "author": "",
  "license": "1 GNU V2+, MIT"
}

بعد ذلك يمكنك تشغيل ما يلي:

npm start

سيبحث هذا عن الملفات المستوردة من src / index.js ويبنيها لبناء / index.js كلما تم تغيير الملف.

إنشاء سمة WordPress React باستخدام Create-React-WPTheme

خيار آخر هو استخدام create-response-wptheme بواسطة devloco. تشبه هذه الحزمة تطبيق create-react-app. ومع ذلك فإنه يستخدم WordPress بدلاً من webpack كخادم تطوير. سيكون لديك أيضًا حق الوصول إلى جميع الوظائف الأساسية والخطافات والإجراءات والمرشحات وما إلى ذلك.

لإعداده يمكنك بدء تشغيل Terminal (أو git bash) في تثبيت WordPress المحلي الخاص بك ثم اكتب الأمر التالي:

npx create-react-wptheme barebones

سترى رسالة تخبرك أن التثبيت قد أنشأ مجلدًا جذرًا ودليل ” react-src ” بداخله. هذا الدليل مهم لأنه سيحتوي على كودك غير المجمع.

بعد ذلك نحتاج إلى إضافة styles.css و index.php والملفات الضرورية الأخرى للتحقق من صحتها. في المحطة أدخل الأمر التالي:

cd barebones/react-src
npm run wpstart

الآن عند الانتقال إلى wp-admin > السمات يجب أن ترى المظهر الجديد الخاص بك. انقر فوق الزر “تنشيط” ثم ارجع إلى الجهاز وقم بتشغيل ما يلي:

npm run wpstart

يجب أن يفتح هذا تلقائيًا علامة تبويب متصفح جديدة. لاحظ أنه لا ينبغي تحرير الملفات الموجودة في المجلد الجذر (أي شيء خارج رد فعل src). تحتوي على النسخة المترجمة من الكود المطلوب لـ WordPress و React.

لإنشاء نسق جديد يمكنك استخدام ما يلي:

npx create-react-wptheme my_react_theme

يمكنك تغيير my_react_theme”” كما تريد. بعد ذلك يمكنك إدخال الأمر التالي:

cd my_react_theme/react-src
npm run start

تذكر استبداله بنفس الاسم الذي استخدمته في الخطوة السابقة. سيؤدي هذا إلى إعداد السمة ليتم عرضها في منطقة الإدارة.

بعد الانتهاء من تطوير المظهر ستحتاج إلى استخدام أمر الإنشاء لنقله إلى مرحلة الإنتاج. للقيام بذلك افتح موجه الأوامر وانتقل إلى مجلد رد فعل src الخاص بك وقم بتشغيل ما يلي:

npm run build

سيؤدي ذلك إلى تحسين الملفات الموجودة داخل المجلد. ثم يمكنك نشرها على الخادم الخاص بك.

كيفية إضافة React إلى قالب صفحة مخصص

إذا كنت تتساءل عن كيفية إنشاء قالب WordPress فرعي باستخدام React فإن العملية متشابهة نسبيًا. يمكنك إضافة React إلى قالب صفحة مخصص.

لنبدأ بهيكل موضوع قياسي:

/build
/src
/-- index.js
functions.php
package.json
page-react.php
style.css

بعد ذلك ستضيف الشفرة التالية إلى ملف functions.php الخاص بسمك:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
  $parent_style = 'twentytwenty-style'; 
    
  wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    
  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    [ $parent_style ],
    time() //For production use wp_get_theme()->get('Version')
  );
  wp_enqueue_script(
    'my-theme-frontend',
    get_stylesheet_directory_uri() . '/build/index.js',
    ['wp-element'],
    time() //For production use wp_get_theme()->get('Version')        
  );
  
}

ستحتاج أيضًا إلى إضافة رمز إلى ملف style.css الخاص بك. بداخله انسخ والصق ما يلي:

/*
 Theme Name:   Twenty Twenty Child
 Description:  Twenty Twenty Child Theme
 Author:       Your Name
 Author URI:   https://yourwebsite.com
 Template:     twentytwenty
 Version:      0.9.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentychild
*/

بعد ذلك يمكنك إنشاء page-react.php  قالب صفحة مخصص أساسي باستخدام هذا المثال:

<? php
/**
 * Template Name: React Template
 */
get_header();
?>
<main id="site-content" role="main">
  <article class="post-2 page type-page status-publish hentry">
    <?php get_template_part( 'template-parts/entry-header' ); ?>
    <div class="post-inner thin">
      <div class="entry-content">        
        <div id="react-app"></div><!-- #react-app -->
      </div><!-- .entry-content -->
    </div><!-- .post-inner -->
  </article><!-- .post -->
</main><!-- #site-content -->
<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
<?php get_footer(); ?>

يمكنك الآن إنشاء صفحة جديدة في WordPress ثم تحديد نموذج React كقالب الصفحة.

إنشاء رسومات ثلاثية الأبعاد باستخدام مكتبة React Three Fiber

كيفية استخدام React في تطبيقك

إذا كنت ترغب في استخدام React في تطبيق موجود يمكنك إضافة شبكة توصيل المحتوى  (CDN) مباشرة إلى ملف HTML الخاص بك. للبدء انتقل إلى صفحة HTML حيث تريد إضافة React للبدء.

أدخل علامة  <div> فارغة. سيؤدي هذا إلى إنشاء حاوية حيث يمكنك عرض أحد المكونات. في هذا المثال لنفترض أننا نحاول إنشاء زر.

بعد ذلك أدخل ثلاث علامات  <script> على الصفحة قبل علامة الإغلاق <body/>. سيتم استخدام الأولين لتحميل React والثالث سيتم تحميل كود المكون الخاص بك.

الآن في نفس المجلد مثل صفحة HTML الخاصة بك أنشئ ملفًا جديدًا وقم بتسميته button.js  (أو أي شيء ذي صلة بالعنصر الذي تضيفه). داخل هذا الملف انسخ والصق الكود التالي:

'use strict';
const e = React.createElement;
class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
  }
  render() {
    if (this.state.clicked) {
      return 'You pressed this button.';
    }
    return e(
      'button',
      { onClick: () => this.setState({ clicked: true }) },
      'Press Me'
    );
  }
}

سيؤدي هذا إلى إنشاء مكون زر يعرض رسالة بمجرد النقر عليها. لاستخدام الزر في صفحة HTML الخاصة بك يمكنك إضافة مقتطف الشفرة التالي إلى أسفل ملف button.js:

const domContainer = document.querySelector('#button_container');
ReactDOM.render(e(Button), domContainer);

هذا يستدعي مرة أخرى الحاوية  <div> التي أضفتها إلى صفحة HTML الخاصة بك. ثم يعرض مكون زر رد الفعل.

يمكنك أيضًا استخدام React لإنشاء تطبيق React فارغ من البداية. أفضل طريقة للقيام بذلك هي استخدام حل Create React App الذي ناقشناه سابقًا. يمكن أن يكون مفيدًا لتطبيقات الصفحة الواحدة.

للبدء يمكنك تشغيل هذا الأمر في جهازك الطرفي:

npx create-react-app my-app

لاحظ أنه يمكنك تغيير “my app” إلى ما تريد تسميته. لتشغيله يمكنك استعراض مجلد التطبيق عن طريق تشغيل الأمر cd my-app متبوعًا بـ npm start.

سيتم تشغيل التطبيق بعد ذلك في وضع التطوير. يمكنك مشاهدته في المستعرض الخاص بك على http: // localhost: 3000.

خاتمة

لحسن الحظ من خلال الفهم الأساسي لجافا سكريبت و HTML و CSS يمكنك تعلم الرد في أي وقت من الأوقات. كما ناقشنا في هذا المنشور يمكنك استخدامه لإنشاء تطبيقات وموضوعات من صفحة واحدة وقوالب صفحات مخصصة.

نأمل أن يساعدك هذا الدليل في فهم React وقدراتها لتطوير الويب بشكل أفضل.

المصدر

منشور ذات صلة
أهم اتجاهات JavaScript 13 Minutes

أهم اتجاهات JavaScript (JS) في عام 2021

آيات عامر

قدم React بعض الميزات التجريبية مثل (concurrency) و(zero-size server ). حاليا، هذه التقنيات قيد التطوير، فيمكنك استكشاف هذه الميزات لأنها قد تصبح علامة فارقة كبيرة لاتجاهات JavaScript.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة