بوت استرپ در React

آموزش React Bootstrap – طراحی یک صفحه وب

 

 

 

Bootstrap ، محبوب ترین چارچوب CSS و ابزاری است که هنگام توسعه صفحات وب با استفاده از Vanilla JavaScript ، Popper.js و jQuery ، آن را می شناختیم و به استفاده از آن علاقه داشتیم. با کمک Bootstrap توانستیم خیلی سریع طراحی های خود را از آغاز تا انتها تکمیل کنیم و نمونه های اولیه را سریعتر به مشتری تحویل دهیم. با استفاده از Bootstrap ، می توانیم صفحات وب واکنش گرا را با ابزارهای داخلی منحصر به فرد آن ایجاد کنیم.

با ظهور React ، ما باید چیزی را پیدا کنیم که دارای همان عملکرد بوت استرپ باشد اما بتواند به جای DOM واقعی ، مستقیماً در DOM مجازی بنویسد. پاسخ این نیاز React Bootstrap است. DOM یا Document Object Model به زبان ساده ، ساختار صفحه وب در حافظه مرورگر است. امروز ، ما React Bootstrap را به شما معرفی می کنیم و نحوه ساخت یک صفحه وب با React Bootstrap  را به شما نشان خواهیم داد. 

 

مواردی که در این مقاله به آن می پردازیم:

• React Bootstrap چیست؟
• چرا از React Bootstrap استفاده کنیم؟
• شروع کار با React Bootstrap
• مثال گام به گام استفاده از اجزای React Bootstrap
• جمع بندی و معرفی مراحل بعدی

 

 

React Bootstrap چیست؟

 

Bootstrap محبوب ترین چارچوب CSS برای چیدمان های واکنش گرا است. Bootstrap جعبه ابزاری است منبع باز با متغیرهای Sass ، یک سیستم شبکه ای (grid) واکنش گرا و تعداد زیادی افزونه JavaScript. اکنون Bootstrap برای یکپارچه سازی با React  دوباره ساخته شده است.

بوت استرپ 4 به jQuery بستگی دارد ، اما jQuery برای React ایده آل نیست ، زیرا از دستکاری مستقیم DOM واقعی استفاده می کند در حالی که React از DOM مجازی استفاده می کند. React Bootstrap اساساً جایگزین جاوا اسکریپت در بوت استرپ می شود ، بنابراین هر یک از اجزای آن دوباره build شده است تا به زیبایی با React ادغام شود. با این کار دیگر نیازی به جی کوئری نیست.

 

برخی از اجزایی که React Bootstrap ارئه می دهد عبارتند از:

• Alert
• Navbar
• Dropdown
• Button
• Table
• Pagination
• Overlay
• و غیره

 

 

چرا از React Bootstrap استفاده کنیم؟

 

React Bootstrap برای ساختن برنامه های واکنش گرا و سریع بدون وابستگی ها و بارگیری های غیر ضروری ایده آل است. از آنجا که بوت استرپ به طور خاص برای React دوباره طراحی شده است ، تقریباً احساسی کاملاً بومی دارد. در ادامه ، برخی از دلایل اصلی استفاده از React Bootstrap را بررسی می کنیم:

• درج در DOM مجازی: React Bootstrap برای قرار دادن اجزای Bootstrap در Virtual DOM معرفی شد. این مولفه ها اجزای واقعی React هستند ، بنابراین نیازی به استفاده از jQuery یا Popper.js برای دستکاری DOM نیست.
• استایل های بوت استرپ امکان سازگاری را فراهم می کند: این پکیج هنوز به استایل های کتابخانه Bootstrap متکی است ، بنابراین همه مضامین ، تم ها و موارد داخلی موجود در Bootstrap برای React Bootstrap نیز کار خواهند کرد.
• آماده برای قابلیت دسترس: هنگام ایجاد صفحه وب ، قابلیت دسترسی بسیار مهم است. بدست آوردن قابلیت دسترسی در React Bootstrap حتی نسبت به vanilla Bootstrap نیز ساده تر است.
• کدهای واضح تر: React Bootstrap از مولفه های React ی استفاده می کند که شامل تمام اطلاعات کلاس های زیادی است که بوت استرپ به طور سنتی از آنها استفاده می کند. همه این کارها زیر پوستی انجام می شود و منجر به کد تمیزتر و خواناتر می شود.

 

 

