React.js استعمال ڪندي ويب ايپليڪيشن ٺاهڻ تي سبق

React.js هڪ مشهور فرنٽ اينڊ ڊولپمينٽ لائبريري آهي جيڪا انٽرايڪٽو يوزر انٽرفيس (UIs) ٺاهڻ لاءِ استعمال ٿيندي آهي. فيس بڪ پاران تيار ڪيل، React.js کي انسٽاگرام، Airbnb، ۽ WhatsApp سميت ڪيترين ئي وڏين ڪمپنين پاران استعمال ڪيو ويو آهي. جيڪڏهن توهان اثرائتي، تيز، ۽ جوابدار ويب ايپليڪيشنون ٺاهڻ چاهيو ٿا، ته React.js توهان لاءِ صحيح انتخاب ٿي سگهي ٿو.

پنڊال

شروع ڪرڻ کان اڳ، پڪ ڪريو ته توهان جي ڪمپيوٽر تي Node.js ۽ npm (نوڊ پيڪيج مئنيجر) انسٽال ٿيل آهن. Node.js ۽ npm ضروري آهن ڇاڪاڻ ته اهي React.js استعمال ڪندي ويب ايپليڪيشنون ٺاهڻ لاءِ گهربل ماحول ۽ اوزار فراهم ڪن ٿا.

قدم 1: ري ايڪٽ پروجيڪٽ کي شروع ڪرڻ

هڪ نئين React.js ايپليڪيشن ٺاهڻ لاءِ، اسان Create React App استعمال ڪري سگهون ٿا، هڪ ايپليڪيشن ٺاهڻ وارو اوزار جيڪو شروعاتي ترتيب کي گھٽ ۾ گھٽ ڪري ٿو. پنهنجي ٽرمينل يا ڪمانڊ پرامپٽ ۾ هيٺ ڏنل ڪمانڊ هلايو:

"ڀڄڻ
npx ٺاهيو-رد عمل-ايپ منهنجي-ايپ
سي ڊي منهنجي ايپ
اين پي ايم جي شروعات
“

هي ڪمانڊ `my-app` نالي هڪ نئين ڊاريڪٽري ٺاهيندو، سڀني ضروري انحصارن کي ڊائون لوڊ ۽ انسٽال ڪندو، ۽ ڊولپمينٽ سرور شروع ڪندو. هاڻي توهان هڪ برائوزر کولي سگهو ٿا ۽ ڊفالٽ React.js ايپليڪيشن ڏسڻ لاءِ `http://localhost:3000` تائين رسائي ڪري سگهو ٿا.

قدم 2: فولڊر جي جوڙجڪ

اچو ته فولڊر جي جوڙجڪ تي هڪ نظر وجهون جيڪو Create React ايپ ٺاهيو آهي:

“
منهنجي ايپ/
├── نوڊ_ماڊيولز/
├── عوامي/
│ └── انڊيڪس.html
└── ايس آر سي/
├── ايپ سي ايس ايس
├── ايپ.جي ايس
├── ايپ ٽيسٽ.جي ايس
├── انڊيڪس.سي ايس ايس
├── انڊيڪس.جي ايس
└── لوگو.svg
“

- `node_modules/`: توهان جي سڀني پروجيڪٽ انحصارن تي مشتمل آهي.
– `public/`: جامد فائلن تي مشتمل آهي، جنهن ۾ `index.html` شامل آهي جيڪو ايپليڪيشن جو داخلا پوائنٽ آهي.
– `src/`: جتي توهان پنهنجو گهڻو وقت گذاريندا. React اجزاء، CSS فائلون، ۽ ٻيا اثاثا شامل آهن.

قدم 3: غير ضروري فائلن کي ختم ڪرڻ

صاف سليٽ سان شروع ڪرڻ لاءِ، اچو ته ڪجھ غير ضروري فائلون ڊليٽ ڪريون. `src/` فولڊر اندر `logo.svg` ۽ `App.test.js` کي ڊليٽ ڪريو. پوءِ، `App.css` ۽ `index.css` کوليو، انهن اندر موجود سڀني CSS ڪوڊ کي ڊليٽ ڪندي هڪ صاف اسٽائل شيٽ سان شروع ڪريو.

