خواندن ۵ دقیقه·۳ سال پیش

2. Question and Answers about login page with React JS

تو این پست می‌خواهیم صفحه سوالات متداول لاگین رو با ری‌اکت بنویسیم.

صفحه سوالات متدوال یا همون Question and Answers صفحه‌ای که به سوالاتی که احتمالا یک کاربر حین کار با سایت برمیخوره رو جواب داده؛ سوالاتی مثل رمز عبورم رو فراموش کردم یا نمی دونم نام کاربریم چی هست و ... .

خب این پست هم چهار مرحله داره که به ترتیب زیر هستش :

ساخت دیتا (data.js)
ساخت صفحه سوال و جواب (Question.js)
ساخت صفحه اصلی (App.js)
استایل دهی به صفحات (index.css)

قبل از اینکه نحوه‌ی ساخت این چهار مرحله رو بگم باید یه برنامه ری‌اکتی بسازیم به این ترتیب که تو ترمینال در آدرس موردنظر بنویسیم:

npm create-react-app app-name 
و یا میتونی از این استفاده کنی
npx create-react-app app-name

1. ساخت data.js

تو قسمت src برنامه فایل data.js رو میسازیم و توش دیتاهای برنامه رو مینویسیم.

دیتای برنامه به‌صورت آرایه‌ای از آبجکت‌‌ها تعریف میشه به اینصورتکه هر آبجکت ویژگی‌هایی چون id, title, info داره.

data.js