شروع کار با React Bootstrap

 

این آموزش فرض می کند که شما در ساخت برنامه های React دانش کافی دارید. اگر با ایجاد یک برنامه React آشنایی ندارید ، لطفاً قبل از ادامه ، یک آموزش مقدماتی  React را مطالعه کنید تا با نحوه ساخت برنامه های React آشنا شوید. در این مقاله روند گام به گام ادغام React Bootstrap با برنامه های React را بررسی می کنیم و مراحل زیر را طی می کنیم:

 

1. React Bootstrap را به برنامه خود اضافه می کنیم
2. استایل ها را اضافه می کنیم
3. مولفه ها را وارد می کنیم

 

 

React Bootstrap را به برنامه خود اضافه کنید

 

برای شروع با React Bootstrap دو راه وجود دارد.

• Package Manager

برای افزودن بسته به پروژه خود از npm یا yarn  استفاده کنید. در ریشه برنامه React خود در ترمینال (خط فرمان) ، یکی از دستورهای زیر را متناسب با package manager (مدیر بسته ای) که استفاده می کنید ، اجرا کنید:

npm install --save react-bootstrap bootstrap // npm
yarn add react-bootstrap bootstrap // yarn

 

• CDN

این CDN را در فایل index.html در پوشه عمومی (public) سایت خود کپی و جایگذاری کنید. این اسکریپت دقیقاً بالاتر از برچسب بسته شدن body در HTML شما باید جایگذاری شود ، یعنی قبل از <body/>.

<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>

 

 

استایل ها و شیوه نامه های استایل در بوت استرپ

 

React Bootstrap با هیچ CSS ای همراه نیست. برای اینکه اجزای سازنده برنامه شما بر روی صفحه به شکلی که مورد نظر شما است ، ظاهر شوند ، باید نوعی شیوه نامه استایل (stylesheet) در آن داشته باشید. همانطور که در مورد افزودن بسته به پروژه خود دیدید ،  این کار را نیز می توانید به یکی از دو روش زیر انجام دهید:

 

• Import Stylesheet

دستور import زیر را به فایل index.js یا فایل App.js خود اضافه کنید:

import 'bootstrap/dist/css/bootstrap.min.css';

 

• Link Stylesheet

برای دریافت جدیدترین شیوه نامه ، از جدیدترین CDN بوت استرپ استفاده کنید و آن را به head در  فایل index.html پروژه، واقع در پوشه عمومی (public) آن اضافه کنید:

<link
 rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
 crossorigin="anonymous"
/>

اگر تصمیم دارید از package manager (مدیر بسته) برای افزودن بسته React Bootstrap و Bootstrap استفاده کنید ، مطمئن شوید که برای افزودن شیوه نامه نیز از دستور import استفاده می کنید. برعکس اگر در مرحله اول استفاده از CDN را انتخاب کردید ، برای افزودن شیوه نامه نیز از CDN استفاده کنید.

 

نکته ای در مورد پشتیبانی Flexbox / Grid: از آنجا که ما از یک شیوه نامه Bootstrap با بسته React Bootstrap استفاده می کنیم ، پشتیبانی از flexbox و Grid به صورت خودکار آماده است. و این مولفه ها نیز کاملاً واکنش گرا هستند.

 

از SASS استفاده می کنید؟

 

اگر از SASS استفاده می کنید ، یک فایل App.scss ایجاد کنید و فایل Sass بوت استرپ را به آن وارد کنید.

@import "~bootstrap/scss/bootstrap";

اگر از این روش استفاده می کنید بجای import فایل css بوت استرپ در App.js (که در مرحله قبل توضیح داده شد) باید فایل App.scss را در App.js وارد کنید.

 

 

سفارشی سازی استایل ها

 

اگر می خواهید استایل ها را برای برنامه خود سفارشی کنید ، توصیه می شود برای انجام این کار از SASS استفاده کنید. برای ایجاد تغییرات ، یک فایل custom.scss ایجاد کنید و سپس شیوه نامه bootstrap را در زیر تغییرات وارد کنید. نمونه ای از سفارشی سازی را در زیر می بینید.

