React میں شروعاتی گائیڈ: صفر سے پہلا یوزر انٹرفیس بنائیں

React ایک جاوا اسکرپٹ لائبریری ہے جو یوزر انٹرفیس بنانے کے لیے استعمال ہوتی ہے۔ اسے فیس بک نے تیار اور برقرار رکھا ہے، اور یہ فرنٹ اینڈ ڈویلپمنٹ میں سب سے زیادہ مقبول ٹولز میں سے ایک بن گیا ہے۔ یہ گائیڈ آپ کو صفر سے شروع کرتے ہوئے، React کے بنیادی تصورات کو مرحلہ وار سمجھنے اور ایک سادہ یوزر انٹرفیس بنانے میں مدد کرے گی۔

React کا انتخاب کیوں کریں؟

React کے درج ذیل فوائد ہیں:

کمپوننٹائزیشن: React یوزر انٹرفیس کو آزاد، دوبارہ استعمال کے قابل کمپوننٹس میں تقسیم کرتا ہے۔ اس سے کوڈ کو برقرار رکھنا اور سمجھنا آسان ہو جاتا ہے۔
اعلانیہ: React اعلانیہ پروگرامنگ اسٹائل استعمال کرتا ہے، جس کا مطلب ہے کہ آپ کو صرف یہ بتانا ہوتا ہے کہ آپ کیا پیش کرنا چاہتے ہیں، اور React خود بخود اپ ڈیٹس اور رینڈرنگ کو ہینڈل کرتا ہے۔
مؤثر: React ورچوئل DOM اور سمارٹ diff الگورتھم استعمال کرتا ہے، جو یوزر انٹرفیس کو مؤثر طریقے سے اپ ڈیٹ کرنے اور غیر ضروری رینڈرنگ کو کم کرنے کے قابل بناتا ہے۔
بڑی کمیونٹی سپورٹ: React کے پاس ایک بڑی کمیونٹی اور بھرپور ایکو سسٹم ہے، آپ کو ترقی میں مدد کے لیے بہت سارے ٹیوٹوریلز، لائبریریاں اور ٹولز مل سکتے ہیں۔
کراس پلیٹ فارم صلاحیت: React Native آپ کو React کا استعمال کرتے ہوئے مقامی موبائل ایپس (iOS اور Android) تیار کرنے کی اجازت دیتا ہے۔

تیاری

شروع کرنے سے پہلے، آپ کو اس بات کو یقینی بنانا ہوگا کہ آپ کے کمپیوٹر پر درج ذیل ٹولز انسٹال ہیں:

Node.js: Node.js ایک جاوا اسکرپٹ رن ٹائم ماحول ہے، جو React ڈویلپمنٹ ٹولز چلانے کے لیے استعمال ہوتا ہے۔ آپ اسے https://nodejs.org/ سے ڈاؤن لوڈ اور انسٹال کر سکتے ہیں۔
npm یا yarn: npm (Node Package Manager) اور yarn جاوا اسکرپٹ پیکیج مینیجرز ہیں، جو React کی انحصار کو انسٹال اور منظم کرنے کے لیے استعمال ہوتے ہیں۔ عام طور پر Node.js انسٹال کرتے وقت npm بھی انسٹال ہو جاتا ہے۔ yarn کو https://yarnpkg.com/ سے انسٹال کیا جا سکتا ہے۔

اپنی پہلی React ایپ بنائیں

ہم create-react-app کا استعمال کرتے ہوئے تیزی سے ایک React پروجیکٹ بنائیں گے۔

npm کا استعمال کرتے ہوئے بنائیں:

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

yarn کا استعمال کرتے ہوئے بنائیں:

yarn create react-app my-first-react-app
cd my-first-react-app
yarn start

مندرجہ بالا کمانڈز پر عمل کرنے کے بعد، create-react-app خود بخود my-first-react-app نامی ایک ڈائریکٹری بنائے گا، اور اس ڈائریکٹری میں ایک React پروجیکٹ شروع کرے گا۔ npm start یا yarn start کمانڈ ڈویلپمنٹ سرور شروع کرے گی، اور آپ اپنے React ایپ کو دیکھنے کے لیے براؤزر میں http://localhost:3000 پر جا سکتے ہیں۔

ڈائریکٹری کا ڈھانچہ

create-react-app کے ذریعے بنائے گئے پروجیکٹ کا ڈائریکٹری ڈھانچہ درج ذیل ہے:

my-first-react-app/
├── node_modules/         # 
├── public/               #  ( HTML )
│   ├── index.html        #  HTML 
│   └── ...
├── src/                  # React 
│   ├── App.css           #  App  CSS 
│   ├── App.js            #  App 
│   ├── App.test.js       #  App 
│   ├── index.css         #  CSS 
│   ├── index.js          #  JavaScript 
│   ├── logo.svg          # React logo
│   └── ...
├── .gitignore            # Git 
├── package.json          #  
├── README.md             #  
└── yarn.lock             #  ( yarn)

React

React
src/App.js App

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

import React from 'react'; React .
function App() { ... } App .
return ( ... ) JSX .
export default App; App .

JSX (JavaScript XML)

JSX JavaScript JavaScript HTML JSX ... JSX Babel JavaScript