const questions = [
{
id: 1,
title: 'Is my account set up yet?',
info: 'To verify if your user account is set-up, you may try to logon using the username and password provided to you via email from Checkpoint Systems.  This username and password is provided upon approval. If you did not receive an email with a username and password then your account may not be setup.',
},
{
id: 2,
title: 'What should I do if I forget my password?',
info: 'Enter your username in the Username entry box provided on the login screen. Select the Forgot your password? link.  A dialog box will be displayed asking if you “Are sure you would like to reset your password”.  Select yes, your password will be emailed to you at the email naddress you provided when you were setup as a user.',
},
{
id: 3,
title: 'What should I do if I forget my Username?',
info: 'Please send an email or phone your Checkpoint Customer Service Representative and state that you have lost or forgotten your username and password.  Your password will be reset and you will receive an email with your username and password at the email address you provided to Checkpoint when you were setup as a user.  Please provide your name, organization, phone number and role when corresponding to Customer Support.',
},
{
id: 4,
title: ' How do I know the site has a secure connection?',
info: 'CheckNet is a VeriSign secure site.  To verify CheckNet is the site you intended to access in a secure fashion prior to sending any secure information select the VeriSign Logo.  You will be taken to a VeriSign server that will verify the security and authenticity of checknet.checkpt.com.  Ensure the Name, Server ID and Status information are correct and owned by Checkpoint Systems, Inc.',
},
export default questions

2. ساخت صفحه سوال و جواب (Question.js)

تو قسمت src برنامه فایل Question.js رو میسازیم و react-icons رو از طریق ترمینال در مسیر src برنامه با دستور زیر نصب می‌کنیم:

npm install react-icons

و بعد پکیج‌های زیر رو به برنامه import میکنیم:

import React, { useState } from 'react';
import { AiOutlineMinus, AiOutlinePlus } from 'react-icons/ai';

یک arrow function با دو proprty (ویژگی) title , info داخل متغیر Question تعریف میکنیم و این متغیر رو اکسپورت میکنیم:

const Question = ({title , info}) => {

}
export default Question;

هر کدی که از این به بعد نوشته میشه داخل همین متغیر Question تعریف میکنیم.

وقتی که روی دکمه‌ی منفی یا کوچک کننده کلیک میکنی جواب‌ها (پاراگراف p) رو ناپدید میکنه و وقتی روی دکمه + کلیک میکنی جواب‌هارو (پاراگراف یا p) نشون میده. بنابراین یه هوک usestate بانام showinfo مینویسیم که مقدار اولیه‌اش false هست و وقتی false یعنی باید دکمه + رو نشون بده و وقتی true هست باید دکمه‌ی - رو نشون بده.

const [showInfo , setShowInfo] = useState(false)
return <article className=&quotquestion&quot>
<header>
    <h4>{title}</h4>
<button className=&quotbtn&quot ={()=> setShowInfo(!showInfo)}>
    {showInfo ? <AiOutlineMinus/> : <AiOutlinePlus />}
</button>
</header>
{ showInfo && <p> {info} </p>}
</article>

3. ساخت صفحه اصلی (App.js)

دیتا که شامل سوالات و جواب ها هستند رو از طریق هوک usestate تو متغیر questions میریزیم و بعد این دیتا که الان questions هستش رو map میکنیم و اطلاعات questions رو به صفحه Question.js ، (SingleQuestion) از طریقی proprtyها برمیگردونیم.

import React, { useState } from 'react';
import data from './datas';
import SingleQuestion from './Question';

function App() {
    const [qustions , setQuestions] = useState(data);
    return <main>
    <div className=&quotcontainer&quot>
        <h2 className=&quotQuestion-Answer&quot >
            <strong>question and answers about login </strong
        </h2>
        <section className=&quotinfo&quot>
       {
          qustions.map((qustions) => {
          return <SingleQuestion key={qustions.id} {...qustions} />
        })
       }
       </section>
       </div>
    </main>
}
export default App;

4. استایل دهی به صفحات (index.css)

و در آخر فایل index.css رو ساخته و صفحه رو استایل دهی میکنیم:

:root {
--clr-grey-1: hsl(209, 61%, 16%);
--clr-grey-3: hsl(209, 34%, 30%);
--clr-grey-5: hsl(210, 22%, 49%);
--clr-yasi: #b798b9;
--clr-tosi-roshan1: #f5f5f5;
--clr-red-special: #b4345c;
--clr-grey-special: #eae6eb;
--clr-red-dark: hsl(360, 67%, 44%);
--spacing: 0.1rem;
--radius: 0.25rem;
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
--max-width: 1170px;
--fixed-width: 920px;
}
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: var(--clr-yasi);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none; 
} 
h1, h2, h3, h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p {
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1, h2, h3, h4 {
line-height: 1;
}
}
h2.Question-Answer {
color:#0d2a86;
font-family:cursive;
font-size: 40px;
text-align: center;
}
/*  global classes */
/* section */
.section {
width: 90vw;
margin: 0 auto;
max-width: var(--max-width);
}
@media screen and (min-width: 992px) {
.section {
width: 95vw;
}
}
main {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 90vw;
margin: 5rem auto;
background: var(--clr-tosi-roshan1);
border-radius: var(--radius);
padding: 2.5rem 2rem;
max-width: var(--fixed-width);
display: grid;
gap: 1rem 2rem;
}
.container h3 {
line-height: 1.2;
font-weight: 500;
}
@media screen and (min-width: 992px) {
.container {
display: grid;
grid-template-columns: 250px 1fr;
}
}
.question {
padding: 1rem 1.5rem;
border: 2px solid var(--clr-grey-special);
margin-bottom: 1rem;
border-radius: var(--radius);
box-shadow: var(--light-shadow);
}
.question h4 {
text-transform: none;
line-height: 1.5;
}
.question p {
color: var(--clr-grey-3);
margin-bottom: 0;
margin-top: 0.5rem;
}
.question header {
display: flex;
justify-content: space-between;
align-items: center;
}
.question header h4 {
margin-bottom: 0;
}
.btn {
background: transparent;
border-color: transparent;
width: 2rem;
height: 2rem;
background: var(--clr-grey-special);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--clr-red-special);
cursor: pointer;
margin-left: 1rem;
align-self: center;
min-width: 2rem;
}

و تامام حالا کافیه تو ترمینال تو مسیر src پروژه بنویسین npm strat

Be happy and enjoy the Life 8)

react js js ری‌اکت‌ جی اس جاوا اسکریپت

سمیرا آرام

برنامه نویس فرانت اند - علاقه مند به هنر و سنتور - علاقه مند به سفر

شاید از این پست‌ها خوشتان بیاید