// سفارشی سازی را در اینجا انجام بدید

$theme-colors: (
   "info": pink,
   "danger": teal,
   "primary": purple
);
 
// شیوه نامه بوت استرپ را در اینجا وارد کنید
 
@import "~bootstrap/scss/bootstrap";

 

پس از انجام سفارشی سازی ها ، می توانید custom.scss خود را به فایل اصلی SASS وارد کنید:

@import "custom";

 

 

وارد کردن مولفه ها

 

طبق توصیه های React Bootstrap ، هنگام وارد کردن یک مولفه (component) ، از وارد کردن کل کتابخانه react-bootstrap خودداری کنید. در هنگام import یک مولفه (component) ، همیشه فقط آنچه را که واقعاً نیاز دارید وارد کنید:

 

 

• وارد کردن تکی از React Bootstrap

// این فقط چیزی که احتیاج داریم را وارد می کند 
import Alert from 'react-bootstrap/Alert';
 
//این کل کتابخانه را وارد می کنید و یک بخش را از آن استخراج می کند  
import { Alert } from 'react-bootstrap';

با این وجود ، اگر به چندین مولفه از کتابخانه react-bootstrap نیاز دارید ، برای جلوگیری از تکرار کد ، روش دوم (استخراج) ترجیح داده می شود.

 

• وارد کردن چندتایی از React Bootstrap

//برای وارد کردن چندتایی این روش استفاده کنید 
import { Alert, Form, Button, Card } from 'react-bootstrap';
 
//ولی از این روش استفاده نکنید 
import Alert from ‘react-bootstrap/Alert’;
import Form from ‘react-bootstrap/Form’;
import Button from ‘react-bootstrap/Button’;
import Card from ‘react-bootstrap/Card’;

در وارد کردن چندتایی ، روش اول به شما امکان می دهد که از تکرار کد خودداری کنید.

 

 

مثال گام به گام در استفاده از مولفه های React Bootstrap

 

بیایید آنچه را آموخته ایم استفاده کنیم و برنامه وب ساده خود را بسازیم. ما با استفاده از برخی از محبوب ترین مولفه های React Bootstrap ، یک وب سایت فرضی برای فیلم خواهیم ساخت. هدف از این بخش ، آگاهی از نحوه شروع کار و چگونگی نمایش مولفه ها در صفحه است.

 

 

مرحله ۱: آماده سازی پروژه و ساختار برنامه

 

اولین کاری که باید انجام دهیم ایجاد برنامه React است. اگر مطمئن نیستید که چگونه این کار را انجام دهید ، لطفاً به اسناد React در مورد نحوه شروع کار مراجعه کنید. برای راه اندازی React Bootstrap به بخش Getting Started (شروع) در این مقاله مراجعه کنید.

به یاد داشته باشید که در صورت تمایل به استفاده از CDN ، باید از CDN برای react-bootstrap استفاده کنید و سپس به شیوه نامه Bootstrap پیوند دهید. اگر این بسته ها را با استفاده از مدیر بسته (package manager) اضافه می کنید ، می توانید شیوه نامه Bootstrap را به پرونده index.js خود وارد (import) کنید.

علاوه بر این ، باید بسته axios را به پروژه خود اضافه کنید. ما از این بسته برای ایجاد درخواست GET به یک API شخص ثالث به نام TMDB برای دریافت اطلاعات فیلم ها استفاده خواهیم کرد.

 

 

 ساختار برنامه 

 

در بالاترین سطح ، این ساختار در فایل App.js مشخص می شود:

<Container>
     <Navigation />
     <MovieTable movies={movies} />
     <MovieAccordion movies={movies} />
</Container>

</ Container> یک مولفه React Bootstrap است که همه اجزای React ما را در بر می گیرد. من این برنامه را به سه بخش اساسی جدا کرده ام.

ابتدا </ Navigation> وجود دارد که در آن نگاهی خواهیم انداخت به نحوه کارکرد کامپوننت نوار ناوبری </ Navbar>  در React Bootstrap.

دوم ، نگاهی به مولفه های </ Table> و </ Modal> در </ MovieTable> خواهیم انداخت.

