مقدمه
مسیریابی پاسخگو در React شامل ارائه مسیرهای مختلف به کاربران بر اساس پورت نمای دستگاهشان است. معمولاً از درخواست های CSS رسانه برای دستیابی به این هدف استفاده می شود ، اما این بدان معنی است که شما فقط با نشان دادن یا عدم نمایش عناصر مختلف با استفاده از گزاره های CSS محدود هستید. با استفاده از مسیرهای پاسخگو ، اکنون می توانید نمایش کامل و جداگانه برنامه های React خود را بر اساس اندازه صفحه نمایش آنها به کاربران مختلف ارائه دهید.
در این آموزش ، نحوه اجرای مسیریابی و سرویس دهی به مسیرهای پاسخگو را در برنامه های React به شما نشان خواهیم داد. با دنبال کردن این آموزش ، یک برنامه داشبورد کاربر ایجاد خواهید کرد که براساس اندازه صفحه نمایش دستگاه آنها ، مسیرهای مختلفی را برای کاربران ارائه می دهد.
پیش نیازها
برای دنبال کردن این راهنما به صورت مناسب ، به موارد زیر نیاز دارید:
Node.js که روی دستگاه شما نصب شده باشد
npm نصب شده بر روی دستگاه شما
برای تأیید نصب خود ، دستورات زیر را اجرا کنید:
$ node –version
$ npm –version
اگر شماره نسخه آنها را به عنوان نتیجه بدست آورید ، آماده هستید تا پیش بروید.
مرحله 1 – نصب React
این مقاله مبتنی بر React است ، بنابراین باید آن را در دستگاه خود نصب کنید. برای نصب React ، دستور زیر را اجرا کنید:
$ npm install -g create-react-app
پس از اتمام این کار ، React را با موفقیت روی دستگاه خود نصب کرده اید. اکنون می توانیم با اجرای این دستورات برنامه جدید خود را ایجاد کنیم:
$ create-react-app responsive-routing
$ cd responsive-routing
نکته بعدی اینست که ماژول های لازم را برای موفقیت ساخت این نسخه ی نمایشی نصب کنیم. این ماژول ها react-router-dom و react-media هستند. ما این کار را با اجرای دستور زیر نصب می کنیم:
$ npm install react-router-dom react-media
اکنون می توانیم با اجرای دستور برنامه را شروع کنیم:
$ npm start
مرحله 2 – ایجاد مؤلفه پیمایش
نماد Github در مرکز صفحه به عنوان قسمت ناوبری برنامه ما عمل می کند. بیایید ببینیم چگونه این کار را انجام دهیم. در پوشه src / خود یک پوشه جدید با نام Nav و فایل های لازم را به شرح زیر ایجاد کنید:
$ cd src
$ mkdir Nav
$ cd Nav && touch index.js Nav.css
باید آرم Github را اضافه کنید و آن را به عنوان logo.svg ذخیره کنید.
اکنون فایل src / Nav / index.js را به روز کنید تا به این شکل ظاهر شود:
// src/Nav/index.js
import React from ‘react’;
import ‘./Nav.css’;
import logo from ‘./logo.svg’;
const Nav = () => (
<nav>
<img src={logo} alt=”” />
</nav>
);
export default Nav;
مولفه ناوبری دارای ظاهر زیر میباشد:
/** src/Nav/Nav.css **/
nav {
display: flex;
justify-content: center;
height: 50px;
margin-bottom: 10px;
}
nav > img {
display: block;
width: 50px;
height: auto;
}
اکنون ، اجازه دهید مؤلفه Nav را ارائه دهیم. برای انجام این کار ، فایل پیش فرض src / App.js را ویرایش کنید تا به این شکل ظاهر شود:
// src/App.js
import React, { Component } from ‘react’;
import Nav from ‘./Nav’;
= App extends Component {
render() {
return (
<div>
<Nav />
</div>
);
}
}
export default App;
مرحله 3 – ایجاد کارت های کاربری
کارتهای کاربر وظیفه نمایش جزئیات کاربر را دارند. حال ، بیایید ببینیم چگونه می توانیم این کار را ایجاد کنیم. در دایرکتوری src / برنامه خود ، یک پوشه جدید Users ایجاد کرده و فایل های زیر را ایجاد کنید:
$ mkdir Users
$ cd Users && touch UsersCard.js UsersCard.css
فایل UsersCard.js را ویرایش کنید تا به این شکل ظاهر شود:
// src/Users/UsersCard.js
import React from ‘react’;
import {Link} from ‘react-router-dom’;
import ‘./UsersCard.css’
const UsersCard = ({ user, match }) => <Link to={`${match.url}/${user.id}`} className=”column card”>
<img src={user.avatar} alt=””/>
<p className=”users-card__name”>{user.name}</p>
<p className=”users-card__username”>@{user.username}</p>
<div className=”users-card__divider”></div>
<div className=”users-card__stats”>
<div>
<p>{user.followers}</p>
<span>Followers</span>
</div>
<div>
<p>{user.following}</p>
<span>Following</span>
</div>
<div>
<p>{user.repos}</p>
<span>Repositories</span>
</div>
</div>
</Link>;
export default UsersCard;
در این قطعه کد ، ما از مؤلفه Link از re-router-dom استفاده کردیم تا کاربر بتواند در هنگام کلیک بر روی کارت ، جزئیات مربوط به یک کاربر واحد را مشاهده کند. بنابراین ، برای یک کارت کاربر خاص با شناسه 10009 ، کامپوننت Link ، URL ای به صورت زیر ایجاد می کند:
http://your-app/current-page/10009
http://your-app/current-page آدرس URL موجود را نشان می دهد.
10009 شناسه کاربر را نشان می دهد.
با ارائه مؤلفه ، تمام این اطلاعات منتقل می شود. این مؤلفه به شکل زیر است:
/** src/Nav/UsersCard.css **/
.card {
border-radius: 2px;
background-color: #ffffff;
box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.05);
max-width: 228px;
margin: 10px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
}
.card img {
width: 50px;
height: auto;
border-radius: 50%;
display: block;
padding: 15px 0;
}
.users-card__name {
font-weight: 400;
font-size: 16.5px;
line-height: 1.19;
letter-spacing: normal;
text-align: left;
color: #25292e;
}
.users-card__username {
font-size: 14px;
color: #707070;
}
.users-card__divider {
border: solid 0.5px #efefef;
width: 100%;
margin: 15px 0;
}
.users-card__stats {
display: flex;
}
.users-card__stats p {
font-size: 20px;
}
.users-card__stats div {
margin: 10px;
text-align: center;
}
.users-card__stats span {
color: #707070;
font-size: 12px;
}
Copy
مرحله 4 – لیست کردن همه کاربران
برای اینکه برنامه خود را برای لیست کاربران قرار دهیم ، ابتدا باید یک جزء UsersList ایجاد کنیم. در دیرکتوری src / Users ، فایلهای زیر را ایجاد کنید:
$ touch UsersList.js UsersList.css
بیایید UsersList.js را به شرح زیر ویرایش کنیم. ابتدا ورودی های لازم را ایجاد می کنیم:
// src/Users/UsersList.js
import React from ‘react’;
import UsersCard from ‘./UsersCard’;
import ‘./UsersList.css’;
const listOfUsersPerRow = (users, row, itemsPerRow, match) =>
users
.slice((row – 1) * itemsPerRow, row * itemsPerRow)
.map(user => <UsersCard user={user} key={user.id} match={match} />);
const listOfRows = (users, itemsPerRow, match) => {
const numberOfUsers = users.length;
const rows = Math.ceil(numberOfUsers / itemsPerRow);
return Array(rows)
.fill()
.map((val, rowIndex) => (
<div className=”columns”>
{listOfUsersPerRow(users, rowIndex + 1, itemsPerRow, match)}
</div>
));
};
//…
توابع listOfUsersPerRow و listOfRows به صورت دست به دست کار می کنند تا اطمینان حاصل شود که در هر سطر بیشتر از تعداد مشخص شده کارت نداریم. نکته بعدی که باید انجام شود استفاده از توابع برای ایجاد لیست کاربران به شرح زیر است:
//src/Users/UsersList.js
//…
const UsersList = ({ users, itemsPerRow = 2, match }) => (
<div className=”cards”>
<h3 className=”is-size-3 has-text-centered”>Users</h3>
{listOfRows(users, itemsPerRow, match)}
</div>
);
export default UsersList;
UsersList.css به صورت زیر ظاهر می شود:
/** src/Users/UsersList.css **/
.cards {
margin-left: 20px;
}
.columns {
margin-top: 0;
}
مرحله 5 – ایجاد نمای جزئیات کاربر
هنگامی که یک کارت کاربر از لیست کاربران کلیک می شود ، کارت تک کاربره تحت بخش جزئیات نمایش داده می شود. بیایید نحوه ساخت این مؤلفه را ببینیم.
فایل های زیر را در دیرکتوری src / Users ایجاد کنید:
$ touch UsersDetails.js UsersDetails.css
اکنون ، بیایید موارد زیر را به فایل UsersDetails.js اضافه کنیم:
// src/Users/UsersDetails.js
import React from ‘react’;
import UsersCard from ‘./UsersCard’;
const UsersDetails = ({ user, match }) => <div>
<h3 className=”is-size-3 has-text-centered”>Details</h3>
<UsersCard user={user} match={match} />
</div>;
export default UsersDetails;
مرحله 6 – ایجاد مؤلفه داشبورد
برای ساخت مؤلفه داشبورد ، UserList را نمایش می دهیم و هنگامی که یک کارت کلیک می شود ، بدون نیاز به لود مجدد صفحه ، جزئیات را در کنار صفحه نمایش می دهید.
بیایید ببینیم چگونه آن را عملی کنیم. یک فایل UsersDashboard.js را در فهرست کاربران ایجاد کنید:
$ touch UserDashboard.js
UserDashboard.js را ویرایش کنید تا به شرح زیر باشد:
// src/Users/UsersDashboard.js
import React from ‘react’;
import { Route } from ‘react-router-dom’;
import UsersList from ‘./UsersList’;
import UsersDetails from ‘./UsersDetails’;
const UsersDashboard = ({ users, user, match }) => (
<div className=”columns”>
<div className=”column”>
<UsersList users={users} match={match} />
</div>
<div className=”column”>
<Route
path={match.url + ‘/:id’}
render={props => (
<UsersDetails
user={
users.filter(
user => user.id === parseInt(props.match.params.id, 10)
)[0]
}
match={match}
/>
)}
/>
</div>
</div>
);
export default UsersDashboard;
در این بخش ، ما از مؤلفه Route ارائه شده توسط re-router-dom به عنوان یک جزء برای نمایش جزئیات خاص کاربر هنگام کلیک روی کارت ، استفاده کردیم.
حالا ، بیایید همه اینها را کنار هم بگذاریم. فایل src / App.js را به روز کنید تا به صورت زیر باشد:
// src/App.js
import React, { Component } from ‘react’;
import { Route, Redirect } from ‘react-router-dom’;
import Nav from ‘./Nav’;
import UsersList from ‘./Users/UsersList’;
import UsersDetails from ‘./Users/UsersDetails’;
import UsersDashboard from ‘./Users/UsersDashboard’;
import ‘./App.css’;
class App extends Component {
state = {
users: [
{
id: 39191,
avatar: ‘https://avatars0.githubusercontent.com/u/39191?v=4’,
name: ‘Paul Irish’,
username: ‘paulirish’,
followers: ’12k’,
following: ‘1k’,
repos: ‘1.5k’
},
//… other user data
]
};
render() {
return (
<div className=”App”>
<Nav />
<Route
path=”/dashboard”
render={props => (
<UsersDashboard users={this.state.users} {…props} />
)}
/>
<Redirect from=”/” to=”/dashboard”/>
<Redirect from=”/users” to=”/dashboard”/>
</div>
);
}
}
export default App;
مرحله 7 – تنظیم مسیریابی پاسخگو
وقتی کاربران از این برنامه بازدید می کنند ، صرف نظر از اندازه صفحه نمایش ، از این منظر و عملکرد مشابه برخوردار می شوند. در برنامه های تمام عیار ، بهتر است به کاربران تجربیاتی ارائه دهند که می توانند از آنها به درستی استفاده کنند. یکی از راه های انجام این کار ، ارائه خدماتی به آنهاست که با اندازه دقیق دستگاه آنها مطابقت دارند. اکنون می خواهیم به چگونگی انجام این کار در برنامه خود نگاهی بیندازیم.
هنگام بازدید از برنامه بر روی صفحه نمایش پهن ، کاربر به مسیر /dashboard برنامه هدایت می شود و هنگام مشاهده بر روی صفحه نمایش کوچکتر ، کاربر به مسیر /users برنامه هدایت می شود. بیایید ببینیم چگونه این کار را انجام دهیم.
فایل src / App.js را به روز کنید تا به این صورت باشد:
// src/App.js
import React, { Component } from ‘react’;
import { Route, Switch, Redirect } from ‘react-router-dom’;
import Media from ‘react-media’;
import Nav from ‘./Nav’;
import UsersList from ‘./Users/UsersList’;
import UsersDetails from ‘./Users/UsersDetails’;
import UsersDashboard from ‘./Users/UsersDashboard’;
import ‘./App.css’;
class App extends Component {
//set application state
[…]
render() {
return (
<div className=”App”>
<Nav />
<Media query=”(max-width: 599px)”>
{matches =>
matches ? (
<Switch>
<Route
exact
path=”/users”
render={props => (
<UsersList users={this.state.users} {…props} />
)}
/>
<Route
path=”/users/:id”
render={props => (
<UsersDetails
user={
this.state.users.filter(
user =>
user.id === parseInt(props.match.params.id, 10)
)[0]
}
{…props}
/>
)}
/>
<Redirect from=”/” to=”/users”/>
<Redirect from=”/dashboard” to=”/users”/>
</Switch>
)
[…]
در این بخش از مؤلفه media برای بررسی اندازه صفحه نمایش استفاده می کنیم. اگر عرض صفحه نمایش از 599 پیکسل کمتر باشد ، آنچه را که می خواهیم برای مسیرهای مختلف نمایش داده شود تعیین می کنیم و همچنین مسیرهای / و /dashboard را به مسیر /users تغییر می دهیم.
اگر اندازه صفحه نمایش از پیکسل بیشتر باشد ، پیش می رویم و داشبورد کامل کاربر را مشابه قبل، نمایش می دهیم:
// src/App.js
[…]
: (
<Switch>
<Route
path=”/dashboard”
render={props => (
<UsersDashboard users={this.state.users} {…props} />
)}
/>
<Redirect from=”/” to=”/dashboard”/>
<Redirect from=”/users” to=”/dashboard”/>
</Switch>
)
}
</Media>
</div>
);
}
}
export default App;
در این مرحله ، می بینیم که بهتر است از مسیرهای مختلف بر اساس اندازه صفحه نمایش ، به جای استفاده از درخواست های رسانه استفاده کنیم ، زیرا اکنون می توانید بر اساس اندازه دستگاه های خود ، بخش های ویژه ای را به کاربران ارائه دهید.
نتیجه
در این مقاله ، ما مقدمه ای برای مسیریابی مبتنی بر مؤلفه با React و نحوه اجرای رندر مشروط در برنامه های React را دیدیم. در اینجا پیوندی به منبع کامل Github وجود دارد. حتما در بخش نظرات، کامنت و پیشنهادات خود را بگذارید.
از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :
استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18
تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو
تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL
یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL
به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام
نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js
نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت
یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular
اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت
ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form
نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade
استفاده از ویژوال استودیو از راه دور – احراز هویت API با JSON Web Tokens و Passport
راه اندازی یک پروژه React با Parcel – ایجاد Swiper مانند Netflix را در Vue
ساختن یک ربات تلگرام با Laravel و BotMan – استفاده از map، filter، و reduce در جاوااسکریپت
چگونه می توان موتور جستجوی زمان واقعی را با Vue – ساختن سیستم مستندات (Documentation) با Vue و VuePress
استفاده از اشتراک زنده با کد ویژوال استودیو – ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React
شروع عملی GraphQL با Node.js و Express – ساخت یک برنامه آب و هوا در Django
نحوه نصب Discourse روی Ubuntu 18 – تأیید رمز عبور با استفاده از درخواست فرم Laravel
نحوه نصب MySQL در CentOS 8 – استفاده از پسوند PDO PHP برای انجام تراکنش MySQL
نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18 – نصب Linux، Nginx، MariaDB،PHP در Debian 10
کلمات کلیدی خرید سرور
خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان –
https://vpsgol.net/product/vps-germany/
https://vpsgol.net/product/vps-usa/
https://vpsgol.net/product/vps-france/
https://vpsgol.net/product/vps-canada/
https://vpsgol.net/product/vps-poland/
https://vpsgol.net/product/vps-netherlands/
https://vpsgol.net/product/vps-england/