React.js کا استعمال کرتے ہوئے ویب ایپلیکیشن بنانے کا سبق

React.js ایک مشہور فرنٹ اینڈ ڈویلپمنٹ لائبریری ہے جو انٹرایکٹو یوزر انٹرفیس (UIs) بنانے کے لیے استعمال ہوتی ہے۔ Facebook کی طرف سے تیار کردہ، React.js کو کئی بڑی کمپنیاں استعمال کرتی رہی ہیں، بشمول Instagram، Airbnb، اور WhatsApp۔ اگر آپ موثر، تیز، اور ریسپانسیو ویب ایپلیکیشنز بنانا چاہتے ہیں، تو React.js آپ کے لیے صحیح انتخاب ہو سکتا ہے۔

Pendahuluan

اس سے پہلے کہ ہم شروع کریں، یقینی بنائیں کہ آپ کے کمپیوٹر پر Node.js اور npm (Node Package Manager) انسٹال ہیں۔ Node.js اور npm ضروری ہیں کیونکہ یہ React.js کا استعمال کرتے ہوئے ویب ایپلیکیشنز تیار کرنے کے لیے درکار ماحول اور ٹولز فراہم کرتے ہیں۔

مرحلہ 1: ری ایکٹ پروجیکٹ کو شروع کرنا

ایک نئی React.js ایپلیکیشن بنانے کے لیے، ہم Create React ایپ استعمال کر سکتے ہیں، ایک ایپلیکیشن تخلیق کرنے والا ٹول جو ابتدائی کنفیگریشن کو کم سے کم کرتا ہے۔ اپنے ٹرمینل یا کمانڈ پرامپٹ میں درج ذیل کمانڈ کو چلائیں:

''بش
npx create-react-app my-app
سی ڈی مائی ایپ
npm اسٹارٹ
“۔

یہ کمانڈ 'my-app' کے نام سے ایک نئی ڈائرکٹری بنائے گی، تمام ضروری انحصار کو ڈاؤن لوڈ اور انسٹال کرے گی، اور ڈویلپمنٹ سرور شروع کرے گی۔ اب آپ ایک براؤزر کھول سکتے ہیں اور ڈیفالٹ React.js ایپلیکیشن دیکھنے کے لیے `http://localhost:3000` تک رسائی حاصل کر سکتے ہیں۔

مرحلہ 2: فولڈر کا ڈھانچہ

آئیے اس فولڈر کے ڈھانچے پر ایک نظر ڈالیں جسے Create React ایپ نے بنایا ہے:

“۔
my-app/
├── node_modules/
├── عوامی/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
“۔

- `node_modules/`: آپ کے تمام پروجیکٹ انحصار پر مشتمل ہے۔
– `عوامی/`: جامد فائلوں پر مشتمل ہے، بشمول `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` کھولیں اور اسے درج ذیل کوڈ سے تبدیل کریں:

"jsx
'رد عمل' سے رد عمل درآمد کریں؛
درآمد کریں './app.css'؛

فنکشن ایپ() {
واپس (

);
}

ڈیفالٹ ایپ برآمد کریں؛
“۔

JSX (JavaScript XML) کا استعمال کرتے ہوئے `App.js` کے اندر React کوڈ کو شروع کریں، جو ہمیں JavaScript کے اندر HTML جیسا نحو لکھنے کی اجازت دیتا ہے۔ اپنی تبدیلیاں محفوظ کریں اور اپنے براؤزر میں نتائج دیکھیں۔

مرحلہ 5: نئے اجزاء شامل کرنا

اب کچھ نئے اجزاء شامل کرتے ہیں۔ 'src' فولڈر کے اندر ایک نیا فولڈر بنائیں جسے 'اجزاء' کہا جاتا ہے۔ پھر 'اجزاء' فولڈر میں ایک نئی فائل 'HelloWorld.js' بنائیں۔

"jsx
'رد عمل' سے رد عمل درآمد کریں؛

فنکشن ہیلو ورلڈ () {
واپس (

);
}

ایکسپورٹ ڈیفالٹ ہیلو ورلڈ؛
“۔

'App.js' کھولیں اور 'HelloWorld' جز کو درآمد کریں جسے ہم نے ابھی بنایا ہے:

"jsx
'رد عمل' سے رد عمل درآمد کریں؛
درآمد کریں './app.css'؛
'./components/HelloWorld' سے HelloWorld درآمد کریں؛

فنکشن ایپ() {
واپس (

);
}

ڈیفالٹ ایپ برآمد کریں؛
“۔

اب، 'App.js' مرکزی صفحہ پر 'HelloWorld' جز کو رینڈر کرتا ہے۔

مرحلہ 6: اسٹیٹ مینجمنٹ کو یوز اسٹیٹ کے ساتھ شامل کرنا