App

App

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# کاؤنٹر

      موجودہ شمار: {count}

      +
      -
    
  );
}

export default App;

تبدیلی کی وضاحت:

import React, { useState } from 'react'; useState ہک درآمد کریں۔ useState ایک React ہک ہے جو فنکشن کمپوننٹس میں اسٹیٹ شامل کرنے کے لیے استعمال ہوتا ہے۔
const [count, setCount] = useState(0); useState ہک کا استعمال کرتے ہوئے count نامی ایک اسٹیٹ متغیر بنائیں اور اسے 0 سے شروع کریں۔ setCount ایک فنکشن ہے جو count اسٹیٹ کو اپ ڈیٹ کرنے کے لیے استعمال ہوتا ہے۔
const increment = () => { setCount(count + 1); }; increment نامی ایک فنکشن کی وضاحت کریں جو count اسٹیٹ میں 1 کا اضافہ کرنے کے لیے استعمال ہوتا ہے۔
const decrement = () => { setCount(count - 1); }; decrement نامی ایک فنکشن کی وضاحت کریں جو count اسٹیٹ میں سے 1 کو کم کرنے کے لیے استعمال ہوتا ہے۔
`موجودہ شمار: {count}

صفحہ میںcountاسٹیٹ کی قدر دکھائیں۔ {count}` ایک JSX اظہار ہے جو JSX کوڈ میں جاوا اسکرپٹ متغیرات داخل کرنے کے لیے استعمال ہوتا ہے۔

+ اور - دو بٹن بنائیں، بالترتیب increment اور decrement فنکشنز کو باندھیں۔ onClick ایک ایونٹ ہینڈلر ہے جو بٹن پر کلک کرنے پر مخصوص فنکشن کو انجام دینے کے لیے استعمال ہوتا ہے۔

src/App.js فائل کو محفوظ کرنے کے بعد، براؤزر خود بخود ریفریش ہو جائے گا، اور آپ کو ایک سادہ کاؤنٹر نظر آئے گا۔ "+" بٹن پر کلک کرنے سے شمار میں اضافہ ہوگا، اور "-" بٹن پر کلک کرنے سے شمار میں کمی ہوگی۔

CSS اسٹائل کا استعمال

آپ اپنی React ایپ کو خوبصورت بنانے کے لیے CSS استعمال کر سکتے ہیں۔ create-react-app CSS ماڈیولز اور عام CSS فائلوں کو سپورٹ کرتا ہے۔

CSS ماڈیولز کا استعمال:

CSS ماڈیولز آپ کو ہر کمپوننٹ کے لیے آزاد CSS اسٹائل بنانے کی اجازت دیتے ہیں، اسٹائل کے تصادم سے بچتے ہیں۔ کسی کمپوننٹ میں CSS ماڈیولز استعمال کرنے کے لیے، آپ کو .module.css کے ساتھ ختم ہونے والی ایک فائل بنانے کی ضرورت ہے۔

مثال کے طور پر، App.module.css نامی ایک فائل بنائیں اور اس میں درج ذیل CSS اسٹائل شامل کریں:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

پھر src/App.js فائل میں CSS ماڈیولز درآمد کریں:

import React, { useState } from 'react';
import styles from './App.module.css'; // CSS ماڈیولز درآمد کریں

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* CSS کلاسوں کا حوالہ دینے کے لیے styles آبجیکٹ کا استعمال کریں */}
      

# شمارندہ

      موجودہ شمار: {count}

      +
      -
    
  );
}

export default App;

عام CSS فائل کا استعمال:

آپ عالمی اسٹائل کی وضاحت کے لیے ایک عام CSS فائل بھی استعمال کر سکتے ہیں۔ src/index.css فائل میں، آپ عالمی اسٹائل کی وضاحت کر سکتے ہیں۔

مثال کے طور پر، درج ذیل CSS اسٹائل شامل کریں:

body {
  font-family: sans-serif;
}

یہ اسٹائل پوری ایپلیکیشن کے body عنصر پر لاگو ہوگا۔

اگلا قدم

مبارک ہو، آپ نے اپنی پہلی React ایپلیکیشن مکمل کر لی ہے! اگلا، آپ React کے بارے میں مزید معلومات حاصل کر سکتے ہیں، جیسے کہ:

اجزاء مواصلات: سیکھیں کہ مختلف اجزاء کو ایک دوسرے کے ساتھ کیسے بات چیت کرنی ہے۔
فارم پروسیسنگ: سیکھیں کہ فارم کیسے بنائیں اور ان پر کارروائی کیسے کریں۔
راؤٹنگ: سیکھیں کہ React Router کا استعمال کرتے ہوئے ملٹی پیج ایپلیکیشن کیسے بنائیں۔
Redux یا Context API: سیکھیں کہ ایپلیکیشن کی حالت کو کیسے منظم کیا جائے۔
Hooks: React Hooks کے بارے میں گہرائی سے جانیں، جیسے useEffect، useContext وغیرہ۔

یاد رکھیں، React ایک ایسی تکنیک ہے جس کے لیے مسلسل مشق اور سیکھنے کی ضرورت ہوتی ہے۔ آپ کو سیکھنے میں خوشی ہو!