React.js ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਬਾਰੇ ਟਿਊਟੋਰਿਅਲ

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

ਪੇਂਡਹੁਲੁਆਨ

ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ 'ਤੇ Node.js ਅਤੇ npm (ਨੋਡ ਪੈਕੇਜ ਮੈਨੇਜਰ) ਇੰਸਟਾਲ ਹਨ। Node.js ਅਤੇ npm ਜ਼ਰੂਰੀ ਹਨ ਕਿਉਂਕਿ ਇਹ React.js ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿਕਸਤ ਕਰਨ ਲਈ ਲੋੜੀਂਦੇ ਵਾਤਾਵਰਣ ਅਤੇ ਟੂਲ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।

ਕਦਮ 1: ਪ੍ਰਤੀਕਿਰਿਆ ਪ੍ਰੋਜੈਕਟ ਸ਼ੁਰੂ ਕਰਨਾ

ਇੱਕ ਨਵੀਂ React.js ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ, ਅਸੀਂ Create React App ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ, ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਵਾਲਾ ਟੂਲ ਜੋ ਸ਼ੁਰੂਆਤੀ ਸੰਰਚਨਾ ਨੂੰ ਘੱਟ ਤੋਂ ਘੱਟ ਕਰਦਾ ਹੈ। ਆਪਣੇ ਟਰਮੀਨਲ ਜਾਂ ਕਮਾਂਡ ਪ੍ਰੋਂਪਟ ਵਿੱਚ ਹੇਠ ਲਿਖੀ ਕਮਾਂਡ ਚਲਾਓ:

''ਬਾਸ਼
npx create-react-app my-app
ਸੀਡੀ ਮਾਈ-ਐਪ
npm ਸ਼ੁਰੂ ਕਰੋ
“

ਇਹ ਕਮਾਂਡ `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` ਖੋਲ੍ਹੋ ਅਤੇ ਇਸਨੂੰ ਹੇਠ ਦਿੱਤੇ ਕੋਡ ਨਾਲ ਬਦਲੋ:

"`jsx
'react' ਤੋਂ ਪ੍ਰਤੀਕਿਰਿਆ ਆਯਾਤ ਕਰੋ;
'./App.css' ਆਯਾਤ ਕਰੋ;

ਫੰਕਸ਼ਨ ਐਪ() {
ਵਾਪਸੀ (

);
}

ਨਿਰਯਾਤ ਡਿਫੌਲਟ ਐਪ;
“

JSX (JavaScript XML) ਦੀ ਵਰਤੋਂ ਕਰਕੇ `App.js` ਦੇ ਅੰਦਰ React ਕੋਡ ਨੂੰ ਸ਼ੁਰੂ ਕਰੋ, ਜੋ ਸਾਨੂੰ JavaScript ਦੇ ਅੰਦਰ HTML ਵਰਗਾ ਸੰਟੈਕਸ ਲਿਖਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਆਪਣੇ ਬਦਲਾਵਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰੋ ਅਤੇ ਨਤੀਜੇ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਵੇਖੋ।

ਕਦਮ 5: ਨਵੇਂ ਹਿੱਸੇ ਜੋੜਨਾ

ਹੁਣ ਕੁਝ ਨਵੇਂ ਕੰਪੋਨੈਂਟ ਜੋੜਦੇ ਹਾਂ। `src` ਫੋਲਡਰ ਦੇ ਅੰਦਰ `components` ਨਾਮਕ ਇੱਕ ਨਵਾਂ ਫੋਲਡਰ ਬਣਾਓ। ਫਿਰ `components` ਫੋਲਡਰ ਵਿੱਚ `HelloWorld.js` ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ।

"`jsx
'react' ਤੋਂ ਪ੍ਰਤੀਕਿਰਿਆ ਆਯਾਤ ਕਰੋ;

ਫੰਕਸ਼ਨ ਹੈਲੋਵਰਲਡ() {
ਵਾਪਸੀ (

);
}

ਨਿਰਯਾਤ ਡਿਫਾਲਟ ਹੈਲੋਵਰਲਡ;
“

`App.js` ਖੋਲ੍ਹੋ ਅਤੇ ਸਾਡੇ ਦੁਆਰਾ ਹੁਣੇ ਬਣਾਏ ਗਏ `HelloWorld` ਕੰਪੋਨੈਂਟ ਨੂੰ ਆਯਾਤ ਕਰੋ:

"`jsx
'react' ਤੋਂ ਪ੍ਰਤੀਕਿਰਿਆ ਆਯਾਤ ਕਰੋ;
'./App.css' ਆਯਾਤ ਕਰੋ;
'./components/HelloWorld' ਤੋਂ HelloWorld ਆਯਾਤ ਕਰੋ;

ਫੰਕਸ਼ਨ ਐਪ() {
ਵਾਪਸੀ (

);
}

ਨਿਰਯਾਤ ਡਿਫੌਲਟ ਐਪ;
“

ਹੁਣ, `App.js` ਮੁੱਖ ਪੰਨੇ 'ਤੇ `HelloWorld` ਹਿੱਸੇ ਨੂੰ ਰੈਂਡਰ ਕਰਦਾ ਹੈ।

ਕਦਮ 6: useState ਨਾਲ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਜੋੜਨਾ

ਰੀਐਕਟ ਵਿੱਚ ਸਟੇਟ ਦੇ ਪ੍ਰਬੰਧਨ ਲਈ ਬਹੁਤ ਸ਼ਕਤੀਸ਼ਾਲੀ ਹੁੱਕ ਹਨ। ਆਓ ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਕੁਝ ਸਟੇਟ ਜੋੜੀਏ। ਉਦਾਹਰਣ ਵਜੋਂ, ਆਓ ਇੱਕ ਕਾਊਂਟਰ ਜੋੜੀਏ ਜੋ ਹਰ ਵਾਰ ਬਟਨ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਵਧਦਾ ਹੈ।

`HelloWorld.js` ਖੋਲ੍ਹੋ ਅਤੇ state ਅਤੇ `useState` ਹੁੱਕ ਜੋੜੋ:

"`jsx
'react' ਤੋਂ React, { useState } ਆਯਾਤ ਕਰੋ;

ਫੰਕਸ਼ਨ ਹੈਲੋਵਰਲਡ() {
const [count, setCount] = useState(0);

ਸਥਿਰ ਵਾਧਾ ਗਿਣਤੀ = () => {
setCount(count + 1);
}

ਵਾਪਸੀ (

);
}

ਨਿਰਯਾਤ ਡਿਫਾਲਟ ਹੈਲੋਵਰਲਡ;
“

`count` ਸਥਿਤੀ ਨੂੰ 0 ਦੇ ਮੁੱਲ ਨਾਲ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਹਰ ਵਾਰ ਜਦੋਂ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ `incrementCount` ਫੰਕਸ਼ਨ ਇਸ ਮੁੱਲ ਨੂੰ ਵਧਾ ਦੇਵੇਗਾ।

ਕਦਮ 7: ਸਟਾਈਲਿੰਗ ਜੋੜਨਾ

ਸਟਾਈਲਿੰਗ ਜੋੜਨ ਲਈ, ਅਸੀਂ `App.css` ਫਾਈਲ ਵਿੱਚ CSS ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ ਜਾਂ ਅਸੀਂ styled-components ਵਰਗੀ CSS-in-JS ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ। ਆਓ ਹੁਣ ਲਈ ਸਟੈਂਡਰਡ CSS ਨਾਲ ਜੁੜੇ ਰਹੀਏ।

`App.css` ਖੋਲ੍ਹੋ ਅਤੇ ਕੁਝ ਸਟਾਈਲਿੰਗ ਸ਼ਾਮਲ ਕਰੋ:

"`css
.ਐਪ {
ਟੈਕਸਟ-ਅਲਾਈਨ: ਸੈਂਟਰ;
}

.ਐਪ-ਹੈਡਰ {
ਪਿਛੋਕੜ-ਰੰਗ: 282c34;
ਘੱਟੋ-ਘੱਟ ਉਚਾਈ: 100vh;
ਡਿਸਪਲੇ: ਫਲੈਕਸ;
flex-direction: ਕਾਲਮ;
ਅਲਾਈਨ-ਆਈਟਮਾਂ: ਕੇਂਦਰ;
justify-content: ਕੇਂਦਰ;
ਫੌਂਟ-ਆਕਾਰ: ਕੈਲਕ(10px + 2vmin);
ਰੰਗ: ਚਿੱਟਾ;
}

ਬਟਨ {
ਪੈਡਿੰਗ: ਐਕਸ.ਐੱਨ.ਐੱਮ.ਐੱਨ.ਐੱਨ.ਐੱਮ.ਐਕਸ. ਐਕਸ.
ਹਾਸ਼ੀਏ ਦਾ ਸਿਖਰ: ਐਕਸਯੂ.ਐੱਨ.ਐੱਮ.ਐੱਮ.ਐਕਸ.
ਫੋਂਟ-ਅਕਾਰ: ਐਕਸ ਐਨਯੂਐਮਐਕਸਐਕਸ;
}
“