سرانجام ، مولفه </ Accordion>  قرار می گیرد.

 

 

مرحله ۲: نوار ناوبری

 

در عبارت بازگشتی مولفه App در برنامه ما ، ما می خواهیم <Container> کلی خود را ایجاد کنیم که برنامه ما را نگه دارد. سپس ، مولفه </ Navigation> خود را اضافه خواهیم کرد. با استفاده از دستورالعمل های شروع به کار در بالا ، Container را از React Bootstrap وارد (import) کنید.

 

برای مولفه Navigation یک فایل جداگانه ایجاد کنید ، طرح کلی یک مولفه کاربردی بنام Navigation را بنویسید و آن را export  (صادر) کنید.  فایل را وارد (Import) App.js کنید و مطمئن شوید که مولفه </ Navigation> بین برچسب های باز و بسته شده </ Container> قرار گرفته است.

نکته: اگر localhost در حال اجرا است ، باید بتوانید ببینید که این مولفه (component) به درستی متصل شده است. بهتر است همیشه یک مولفه اولیه را متصل کنید تا مطمئن شوید قبل از رفتن به مرحله بعدی کار می کند.

 

 

اضافه کردن نوار ناوبری

 

برای افزودن مولفه  Navbar  از React Bootstrap ، راحت ترین کار این است که از اسناد رسمی بوت استرپ استفاده کنید. در زیر نسخه ی طرح رنگی Navbar را می بینید:

import React, { useState } from "react";
import {
 Navbar,
 Nav,
 NavDropdown,
 Form,
 FormControl,
 Button
} from "react-bootstrap";
 
import ModalLogin from "./ModalLogin";
 
const Navigation = () => {
 const [modalShow, setModalShow] = useState(false);
 
 return (
   <Navbar bg="primary" variant="dark" expand="md">
     <Navbar.Brand href="#home">Movies-App</Navbar.Brand>
     <Navbar.Toggle aria-controls="basic-navbar-nav" />
     <Navbar.Collapse id="basic-navbar-nav">
       <Nav className="mr-auto">
         <Nav.Link
           variant="transparent"
           style={{ width: "50px" }}
           onClick={() => setModalShow(true)}
         >
           Login
         </Nav.Link>
         <ModalLogin show={modalShow} onHide={() => setModalShow(false)} />
         <Nav.Link href="#link">Link</Nav.Link>
         <NavDropdown title="Sample Dropdown" id="basic-nav-dropdown">
           <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
           <NavDropdown.Item href="#action/3.2">
             Another action
           </NavDropdown.Item>
           <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
           <NavDropdown.Divider />
           <NavDropdown.Item href="#action/3.4">
             Separated link
           </NavDropdown.Item>
         </NavDropdown>
       </Nav>
       <Form inline>
         <FormControl type="text" placeholder="Search" className="mr-sm-2" />
         <Button variant="outline-light">Search</Button>
       </Form>
     </Navbar.Collapse>
   </Navbar>
 );
};
export default Navigation;

در این نسخه از مولفه Navbar ، من یک مولفه </ModalLogin> اضافه کرده ام که حاوی مولفه React Bootstrap و اجزای سازنده آن است. این یکی از راه های حل مسئله ورود به سایت ها است. به یاد داشته باشید که ما فقط UI را بررسی می کنیم.

شما نیز می توانید عناصر دلخواه خود را انتخاب کرده و با استفاده از آنها عناصر مورد نیاز خود را ایجاد کنید.

توجه: در هنگام نوشتن منطق برنامه خود دقت کنید که دوباره کاری نکنید و سعی نکنید چرخ را از نو اختراع کنید! هدف این بسته این است که یک نمونه اولیه را به سرعت بسازید.

 

 

مرحله ۳: فراخوانی Axios

 

سایر مولفه های برنامه ما برای نمایش اطلاعات به برخی از داده ها نیاز دارند. برای این برنامه ، ما از پایگاه داده فیلم TMDB برای بدست آوردن برخی از داده های جدیدترین فیلم ها با فرمت JSON استفاده می کنیم.

برای درخواست از TMDB API به یک حساب کاربری نیاز دارید. راه اندازی آن کاملاً ساده است. برای ادامه این پروژه به یک کلید API از TMDB احتیاج داریم. اگر می خواهید از API دیگری استفاده کنید نیز مشکلی نیست. فقط به یاد داشته باشید که نحوه اتصال به API و استفاده از JSON را متناسب با API انتخابی خود تغییر دهید.

با توجه به اهداف این پروژه ، من از React Hooks برای فراخوانی های داخل شبکه و مدیریت state استفاده می کنم. برای برقراری تماس با axios ، کد نسخه ی دمو را از مولفه App برنامه حذف کرده و کد مورد نیاز را جایگزین آن کنید. آدرس اتصال به سرویس در کد زیر به عنوان URL آورده شده است:

 const [movies, setMovies] = useState([]);
 const [err, setErr] = useState("");
 const [errBool, setErrBool] = useState(false);
 const [loading, setLoading] = useState(true);
 let URL = `https://api.themoviedb.org/3/movie/popular?api_key=${YOUR_API_KEY}&language=en-US&page=1`;
 
 
 const fetchMovies = (url) => {
   axios
   .get(
     url
   )
   .then(response => {
     setMovies(response.data.results);
     setLoading(false);
   })
   .catch(err => {
     setErr(err.message);
     setErrBool(true);
     setLoading(false);
   });
 }
 
 useEffect(() => {
   fetchMovies(URL);
 }, [URL]);

این کد درخواست HTTP GET را به نقطه اتصال TMDB ارسال می کند و در پاسخ سرویس یک شی promise به ما می دهد. پس از تحقق promise ، ما آرایه ی داده ها که به ما بازگردانده شده را دریافت کرده و آنها را در state قرار می دهیم تا در برنامه ما استفاده شود. بلوک catch به ما کمک می کند تا خطاهایی را که ممکن است رخ دهد مدیریت کنیم.

 

 

مرحله ۴: ساخت مولفه MovieTable

 

هدف این مولفه لیست کردن برخی از داده های فیلم در یک جدول است. در ستون آخر ، ما به یک modal پیوند می دهیم که اطلاعات بیشتری در مورد فیلم نمایش می دهد و با کلیک روی این لینک پنجره ای حاوی اطلاعات تکمیلی در مورد فیلم نمایش داده می شود.

 

 

ساخت جدول

 

برای این بخش از برنامه خود ، ما از مولفه </ Table> برای ایجاد مجموعه ای از ردیف ها و ستون ها استفاده خواهیم کرد که اطلاعات مربوط به فیلم های محبوب امروز را لیست می کند. برای شروع ، یک فایل جداگانه برای این مولفه (component) ایجاد کنید و اجزای Table و NavLink را از بسته react-bootstrap وارد کنید.

یک مولفه کاربردی ایجاد کنید که شی props را به عنوان یک پارامتر به تابع منتقل کند و آن مولفه را صادر (export) کنید تا بتوانید آن را به App.js وارد (import) کنید. در App.js ، این مولفه را وارد (import) کرده و آن را به عنوان فرزند (تگی در داخل آن) به </ Container> مرحله اول اضافه کنید. از آرایه فیلم ها که از فراخوانی axios بدست آورده اید استفاده کنید و آن را به عنوان props  به این مولفه منتقل کنید. این به ما امکان می دهد تا به آرایه دسترسی پیدا کرده و فرمت آن را به شکل مناسب تغییر دهیم (map کنیم)  تا اطلاعات را در سلول های جدول وارد کنیم.

در اینجا ، من تصمیم گرفته ام مشخصات مربوط به ، محبوبیت (popularity) ، عنوان (title) ، تاریخ انتشار (release_date)  و مشخصات کلی (overview) را لیست کنم. از آنجا که مشخصات کلی خود بیش از حد طولانی بود ، تصمیم گرفتم modal (دیالوگ) ایجاد کنم تا برخی اطلاعات تکمیلی را درباره فیلم داخل دیالوگ نمایش دهم.

import React, { useState } from "react";
import { Table, NavLink } from "react-bootstrap";
 