قدم 4: پنهنجو پهريون جزو ٺاهڻ

React.js ڪمپونينٽ تي ٻڌل آهي. ڪمپونينٽ توهان جي ويب ايپليڪيشن جا بلڊنگ بلاڪ آهن. اچو ته پنهنجو پهريون ڪمپونينٽ ٺاهڻ لاءِ `App.js` کي تبديل ڪريون.

`src/App.js` کوليو ۽ ان کي هيٺ ڏنل ڪوڊ سان تبديل ڪريو:

"`جي ايس ايڪس
'رد عمل' مان رد عمل درآمد ڪريو؛
درآمد ڪريو './App.css'؛

فنڪشن ايپ () {
واپسي (

);
}

ڊفالٽ ايپ برآمد ڪريو؛
“

JSX (جاوا اسڪرپٽ XML) استعمال ڪندي `App.js` اندر React ڪوڊ کي شروع ڪريو، جيڪو اسان کي JavaScript اندر HTML جهڙو نحو لکڻ جي اجازت ڏئي ٿو. پنھنجيون تبديليون محفوظ ڪريو ۽ پنھنجي برائوزر ۾ نتيجا ڏسو.

قدم 5: نوان جزا شامل ڪرڻ

هاڻي اچو ته ڪجهه نوان ڪمپونينٽ شامل ڪريون. `src` فولڊر اندر `components` نالي هڪ نئون فولڊر ٺاهيو. پوءِ `components` فولڊر ۾ `HelloWorld.js` هڪ نئين فائل ٺاهيو.

"`جي ايس ايڪس
'رد عمل' مان رد عمل درآمد ڪريو؛

فنڪشن هيلو ورلڊ() {
واپسي (

);
}

ڊفالٽ ايڪسپورٽ هيلو ورلڊ؛
“

`App.js` کوليو ۽ `HelloWorld` جزو درآمد ڪريو جيڪو اسان هاڻي ٺاهيو آهي:

"`جي ايس ايڪس
'رد عمل' مان رد عمل درآمد ڪريو؛
درآمد ڪريو './App.css'؛
'./components/HelloWorld' مان HelloWorld درآمد ڪريو؛

فنڪشن ايپ () {
واپسي (

);
}

ڊفالٽ ايپ برآمد ڪريو؛
“

هاڻي، `App.js` مکيه صفحي تي `HelloWorld` جزو کي پيش ڪري ٿو.

قدم 6: useState سان اسٽيٽ مئنيجمينٽ شامل ڪرڻ

ري ايڪٽ ۾ اسٽيٽ مينيجمينٽ لاءِ تمام طاقتور هُڪ آهن. اچو ته پنهنجي ايپليڪيشن ۾ ڪجهه اسٽيٽ شامل ڪريون. مثال طور، اچو ته هڪ ڪائونٽر شامل ڪريون جيڪو هر بٽڻ تي ڪلڪ ڪرڻ سان وڌي ٿو.

`HelloWorld.js` کوليو ۽ اسٽيٽ ۽ `useState` ٿلهو شامل ڪريو:

"`جي ايس ايڪس
'react' مان React، {useState } درآمد ڪريو؛

فنڪشن هيلو ورلڊ() {
ڪانسٽ [ڳڻپ، سيٽ ڪائونٽ] = استعمال جي حالت (0)؛

مسلسل واڌارو ڳڻپ = () => {
سيٽ ڳڻپ (ڳڻپ + 1)؛
}

واپسي (

);
}

ڊفالٽ ايڪسپورٽ هيلو ورلڊ؛
“

`ڳڻپ` حالت 0 جي قدر سان شروع ڪئي ويندي آهي، ۽ هر ڀيري بٽڻ تي ڪلڪ ڪيو ويندو آهي، `incrementCount` فنڪشن هن قدر کي وڌائيندو.