ਕਦਮ 8: ਰੀਐਕਟ ਰਾਊਟਰ ਨਾਲ ਰਾਊਟਿੰਗ ਜੋੜਨਾ

ਸਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਪੰਨਿਆਂ ਵਿਚਕਾਰ ਨੈਵੀਗੇਸ਼ਨ ਜੋੜਨ ਲਈ, ਅਸੀਂ React Router ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ। ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾ ਕੇ React Router ਇੰਸਟਾਲ ਕਰੋ:

''ਬਾਸ਼
npm install react-router-dom
“

ਫਿਰ, `components` ਫੋਲਡਰ ਵਿੱਚ ਦੋ ਨਵੇਂ ਕੰਪੋਨੈਂਟ ਬਣਾਓ: `Home.js` ਅਤੇ `About.js`।

`Home.js`:
"`jsx
'react' ਤੋਂ ਪ੍ਰਤੀਕਿਰਿਆ ਆਯਾਤ ਕਰੋ;

ਫੰਕਸ਼ਨ ਹੋਮ() {
ਵਾਪਸੀ (

);
}

ਨਿਰਯਾਤ ਮੂਲ ਘਰ;
“

`About.js`:
"`jsx
'react' ਤੋਂ ਪ੍ਰਤੀਕਿਰਿਆ ਆਯਾਤ ਕਰੋ;

ਫੰਕਸ਼ਨ ਬਾਰੇ() {
ਵਾਪਸੀ (

);
}

ਐਕਸਪੋਰਟ ਡਿਫੌਲਟ ਬਾਰੇ;
“

ਅੱਗੇ, `App.js` ਖੋਲ੍ਹੋ ਅਤੇ ਰੂਟਿੰਗ ਸੈੱਟ ਕਰੋ:

"`jsx
'react' ਤੋਂ ਪ੍ਰਤੀਕਿਰਿਆ ਆਯਾਤ ਕਰੋ;
'react-router-dom' ਤੋਂ { BrowserRouter ਨੂੰ ਰਾਊਟਰ, ਰੂਟ, ਲਿੰਕ, ਸਵਿੱਚ ਦੇ ਰੂਪ ਵਿੱਚ } ਆਯਾਤ ਕਰੋ;
'./App.css' ਆਯਾਤ ਕਰੋ;
'./components/HelloWorld' ਤੋਂ HelloWorld ਆਯਾਤ ਕਰੋ;
'./components/Home' ਤੋਂ ਘਰ ਆਯਾਤ ਕਰੋ;
'./components/About' ਤੋਂ ਇਸ ਬਾਰੇ ਆਯਾਤ ਕਰੋ;

ਫੰਕਸ਼ਨ ਐਪ() {
ਵਾਪਸੀ (

);
}

ਨਿਰਯਾਤ ਡਿਫੌਲਟ ਐਪ;
“

ਇਸਦੇ ਨਾਲ, ਅਸੀਂ ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਪੰਨਿਆਂ ਵਿਚਕਾਰ ਮੁੱਢਲੀ ਨੈਵੀਗੇਸ਼ਨ ਜੋੜੀ ਹੈ।

ਬੰਦ ਕੀਤਾ ਜਾ ਰਿਹਾ

ਇਹ React.js ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਇੱਕ ਮੁੱਢਲਾ ਟਿਊਟੋਰਿਅਲ ਹੈ। ਅਸੀਂ ਪ੍ਰੋਜੈਕਟ ਸੈੱਟਅੱਪ, ਕੰਪੋਨੈਂਟ ਬਣਾਉਣਾ, ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ, ਸਟਾਈਲਿੰਗ ਅਤੇ ਰੂਟਿੰਗ ਨੂੰ ਕਵਰ ਕੀਤਾ ਹੈ। React.js ਕੋਲ ਕਈ ਲਾਇਬ੍ਰੇਰੀਆਂ ਅਤੇ ਟੂਲਸ ਵਾਲਾ ਇੱਕ ਅਮੀਰ ਈਕੋਸਿਸਟਮ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ।

ਸ਼ੁਭਕਾਮਨਾਵਾਂ, ਅਤੇ ਮੈਨੂੰ ਉਮੀਦ ਹੈ ਕਿ ਇਹ ਟਿਊਟੋਰਿਅਲ ਤੁਹਾਨੂੰ React.js ਨਾਲ ਆਪਣੀ ਯਾਤਰਾ ਸ਼ੁਰੂ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ!