React ਵਿੱਚ ਸ਼ੁਰੂਆਤ: ਜ਼ੀਰੋ ਤੋਂ ਪਹਿਲਾ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਬਣਾਉਣਾ

React ਇੱਕ JavaScript ਲਾਇਬ੍ਰੇਰੀ ਹੈ ਜੋ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਇਸਨੂੰ Facebook ਦੁਆਰਾ ਵਿਕਸਤ ਅਤੇ ਸੰਭਾਲਿਆ ਗਿਆ ਹੈ, ਅਤੇ ਇਹ ਫਰੰਟ-ਐਂਡ ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ ਸਭ ਤੋਂ ਵੱਧ ਪ੍ਰਸਿੱਧ ਟੂਲ ਬਣ ਗਿਆ ਹੈ। ਇਹ ਗਾਈਡ ਤੁਹਾਨੂੰ ਜ਼ੀਰੋ ਤੋਂ ਸ਼ੁਰੂ ਕਰਕੇ, React ਦੇ ਬੁਨਿਆਦੀ ਸੰਕਲਪਾਂ ਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਸਮਝਾਏਗੀ, ਅਤੇ ਇੱਕ ਸਧਾਰਨ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਬਣਾਏਗੀ।

React ਕਿਉਂ ਚੁਣੀਏ?

React ਦੇ ਹੇਠਾਂ ਦਿੱਤੇ ਫਾਇਦੇ ਹਨ:

• ਕੰਪੋਨੈਂਟਾਈਜ਼ੇਸ਼ਨ: React ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਨੂੰ ਸੁਤੰਤਰ, ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਕੰਪੋਨੈਂਟਾਂ ਵਿੱਚ ਵੰਡਦਾ ਹੈ। ਇਹ ਕੋਡ ਨੂੰ ਸੰਭਾਲਣਾ ਅਤੇ ਸਮਝਣਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ।
• ਘੋਸ਼ਣਾਤਮਕ: React ਘੋਸ਼ਣਾਤਮਕ ਪ੍ਰੋਗਰਾਮਿੰਗ ਸ਼ੈਲੀ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਸਿਰਫ਼ ਇਹ ਦੱਸਣ ਦੀ ਲੋੜ ਹੈ ਕਿ ਤੁਸੀਂ ਕੀ ਪੇਸ਼ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਅਤੇ React ਆਪਣੇ ਆਪ ਅੱਪਡੇਟ ਅਤੇ ਰੈਂਡਰਿੰਗ ਨੂੰ ਸੰਭਾਲੇਗਾ।
• ਕੁਸ਼ਲ: React ਵਰਚੁਅਲ DOM ਅਤੇ ਸਮਾਰਟ ਡਿਫ ਐਲਗੋਰਿਦਮ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਜੋ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਅੱਪਡੇਟ ਕਰਨ ਅਤੇ ਬੇਲੋੜੀ ਰੈਂਡਰਿੰਗ ਨੂੰ ਘਟਾਉਣ ਦੇ ਯੋਗ ਹੈ।
• ਵੱਡਾ ਕਮਿਊਨਿਟੀ ਸਪੋਰਟ: React ਕੋਲ ਇੱਕ ਵੱਡਾ ਕਮਿਊਨਿਟੀ ਅਤੇ ਅਮੀਰ ਈਕੋਸਿਸਟਮ ਹੈ, ਤੁਸੀਂ ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰਨ ਲਈ ਬਹੁਤ ਸਾਰੇ ਟਿਊਟੋਰੀਅਲ, ਲਾਇਬ੍ਰੇਰੀਆਂ ਅਤੇ ਟੂਲ ਲੱਭ ਸਕਦੇ ਹੋ।
• ਕਰਾਸ-ਪਲੇਟਫਾਰਮ ਸਮਰੱਥਾ: React Native ਤੁਹਾਨੂੰ React ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਨੇਟਿਵ ਮੋਬਾਈਲ ਐਪਲੀਕੇਸ਼ਨਾਂ (iOS ਅਤੇ Android) ਵਿਕਸਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

ਤਿਆਰੀ

ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ ਕਿ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ 'ਤੇ ਹੇਠਾਂ ਦਿੱਤੇ ਟੂਲ ਇੰਸਟਾਲ ਹਨ:

• Node.js: Node.js ਇੱਕ JavaScript ਰਨਟਾਈਮ ਵਾਤਾਵਰਣ ਹੈ, ਜੋ React ਡਿਵੈਲਪਮੈਂਟ ਟੂਲ ਚਲਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਤੁਸੀਂ ਇਸਨੂੰ https://nodejs.org/ ਤੋਂ ਡਾਊਨਲੋਡ ਅਤੇ ਇੰਸਟਾਲ ਕਰ ਸਕਦੇ ਹੋ।
• npm ਜਾਂ yarn: npm (Node Package Manager) ਅਤੇ yarn JavaScript ਪੈਕੇਜ ਮੈਨੇਜਰ ਹਨ, ਜੋ React ਦੀਆਂ ਨਿਰਭਰਤਾਵਾਂ ਨੂੰ ਇੰਸਟਾਲ ਅਤੇ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ। ਆਮ ਤੌਰ 'ਤੇ Node.js ਨੂੰ ਇੰਸਟਾਲ ਕਰਨ ਵੇਲੇ npm ਵੀ ਇੰਸਟਾਲ ਹੋ ਜਾਂਦਾ ਹੈ। yarn ਨੂੰ https://yarnpkg.com/ ਤੋਂ ਇੰਸਟਾਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਆਪਣੀ ਪਹਿਲੀ React ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਓ

ਅਸੀਂ create-react-app ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ React ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਬਣਾਵਾਂਗੇ।

1. npm ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਓ:

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

2. 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/ # ਰੀਐਕਟ ਸਰੋਤ ਕੋਡ │ ├── App.css # ਐਪ ਕੰਪੋਨੈਂਟ ਦੀ CSS ਸ਼ੈਲੀ │ ├── App.js # ਐਪ ਕੰਪੋਨੈਂਟ │ ├── App.test.js # ਐਪ ਕੰਪੋਨੈਂਟ ਦੀ ਟੈਸਟ ਫਾਈਲ │ ├── index.css # ਗਲੋਬਲ CSS ਸ਼ੈਲੀ │ ├── index.js # ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਐਂਟਰੀ JavaScript ਫਾਈਲ │ ├── logo.svg # ਰੀਐਕਟ ਲੋਗੋ │ └── ... ├── .gitignore # Git ਅਣਗੌਲਿਆ ਫਾਈਲ ├── package.json # ਪ੍ਰੋਜੈਕਟ ਦਾ ਮੈਟਾਡੇਟਾ ਅਤੇ ਨਿਰਭਰਤਾ ├── README.md # ਪ੍ਰੋਜੈਕਟ ਦਾ ਦਸਤਾਵੇਜ਼ └── yarn.lock # ਨਿਰਭਰਤਾ ਸੰਸਕਰਣ ਲਾਕਿੰਗ ਫਾਈਲ (ਜੇ ਯਾਰਨ ਵਰਤਦੇ ਹੋ)

## ਰੀਐਕਟ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਸਮਝਣਾ

ਰੀਐਕਟ ਐਪਲੀਕੇਸ਼ਨਾਂ ਕੰਪੋਨੈਂਟਾਂ ਤੋਂ ਬਣੀਆਂ ਹੁੰਦੀਆਂ ਹਨ। ਕੰਪੋਨੈਂਟ ਕੋਡ ਦੇ ਸੁਤੰਤਰ, ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਬਲਾਕ ਹੁੰਦੇ ਹਨ, ਜੋ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਦੇ ਖਾਸ ਹਿੱਸਿਆਂ ਨੂੰ ਪੇਸ਼ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ।

`src/App.js` ਫਾਈਲ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਡਿਫਾਲਟ `App` ਕੰਪੋਨੈਂਟ ਦੇਖ ਸਕਦੇ ਹੋ:

```javascript
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'; ਰੀਐਕਟ ਲਾਇਬ੍ਰੇਰੀ ਨੂੰ ਇੰਪੋਰਟ ਕਰਦਾ ਹੈ।
• function App() { ... } App ਨਾਮ ਦਾ ਇੱਕ ਫੰਕਸ਼ਨ ਕੰਪੋਨੈਂਟ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ।
• return ( ... ) ਇੱਕ JSX ਸਮੀਕਰਨ ਵਾਪਸ ਕਰਦਾ ਹੈ, ਜੋ ਦੱਸਦਾ ਹੈ ਕਿ ਕੰਪੋਨੈਂਟ ਨੂੰ ਕੀ ਪੇਸ਼ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।
• export default App; App ਕੰਪੋਨੈਂਟ ਨੂੰ ਐਕਸਪੋਰਟ ਕਰਦਾ ਹੈ, ਤਾਂ ਜੋ ਇਸਨੂੰ ਹੋਰ ਫਾਈਲਾਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾ ਸਕੇ।

JSX (JavaScript XML)

JSX ਇੱਕ JavaScript ਸਿੰਟੈਕਸ ਐਕਸਟੈਂਸ਼ਨ ਹੈ, ਜੋ ਤੁਹਾਨੂੰ JavaScript ਕੋਡ ਵਿੱਚ HTML ਵਰਗਾ ਕੋਡ ਲਿਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਉੱਪਰ ਦਿੱਤੀ ਉਦਾਹਰਣ ਵਿੱਚ, ... ਇੱਕ JSX ਸਮੀਕਰਨ ਹੈ। JSX ਕੋਡ ਨੂੰ Babel ਦੁਆਰਾ ਸਟੈਂਡਰਡ JavaScript ਕੋਡ ਵਿੱਚ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਇਸਨੂੰ ਸਮਝ ਸਕੇ।

ਐਪ ਕੰਪੋਨੈਂਟ ਨੂੰ ਸੋਧਣਾ

ਆਓ App ਕੰਪੋਨੈਂਟ ਨੂੰ ਸੋਧੀਏ ਅਤੇ ਇੱਕ ਸਧਾਰਨ ਕਾਊਂਟਰ ਬਣਾਈਏ।

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

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {\n setCount(count + 1);\n };\n\n const decrement = () => {\n setCount(count - 1);\n };\n\n return (\n <>\n \n\n # ਗਿਣਤੀ ਮੀਟਰ\n\n ਮੌਜੂਦਾ ਗਿਣਤੀ: {count}\n\n +\n -\n \n\n );\n}\n\nexport default App;\n```\n\n**ਸੋਧ ਨਿਰਦੇਸ਼:**\n\n* `import React, { useState } from 'react';` `useState` ਹੁੱਕ ਇੰਪੋਰਟ ਕਰੋ। `useState` ਇੱਕ React ਹੁੱਕ ਹੈ ਜੋ ਫੰਕਸ਼ਨ ਕੰਪੋਨੈਂਟਸ ਵਿੱਚ ਸਟੇਟ ਜੋੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।\n* `const [count, setCount] = useState(0);` `useState` ਹੁੱਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ `count` ਨਾਮਕ ਇੱਕ ਸਟੇਟ ਵੇਰੀਏਬਲ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ `0` ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ। `setCount` ਇੱਕ ਫੰਕਸ਼ਨ ਹੈ ਜੋ `count` ਸਟੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।\n* `const increment = () => { setCount(count + 1); };` `increment` ਨਾਮਕ ਇੱਕ ਫੰਕਸ਼ਨ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ, ਜੋ `count` ਸਟੇਟ ਵਿੱਚ 1 ਜੋੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।\n* `const decrement = () => { setCount(count - 1); };` `decrement` ਨਾਮਕ ਇੱਕ ਫੰਕਸ਼ਨ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ, ਜੋ `count` ਸਟੇਟ ਤੋਂ 1 ਘਟਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।\n* `ਮੌਜੂਦਾ ਗਿਣਤੀ: {count}

` ਪੰਨੇ ਵਿੱਚ `count` ਸਟੇਟ ਦਾ ਮੁੱਲ ਦਿਖਾਓ। `{count}` ਇੱਕ JSX ਸਮੀਕਰਨ ਹੈ, ਜੋ JSX ਕੋਡ ਵਿੱਚ JavaScript ਵੇਰੀਏਬਲ ਪਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।\n* `+` ਅਤੇ `-` ਦੋ ਬਟਨ ਬਣਾਓ, ਕ੍ਰਮਵਾਰ `increment` ਅਤੇ `decrement` ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਬੰਨ੍ਹੋ। `onClick` ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਹੈ, ਜੋ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਨਿਰਧਾਰਤ ਫੰਕਸ਼ਨ ਨੂੰ ਚਲਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।\n\n`src/App.js` ਫਾਈਲ ਨੂੰ ਸੇਵ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਬ੍ਰਾਊਜ਼ਰ ਆਪਣੇ ਆਪ ਰਿਫ੍ਰੈਸ਼ ਹੋ ਜਾਵੇਗਾ, ਅਤੇ ਤੁਸੀਂ ਇੱਕ ਸਧਾਰਨ ਗਿਣਤੀ ਮੀਟਰ ਦੇਖੋਗੇ। ਗਿਣਤੀ ਵਧਾਉਣ ਲਈ \ 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 ਇੱਕ ਅਜਿਹੀ ਤਕਨੀਕ ਹੈ ਜਿਸਨੂੰ ਲਗਾਤਾਰ ਅਭਿਆਸ ਅਤੇ ਸਿੱਖਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਤੁਹਾਡੀ ਸਿੱਖਣ ਯਾਤਰਾ ਸ਼ੁਭ ਹੋਵੇ!