قدم 7: اسٽائلنگ شامل ڪرڻ

اسٽائلنگ شامل ڪرڻ لاءِ، اسان `App.css` فائل ۾ CSS استعمال ڪري سگھون ٿا يا اسان styled-components وانگر CSS-in-JS لائبريري استعمال ڪري سگھون ٿا. اچو ته هاڻي لاءِ معياري CSS سان گڏ رهون.

`App.css` کوليو ۽ ڪجهه اسٽائلنگ شامل ڪريو:

"سي ايس ايس"
.ايپ {
لکت
}

.ايپ هيڊر {
پس منظر جو رنگ: 282c34؛
گھٽ ۾ گھٽ اوچائي: 100vh؛
ڏيکاري: فڪسڪس؛
flex-direction: column;
ترتيب وار شيون: مرڪز ؛
justify-content: مرڪز؛
فونٽ سائيز: ڪيلڪ (10px + 2vmin)؛
رنگ: اڇو؛
}

بٽڻ {
پيڊنگ: 10px 20px؛
مارجن-چوٽي: 20px؛
فونٽ جو قد: 16px؛
}
“

قدم 8: ري ايڪٽ روٽر سان روٽنگ شامل ڪرڻ

اسان جي ايپليڪيشن ۾ مختلف صفحن جي وچ ۾ نيويگيشن شامل ڪرڻ لاءِ، اسان React Router استعمال ڪري سگھون ٿا. هيٺ ڏنل حڪم هلائي React Router انسٽال ڪريو:

"ڀڄڻ
npm انسٽال ڪريو ري ايڪٽ-روٽر-ڊوم
“

پوءِ، ٻه نوان جزا ٺاهيو: `Home.js` ۽ `About.js` `components` فولڊر ۾.

`Home.js`:
"`جي ايس ايڪس
'رد عمل' مان رد عمل درآمد ڪريو؛

فنڪشن هوم() {
واپسي (

);
}

ايڪسپورٽ ڊفالٽ هوم؛
“

`About.js`:
"`جي ايس ايڪس
'رد عمل' مان رد عمل درآمد ڪريو؛

فنڪشن بابت () {
واپسي (

);
}

برآمد ڊفالٽ بابت؛
“

اڳيون، `App.js` کوليو ۽ روٽنگ سيٽ اپ ڪريو:

"`جي ايس ايڪس
'رد عمل' مان رد عمل درآمد ڪريو؛
'react-router-dom' مان { BrowserRouter کي روٽر، روٽ، لنڪ، سوئچ طور } درآمد ڪريو؛
درآمد ڪريو './App.css'؛
'./components/HelloWorld' مان HelloWorld درآمد ڪريو؛
'./components/Home' مان گهر درآمد ڪريو؛
'./components/About' مان اٽڪل درآمد ڪريو؛

فنڪشن ايپ () {
واپسي (

);
}

ڊفالٽ ايپ برآمد ڪريو؛
“

ان سان گڏ، اسان پنهنجي ايپليڪيشن ۾ مختلف صفحن جي وچ ۾ بنيادي نيويگيشن شامل ڪئي آهي.

پينوٽ اپ

اهو React.js استعمال ڪندي ويب ايپليڪيشن ٺاهڻ لاءِ هڪ بنيادي سبق آهي. اسان پروجيڪٽ سيٽ اپ، ڪمپونينٽ ٺاهڻ، اسٽيٽ مئنيجمينٽ، اسٽائلنگ، ۽ روٽنگ کي ڍڪيو آهي. React.js وٽ ڪيتريون ئي لائبريريون ۽ اوزارن سان گڏ هڪ امير ايڪو سسٽم آهي جيڪو توهان کي وڌيڪ پيچيده ويب ايپليڪيشن ٺاهڻ ۾ مدد ڪري سگهي ٿو.

نيڪ تمنائون، ۽ مون کي اميد آهي ته هي سبق توهان کي React.js سان توهان جي سفر جي شروعات ڪرڻ ۾ مدد ڪندو!