تحويل شيفرة بلغة html إلى شيفرة بلغة React js

لإضافة حالة للمقاعد المحجوزة (occupied seats) ، يمكن إضافة خاصية (prop) إلى عنصر Seat وتمرير قيمة مختلفة لكل Seat بناءً على حالة المقعد.

يمكن تحديد حالة المقعد (occupied or not) بواسطة الحالة المحلية (local state) داخل عنصر Seat. على سبيل المثال:

import React, { useState } from 'react'

function Seat(props) {
const [isOccupied, setIsOccupied] = useState(false);
  const handleClick = () => {
    setIsOccupied(!isOccupied);
}

return (
    <div className={isOccupied ? 'seat occupied' : 'seat'} onClick={handleClick}>
        <div></div>
    </div>
)
}

export default Seat

في هذا المثال ، تم إضافة خاصية (prop) إلى عنصر Seat لتمرير قيمة الحالة المحجوزة (occupied) من Row. يتم تحديد حالة المقعد (occupied) عن طريق النقر على المقعد ، ويتم تغيير حالة المقعد (isOccupied) باستخدام الحالة المحلية (useState). ويتم تحديد الفئة (class) المستخدمة لعنصر Seat باستخدام تعبير تفاضلي (ternary expression) بناءً على قيمة الحالة المحجوزة (isOccupied).

بعد ذلك ، يمكن تمرير قيمة محددة للحالة المحجوزة لكل Seat في Row باستخدام الخاصية (prop). يمكن تعيين القيمة المحددة للخاصية (prop) لكل Seat في Row بناءً على الحالة الفعلية للمقعد في التطبيق.

يمكن تمرير الحالة المحجوزة (occupied) كخاصية (prop) إلى عنصر Seat في Row كما يلي:

import React from 'react'
import Seat from './Seat'

function Row() {

return (
<div className='row'>
<Seat occupied={true} />
<Seat occupied={false} />
<Seat occupied={false} />
<Seat occupied={true} />
<Seat occupied={false} />
<Seat occupied={true} />
<Seat occupied={false} />
<Seat occupied={false} />
</div>
)
}

export default Row

في هذا المثال ، يتم استخدام القيمة الممررة للخاصية (prop) occupied لتحديد الفئة (class) المناسبة لعنصر Seat. إذا كانت القيمة الممررة لـ (prop) occupied هي true ، فإن العنصر Seat يحصل على الفئة (class) occupied ، وإلا فإنه يحصل على الفئة (class) الافتراضية (not-occupied).

يمكن تمرير الحالة الفعلية للمقاعد (occupied seats) إلى Row كخصائص (props) من المكون الأب (parent component) الذي يحتوي على Rows component. على سبيل المثال:

import React from 'react'
import Rows from './Rows'

function App() {
const occupiedSeats = [2, 5, 6, 7]; // assuming seat numbers start from 1

return (
<div>
<Rows occupiedSeats={occupiedSeats} />
</div>
)
}

export default App

يمكن تحويل الشيفرة المعطاة إلى شيفرة JSX في React عن طريق استخدام عناصر الـ JSX والمكونات. لتحويل الشيفرة إلى JSX، يمكن القيام بالتالي:

1- يجب إنشاء ملف جديد بامتداد .jsx

2- يمكن إنشاء مكون جديد باستخدام function component في React ويمكن إسمه SeatMap مثلاً، ويمكن إرجاع العناصر المطلوبة.

3- يمكن إنشاء مكون آخر للصفحة بإسم Screen ويمكن أن يتم إرجاع عنصر div وتخصيصه الفئة container.

4- يمكن إنشاء مكون آخر لعناصر الصف بإسم Row واستخدام عناصر div لتمثيل الأماكن.

5- يمكن إنشاء مكون آخر بإسم Seat وتخصيص الفئات اللازمة وتمثيل الأماكن الشاغرة والمحجوزة بحسب المتغيرات المعطاة في الـ CSS.

6- يمكن استدعاء كل من المكونات المناسبة داخل المكون الأساسي الذي يتم تصوره كشجرة ويمكن تقسيم الكود بحسب الأقسام المناسبة.

بالتالي، يمكن الحصول على الشيفرة JSX على النحو التالي:

import React from 'react';

function Seat() {
  return <div className="seat"></div>;
}

function Row() {
  return (
    <div className="row">
      <Seat />
      <Seat />
      <Seat />
      <Seat className="occupied" />
      <Seat className="occupied" />
      <Seat />
      <Seat />
      <Seat />
    </div>
  );
}

function Screen() {
  return (
    <div className="container">
      <div className="screen"></div>
      <Row />
      <Row />
      <Row />
      <Row />
      <Row />
    </div>
  );
}

export default Screen;

ملاحظة: يتم استدعاء المكون الأساسي Screen في ملف JavaScript لإظهار الكود في الصفحة، ويجب تمريره عبر ReactDOM.render() في الـ index.js لعرضه في الصفحة.

هل هناك طريقة افضل لتحسين الكود؟

نعم، هناك طريقة أفضل لتحسين هذا الكود. يمكننا استخدام حلقتين متداخلتين لإنشاء مصفوفة من العناصر التي تشكل الجلوسات، ثم استخدام دالة map لإنشاء عناصر JSX من هذه المصفوفة، وفي نهاية المطاف يمكننا إدراج هذه العناصر في العنصر الرئيسي الذي يحتوي على الجدول.

import React from 'react';