const MovieTable = props => {
 let keys = ["popularity", "title", "release_date", "overview"];
 const { movies } = props;
 
 return (
   <div style={{ width: "90%", margin: "0 auto" }}>
     <h2 style={{textAlign: "center", margin: "20px auto auto"}}> Popular Movies for { new Date(Date.now()).toLocaleDateString()}</h2>
 
     <Table
       variant="default"
       style={{ width: "100%", margin: "20px auto" }}
       striped
       bordered
       responsive
     >
 
       <thead>
         <tr>
           {keys.map(heading => {
             return <td key={heading}>{heading}</td>;
           })}
         </tr>
       </thead>
       <tbody>
         {movies.map(movie => {
           return (
             <tr key={movie.id}>
               <td>{movie.popularity}</td>
               <td>{movie.title}</td>
               <td>{movie.release_date}</td>
               <td>modal will go here…</td>
             </tr>
           );
         })}
       </tbody>
     </Table>
   </div>
 );
};
 
export default MovieTable;

 

 

ساختن Modal

 

Modal احتمالاً یکی از پیچیده ترین اجزای کتابخانه react-bootstrap است. Modal ها در اصل پنجره های بازشونده هستند که پس از تعامل کاربر با وب سایت به نوعی نشان داده می شوند. تنها چیزی که برای راه اندازی و استفاده از آن نیاز داریم مولفه واقعی </ Modal> است. برای این پروژه ، ما همچنین از مولفه </ Image> برای نمایش تصویری که نمایانگر هر فیلم است استفاده می کنیم.

 

علامت گذاری </ Modal> از ساختار <body> در یک سند HTML تقلید می کند:

• سرآیند (header) مودال به ما می گوید که چرا مودال را داریم
• بدنه اصلی مودال
• پاورقی مودال

ما حالت مودال (باز یا بسته) را در مولفه </ MovieTable> کنترل خواهیم کرد. اگر حالت showModal را روی true تنظیم کنید ، همه modal ها را یک باره باز می کند و روی هم قرار می دهد. باید راهی پیدا کنیم تا هر بار فقط یک modal باز شود.

 

در اینجا یکی از راه های انجام این کار را می بینید:

import React from "react";
import { Modal, Image } from "react-bootstrap";
 
const ModalOverview = props => {
 return (
   <Modal
     {...props}
     size="lg"
     aria-labelledby="contained-modal-title-vcenter"
     centered
   >
     <Modal.Header>
       <Image fluid src={`https://image.tmdb.org/t/p/original${props.movie.backdrop_path}`} alt={props.movie.title} />
     </Modal.Header>
     <Modal.Body>
       <Modal.Title id="contained-modal-title-vcenter">
         {props.movie.title} <span style={{fontSize: "1rem", fontStyle: "italic"}}>{new Date(props.movie.release_date).toLocaleDateString()}</span>
       </Modal.Title>
       <p>{props.movie.overview}</p>
       <p> Popularity: {props.movie.popularity} </p>
       <p> Votes: {props.movie.vote_count}</p>
     </Modal.Body>
   </Modal>
 );
};
 
export default ModalOverview;

 

بیایید ببینیم کد ما تا اینجا چگونه است. در زیر می بینید که داخل مولفه </ MovieTable> ، با تغییر مقدار متغیر modalShow به شناسه (id) فیلمی که ارسال شده است ، حالت modal ها را ردیابی می کنیم.

برای اطمینان از اینکه هر بار فقط یک modal نمایش داده می شود ، بررسی می کنیم که آیا movie.id هر modal برابر با movie.id ذخیره شده در modalShow باشد. از آنجا که فقط یک شناسه با آنچه تنظیم شده برابر است ، فقط modal کلیک شده نمایش داده می شود.

// Modal state in MovieTable
import React, { useState } from "react";
import { Table, NavLink } from "react-bootstrap";
import ModalOverview from "./ModalOverview";
 
