د React.js په کارولو سره د ویب اپلیکیشن جوړولو په اړه لارښود

React.js یو مشهور فرنټ-اینډ پراختیایی کتابتون دی چې د متقابل کارونکي انٹرفیسونو (UIs) جوړولو لپاره کارول کیږي. د فیسبوک لخوا رامینځته شوی، React.js د ډیری لویو شرکتونو لخوا کارول شوی، پشمول د انسټاګرام، Airbnb، او WhatsApp. که تاسو د اغیزمن، ګړندي، او ځواب ویونکي ویب غوښتنلیکونو جوړولو په لټه کې یاست، React.js ممکن ستاسو لپاره سم انتخاب وي.

پنډاهولوان

مخکې له دې چې موږ پیل وکړو، ډاډ ترلاسه کړئ چې تاسو په خپل کمپیوټر کې Node.js او npm (نوډ پیکج مدیر) نصب کړی دی. Node.js او npm اړین دي ځکه چې دوی د React.js په کارولو سره د ویب غوښتنلیکونو پراختیا لپاره اړین چاپیریال او وسایل چمتو کوي.

لومړی ګام: د غبرګون پروژه پیل کول

د React.js د نوي اپلیکیشن جوړولو لپاره، موږ کولی شو د React اپلیکیشن جوړ کړو، د اپلیکیشن جوړولو وسیله چې لومړني ترتیب کموي. په خپل ټرمینل یا کمانډ پرامپټ کې لاندې کمانډ چل کړئ:

"لعنت"
npx د عکس العمل اپلیکیشن جوړ کړئ زما اپلیکیشن
زما اپلیکیشن سي ډي
د ماسپخین پیل
"

دا قومانده به د ``زما-ایپ`` په نوم یوه نوې ډایرکټرۍ جوړه کړي، ټول اړین انحصارونه به ډاونلوډ او نصب کړي، او د پراختیا سرور به پیل کړي. تاسو اوس کولی شئ یو براوزر پرانیزئ او ``http://localhost:3000` ته لاسرسی ومومئ ترڅو د ډیفالټ React.js اپلیکیشن وګورئ.

دوهم ګام: د فولډر جوړښت

راځئ چې د فولډر جوړښت ته یو نظر واچوو چې د Create React App لخوا رامینځته شوی دی:

"
زما اپلیکیشن/
├── نوډ_ماډولونه/
├── عامه/
│ └── انډیکس. ایچ ټي ایم ایل
└── د نوم لیکنې/
├── اپلیکېشن سي ایس ایس
├── اپ.جي.ایس
├── اپ.ټیسټ.جي ایس
├── انډیکس.سي ایس ایس
├── انډیکس.جي ایس
└── لوګو.svg
"

- `node_modules/`: ستاسو د پروژې ټول انحصارونه لري.
– `public/`: جامد فایلونه لري، په شمول د `index.html` کوم چې د اپلیکیشن د ننوتلو نقطه ده.
– `src/`: چیرې چې تاسو به خپل ډیری وخت تیر کړئ. د React اجزا، CSS فایلونه، او نور شتمنۍ لري.

دریم ګام: د غیر ضروري فایلونو حذف کول

د یوې پاکې پاڼې سره پیل کولو لپاره، راځئ چې ځینې غیر ضروري فایلونه حذف کړو. د `src/` فولډر دننه `logo.svg` او `App.test.js` حذف کړئ. بیا، `App.css` او `index.css` پرانیزئ، د پاک سټایل شیټ سره پیل کولو لپاره د دوی دننه ټول CSS کوډ حذف کړئ.

څلورم ګام: ستاسو د لومړۍ برخې جوړول

React.js د اجزاو پر بنسټ دی. اجزا ستاسو د ویب اپلیکیشن د جوړولو بلاکونه دي. راځئ چې `App.js` تعدیل کړو ترڅو زموږ لومړی جز جوړ کړو.

`src/App.js` پرانیزئ او د لاندې کوډ سره یې بدل کړئ:

"`jsx
د 'react' څخه React واردول؛
واردول './App.css';

فعالیت اپلیکیشن () {
بیرته راستنیدل (

);
}

د صادراتو ډیفالټ اپلیکیشن؛
"

د JSX (جاوا سکریپټ XML) په کارولو سره د `App.js` دننه د عکس العمل کوډ پیل کړئ، کوم چې موږ ته اجازه راکوي چې په جاواسکریپټ کې د HTML په څیر ترکیب ولیکو. خپل بدلونونه خوندي کړئ او پایلې یې په خپل براوزر کې وګورئ.

پنځم ګام: د نویو برخو اضافه کول

اوس راځئ چې ځینې نوي اجزا اضافه کړو. د `src` فولډر دننه د `components` په نوم یو نوی فولډر جوړ کړئ. بیا د `components` فولډر کې د `HelloWorld.js` نوې فایل جوړ کړئ.

"`jsx
د 'react' څخه React واردول؛

فعالیت هیلو ورلډ() {
بیرته راستنیدل (

);
}

د صادراتو ډیفالټ هیلو ورلډ؛
"