function App() {
  const rows = [...Array(6)].map((_, index) => {
    const seats = [...Array(8)].map((_, index) => (
      <div className="seat" key={index}></div>
    ));

    return <div className="row" key={index}>{seats}</div>;
  });

  return (
    <div className="container">
      <div className="screen"></div>
      {rows}
    </div>
  );
}

export default App;

يستخدم هذا الكود مصفوفتين متداخلتين: المصفوفة الأولى تنشئ الصفوف، والمصفوفة الثانية تنشئ الجلوسات داخل كل صف. يتم تمرير المصفوفة الثانية إلى map داخل المصفوفة الأولى لإنشاء العناصر JSX. تم إضافة key إلى العناصر لتحسين الأداء عند إعادة رسم المكون.

أنا قمت بالحل التالي 

import React from 'react'

function Seat() {
    
  return (
    <div className='seat'>
       <div></div>
    </div>
  )
}

export default Seat

import React from 'react'
import Seat from './Seat'

function Row() {
    
  return (
    <div className='row'>
      <Seat />
      <Seat />
      <Seat />
      <Seat />
      <Seat />
      <Seat />
      <Seat />
      <Seat />
    </div>
  )
}

export default Row

import React from 'react'
import Row from './Row'

function Rows() {
    
  return (
    <div className='container'>
        <div className="screen"></div>
        <div className="rows">
            <Row/>
            <Row/>
            <Row/>
            <Row/>
            <Row />
            <Row/>
        </div>
    </div>
  )
}

export default Rows

لكن المشكلة كيف أختار "occupied seats"

بتاريخ 3 ساعة قال Mustafa Suleiman:

لإضافة حالة للمقاعد المحجوزة (occupied seats) ، يمكن إضافة خاصية (prop) إلى عنصر Seat وتمرير قيمة مختلفة لكل Seat بناءً على حالة المقعد.

يمكن تحديد حالة المقعد (occupied or not) بواسطة الحالة المحلية (local state) داخل عنصر Seat. على سبيل المثال:

import React, { useState } from 'react'

function Seat(props) {
const [isOccupied, setIsOccupied] = useState(false);
  const handleClick = () => {
    setIsOccupied(!isOccupied);
}

return (
    <div className={isOccupied ? 'seat occupied' : 'seat'} onClick={handleClick}>
        <div></div>
    </div>
)
}

export default Seat

في هذا المثال ، تم إضافة خاصية (prop) إلى عنصر Seat لتمرير قيمة الحالة المحجوزة (occupied) من Row. يتم تحديد حالة المقعد (occupied) عن طريق النقر على المقعد ، ويتم تغيير حالة المقعد (isOccupied) باستخدام الحالة المحلية (useState). ويتم تحديد الفئة (class) المستخدمة لعنصر Seat باستخدام تعبير تفاضلي (ternary expression) بناءً على قيمة الحالة المحجوزة (isOccupied).

بعد ذلك ، يمكن تمرير قيمة محددة للحالة المحجوزة لكل Seat في Row باستخدام الخاصية (prop). يمكن تعيين القيمة المحددة للخاصية (prop) لكل Seat في Row بناءً على الحالة الفعلية للمقعد في التطبيق.

يمكن تمرير الحالة المحجوزة (occupied) كخاصية (prop) إلى عنصر Seat في Row كما يلي:

import React from 'react'
import Seat from './Seat'

function Row() {

return (
<div className='row'>
<Seat occupied={true} />
<Seat occupied={false} />
<Seat occupied={false} />
<Seat occupied={true} />
<Seat occupied={false} />
<Seat occupied={true} />
<Seat occupied={false} />
<Seat occupied={false} />
</div>
)
}

export default Row

في هذا المثال ، يتم استخدام القيمة الممررة للخاصية (prop) occupied لتحديد الفئة (class) المناسبة لعنصر Seat. إذا كانت القيمة الممررة لـ (prop) occupied هي true ، فإن العنصر Seat يحصل على الفئة (class) occupied ، وإلا فإنه يحصل على الفئة (class) الافتراضية (not-occupied).

يمكن تمرير الحالة الفعلية للمقاعد (occupied seats) إلى Row كخصائص (props) من المكون الأب (parent component) الذي يحتوي على Rows component. على سبيل المثال:

import React from 'react'
import Rows from './Rows'

function App() {
const occupiedSeats = [2, 5, 6, 7]; // assuming seat numbers start from 1

return (
<div>
<Rows occupiedSeats={occupiedSeats} />
</div>
)
}

export default App

شكرا على التوضيح، لقد ساعدني كثيرا.

أنا وجدت هذا الحل، هل هو مثالي

import React from 'react'

function Row({id}) {
    // let rows = [1,2,4,5];
    // let seats = [3,4,5,6,7]
  return (
    <div className='row'>
        {
            [...Array(8)].map((_,index)=>(
                <div 
                    className={
                        (id===1 && index===3) || 
                        (id===1 && index===4) ||
                        (id===2 && index===6) ||
                        (id===2 && index===7) ||
                        (id===4 && index===3) ||
                        (id===4 && index===4) ||
                        (id===5 && index===4) ||
                        (id===5 && index===5) ||
                        (id===5 && index===6) ? 
                        'seat occupied' : 'seat'
                    } 
                    key={index} 
                >
                    <div></div>
                </div>
            ))
        }
    </div>
  )
}

export default Row

*********************************************************************************************

import React from 'react'
import Row from './Row'

function Rows() {
    
  return (
    <div className='container'>
        <div className="screen"></div>
        <div className="rows">
            {
                [...Array(6)].map((_,index)=>(
                    <Row 
                        key={index}
                        id={index}
                    />
                ))
            }
        </div>
    </div>
  )
}

export default Rows