ری ایکٹ میں ریاست کے انتظام کے لیے بہت طاقتور ہکس ہیں۔ آئیے اپنی درخواست میں کچھ ریاست شامل کریں۔ مثال کے طور پر، آئیے ایک کاؤنٹر شامل کریں جو ہر بار بٹن پر کلک کرنے پر بڑھتا ہے۔

'HelloWorld.js' کھولیں اور ریاست اور 'useState' ہک شامل کریں:

"jsx
React درآمد کریں، { useState } 'react' سے؛

فنکشن ہیلو ورلڈ () {
const [count, setCount] = useState(0)؛

const incrementCount = () => {
سیٹ کاؤنٹ (گنتی + 1)؛
}

واپس (

);
}

ایکسپورٹ ڈیفالٹ ہیلو ورلڈ؛
“۔

'count' حالت کو 0 کی قدر کے ساتھ شروع کیا جاتا ہے، اور جب بھی بٹن پر کلک کیا جائے گا، 'incrementCount' فنکشن اس قدر کو بڑھا دے گا۔

مرحلہ 7: اسٹائل شامل کرنا

اسٹائل کو شامل کرنے کے لیے، ہم `App.css` فائل میں CSS استعمال کر سکتے ہیں یا ہم CSS-in-JS لائبریری جیسے Styled-components استعمال کر سکتے ہیں۔ آئیے ابھی کے لیے معیاری CSS کے ساتھ قائم رہیں۔

'App.css' کھولیں اور کچھ اسٹائل شامل کریں:

سی ایس ایس
ایپ {
متن کی سیدھ: مرکز
}

ایپ ہیڈر {
پس منظر کا رنگ: 282c34؛
کم از کم اونچائی: 100vh؛
ڈسپلے: فلیکس
flex-direction: column;
align-items: مرکز؛
justify-content: مرکز؛
فونٹ سائز: کیلک (10px + 2vmin)؛
رنگ: سفید
}

بٹن {
بھرتی: 10PX 20PX؛
مارجن - اوپر: 20Px؛
فونٹ سائز: 16px؛
}
“۔

مرحلہ 8: ری ایکٹ راؤٹر کے ساتھ روٹنگ شامل کرنا

ہماری درخواست میں مختلف صفحات کے درمیان نیویگیشن شامل کرنے کے لیے، ہم React Router استعمال کر سکتے ہیں۔ درج ذیل کمانڈ کو چلا کر ری ایکٹ راؤٹر انسٹال کریں:

''بش
npm install react-router-dom
“۔

پھر، دو نئے اجزاء بنائیں: 'components' فولڈر میں 'Home.js' اور 'About.js'۔

'Home.js':
"jsx
'رد عمل' سے رد عمل درآمد کریں؛

فنکشن ہوم() {
واپس (

);
}

ڈیفالٹ ہوم برآمد کریں
“۔

'About.js':
"jsx
'رد عمل' سے رد عمل درآمد کریں؛

فنکشن کے بارے میں () {
واپس (

);
}

ایکسپورٹ ڈیفالٹ کے بارے میں
“۔

اگلا، 'App.js' کھولیں اور روٹنگ ترتیب دیں:

"jsx
'رد عمل' سے رد عمل درآمد کریں؛
درآمد کریں { BrowserRouter as Router, Route, Link, Switch} 'react-router-dom' سے؛
درآمد کریں './app.css'؛
'./components/HelloWorld' سے HelloWorld درآمد کریں؛
'./components/Home' سے گھر درآمد کریں؛
'./components/About' سے کے بارے میں درآمد کریں؛

فنکشن ایپ() {
واپس (

);
}

ڈیفالٹ ایپ برآمد کریں؛
“۔

اس کے ساتھ، ہم نے اپنی درخواست میں مختلف صفحات کے درمیان بنیادی نیویگیشن کو شامل کیا ہے۔

بند کرنا

React.js کا استعمال کرتے ہوئے ویب ایپلیکیشن بنانے کے لیے یہ ایک بنیادی ٹیوٹوریل ہے۔ ہم نے پروجیکٹ سیٹ اپ، اجزاء کی تخلیق، ریاستی انتظام، اسٹائلنگ، اور روٹنگ کا احاطہ کیا ہے۔ React.js کے پاس متعدد لائبریریوں اور ٹولز کے ساتھ ایک بھرپور ماحولیاتی نظام ہے جو آپ کو مزید پیچیدہ ویب ایپلیکیشنز بنانے میں مدد کر سکتے ہیں۔

گڈ لک، اور مجھے امید ہے کہ یہ ٹیوٹوریل آپ کو React.js کے ساتھ اپنے سفر کو شروع کرنے میں مدد کرے گا!