`App.js` پرانیزئ او هغه `HelloWorld` برخه وارد کړئ چې موږ یې اوس جوړه کړې ده:

"`jsx
د 'react' څخه React واردول؛
واردول './App.css';
له './components/HelloWorld' څخه HelloWorld وارد کړئ؛

فعالیت اپلیکیشن () {
بیرته راستنیدل (

);
}

د صادراتو ډیفالټ اپلیکیشن؛
"

اوس، `App.js` په اصلي پاڼه کې `HelloWorld` جز وړاندې کوي.

شپږم ګام: د useState سره د حالت مدیریت اضافه کول

ری ایکټ د حالت اداره کولو لپاره خورا پیاوړي هکونه لري. راځئ چې زموږ غوښتنلیک ته یو څه حالت اضافه کړو. د مثال په توګه، راځئ چې یو کاونټر اضافه کړو چې هرکله چې تڼۍ کلیک شي زیاتیږي.

`HelloWorld.js` پرانیزئ او state او `useState` هک اضافه کړئ:

"`jsx
د 'react' څخه React، {useState } وارد کړئ؛

فعالیت هیلو ورلډ() {
const [شمېرنه، د شمېرنې ټاکل] = حالت (0) وکاروئ؛

د زیاتوالي شمېره = () => {
د شمېرنې تنظیم (شمېرنه + ۱)؛
}

بیرته راستنیدل (

);
}

د صادراتو ډیفالټ هیلو ورلډ؛
"

د ``count` حالت د 0 ارزښت سره پیل کیږي، او هر ځل چې تڼۍ کلیک شي، د ``incrementCount` فعالیت به دا ارزښت زیات کړي.

۷ ګام: سټایل کول اضافه کول

د سټایل کولو اضافه کولو لپاره، موږ کولی شو د `App.css` فایل کې CSS وکاروو یا موږ کولی شو د CSS-in-JS کتابتون لکه سټایل شوي اجزا وکاروو. راځئ چې د اوس لپاره د معیاري CSS سره پاتې شو.

`App.css` پرانیزئ او یو څه سټایل اضافه کړئ:

"سي ایس ایس"
.اپلیکیشن {
متن سیده کول: مرکز
}

.د اپلیکیشن سرلیک {
د شاليد رنګ: 282c34؛
لږ تر لږه لوړوالی: ۱۰۰vh؛
ښودنه: انعطاف؛
flex-direction: column;
align-items: مرکز;
justify-content: مرکز؛
د فونټ اندازه: کیلک (۱۰ پکس + ۲ ومن)؛
رنګ: سپین؛
}

تڼۍ {
پیډینګ: 10px 20px؛
منځنی - لوړ: 20PX؛
font-اندازه: 16px؛
}
"

اتم ګام: د ری ایکټ روټر سره روټینګ اضافه کول

زموږ په اپلیکیشن کې د مختلفو پاڼو ترمنځ نیویګیشن اضافه کولو لپاره، موږ کولی شو د React Router څخه کار واخلو. د لاندې کمانډ په چلولو سره React Router نصب کړئ:

"لعنت"
npm install react-router-dom
"

بیا، دوه نوي برخې جوړې کړئ: `Home.js` او `About.js` په `components` فولډر کې.

`کور.js`:
"`jsx
د 'react' څخه React واردول؛

فعالیت کور() {
بیرته راستنیدل (

);
}

د صادراتو ډیفالټ کور؛
"

`About.js`:
"`jsx
د 'react' څخه React واردول؛

فعالیت په اړه () {
بیرته راستنیدل (

);
}

د صادرولو ډیفالټ په اړه؛
"

بیا، `App.js` پرانیزئ او روټینګ تنظیم کړئ:

"`jsx
د 'react' څخه React واردول؛
د 'react-router-dom' څخه { براوزر روټر د روټر، روټ، لینک، سویچ په توګه وارد کړئ }؛
واردول './App.css';
له './components/HelloWorld' څخه HelloWorld وارد کړئ؛
له './components/Home' څخه کور وارد کړئ؛
د './components/About' څخه په اړه واردول؛

فعالیت اپلیکیشن () {
بیرته راستنیدل (

);
}

د صادراتو ډیفالټ اپلیکیشن؛
"

له دې سره، موږ په خپل اپلیکیشن کې د مختلفو پاڼو ترمنځ اساسي نیویګیشن اضافه کړی دی.

تړل

دا د React.js په کارولو سره د ویب اپلیکیشن جوړولو لپاره یو اساسي لارښود دی. موږ د پروژې تنظیم، د اجزاو جوړول، د حالت مدیریت، سټایل کول، او روټینګ پوښلي دي. React.js یو بډایه ایکوسیستم لري چې ډیری کتابتونونه او وسایل لري چې کولی شي تاسو سره د ډیرو پیچلو ویب اپلیکیشنونو په جوړولو کې مرسته وکړي.

ښه بخت، او زه هیله لرم چې دا ټیوټوریل به تاسو سره د React.js سره ستاسو د سفر پیل کولو کې مرسته وکړي!