const MovieTable = props => {
 const [modalShow, setModalShow] = useState(false);
 let keys = ["popularity", "title", "release_date", "overview"];
 const { movies } = props;
 
 return (
   <div style={{ width: "90%", margin: "0 auto" }}>
     <h2 style={{textAlign: "center", margin: "20px auto auto"}}> Popular Movies for { new Date(Date.now()).toLocaleDateString()}</h2>
 
     <Table
       variant="default"
       style={{ width: "100%", margin: "20px auto" }}
       striped
       bordered
       responsive
     >
 
       <thead>
         <tr>
           {keys.map(heading => {
             return <td key={heading}>{heading}</td>;
           })}
         </tr>
       </thead>
       <tbody>
         {movies.map(movie => {
           return (
             <tr key={movie.id}>
               <td>{movie.popularity}</td>
               <td>{movie.title}</td>
               <td>{movie.release_date}</td>
               <td>
                 <NavLink
                   value={movie.id}
                   onClick={() => {
                     setModalShow(movie.id);
                   }}
                 >Details
                 </NavLink>
                 <ModalOverview
                   movie={movie}
                   show={modalShow === movie.id}
                   onHide={() => setModalShow(false)}
                 />
               </td>
             </tr>
           );
         })}
       </tbody>
     </Table>
   </div>
 );
};
 
export default MovieTable;

 

 

مرحله ۵: ساخت مولفه MovieAccordion

 

در این مولفه ، ما یک accordion ایجاد خواهیم کرد ، accordion مولفه ای است که اطلاعات را پنهان می کند تا زمانی که کاربر روی عنوان آن کلیک کند. ما از همان اطلاعات درخواست شده با axios که هنگام نصب مولفه فراخوانی شده است ، استفاده خواهیم کرد.

 

توضیح: آکاردئون (accordion) یک تکنیک UI است که ایده دکمه ها و ایده کارتها را ترکیب می کند و عنصری را ایجاد می کند که باز و بسته می شود.

 

مولفه « s » را ایجاد می کنیم که مولفه آکاردئون را طبق همان قراردادی که برای مولفه </ MovieTable> مشخص کردیم ، نگه دارد. باید مولفه های آکاردئون و کارت را نیز وارد این مولفه کنیم.

هنگام ارائه مولفه ای که دارای آکاردئون به عنوان بخشی از مولفه بزرگتر App است ، باید اطلاعات فیلم ها را به مولفه منتقل کنیم تا از اطلاعات این فیلم ها برای نمایش در آکاردئون استفاده شود.

import React from 'react';
import { Accordion, Card, Image } from "react-bootstrap";
 
 
const MovieAccordion = props => {
 const { movies } = props;
 return (
     <Accordion style={{width: "90%", margin: "0px auto 40px", cursor: "pointer"}}>
       {
         movies.map(movie => {
           return (
             <Card key={movie.id}>
               <Accordion.Toggle as={Card.Header} eventKey={movie.id}>
                 {movie.title}
               </Accordion.Toggle>
               <Accordion.Collapse eventKey={movie.id}>
                 <Card.Body>
                 <Image fluid src={`https://image.tmdb.org/t/p/original${movie.backdrop_path}`} alt={movie.title} />
                 <h5 style={{marginBottom: "0"}}>{movie.title}</h5>
                 <p style={{fontSize: ".8rem", fontStyle: "italic"}}>Release Date: {new Date(movie.release_date).toLocaleDateString()}</p>
                 <p>{movie.overview}</p>
                 </Card.Body>
               </Accordion.Collapse>
             </Card>
           )
         })
       }
     </Accordion>
   );
}
 
export default MovieAccordion;

اگر مولفه Accordion خود را به صورت دستی وارد کد کردید مطمئن شوید که eventKey مربوط به toggle و collapse با هم مطابقت داشته باشد. در اینجا ، من برای برگرداندن کارتهایی که حاوی اطلاعات هر فیلم است ،داخل آرایه فیلم ها پیمایش و فیلم ها را map (تبدیل) به کارت کردم. مطمئن شوید که eventKey برای هر دو قسمت آکاردئون به یک متغیر اشاره داشته باشد.

جمع بندی و مراحل بعدی

 

در اینجا شما اولین برنامه خود را با استفاده از React  و React Bootstrap ایجاد کرده اید! پس از یادگیری React Bootstrap کار با آن راحت و بدون مشکل است.

در مورد React و Bootstrap هنوز چیزهای زیادی برای یادگیری وجود دارد. برخی از مفاهیم پیشرفته تر در React که شاید بخواهید در آن تسلط داشته باشید عبارتند از:

• استفاده از TypeScript با React
• الگوهای طراحی در React
• React Tracked
• Firebase و React
• و سایر موارد