React.js નો ઉપયોગ કરીને વેબ એપ્લિકેશન બનાવવાનું ટ્યુટોરીયલ

React.js એ એક લોકપ્રિય ફ્રન્ટ-એન્ડ ડેવલપમેન્ટ લાઇબ્રેરી છે જેનો ઉપયોગ ઇન્ટરેક્ટિવ યુઝર ઇન્ટરફેસ (UI) બનાવવા માટે થાય છે. ફેસબુક દ્વારા વિકસાવવામાં આવેલ React.js નો ઉપયોગ Instagram, Airbnb અને WhatsApp સહિત ઘણી મોટી કંપનીઓ દ્વારા કરવામાં આવ્યો છે. જો તમે અસરકારક, ઝડપી અને પ્રતિભાવશીલ વેબ એપ્લિકેશન બનાવવા માંગતા હો, તો React.js તમારા માટે યોગ્ય પસંદગી હોઈ શકે છે.

પેન્ડાહુલુઆન

શરૂ કરતા પહેલા, ખાતરી કરો કે તમારા કમ્પ્યુટર પર Node.js અને npm (નોડ પેકેજ મેનેજર) ઇન્સ્ટોલ કરેલ છે. Node.js અને npm આવશ્યક છે કારણ કે તે React.js નો ઉપયોગ કરીને વેબ એપ્લિકેશન વિકસાવવા માટે જરૂરી વાતાવરણ અને સાધનો પૂરા પાડે છે.

પગલું 1: રિએક્ટ પ્રોજેક્ટ શરૂ કરવો

નવી React.js એપ્લિકેશન બનાવવા માટે, આપણે Create React App નો ઉપયોગ કરી શકીએ છીએ, જે એક એપ્લિકેશન બનાવવાનું સાધન છે જે પ્રારંભિક ગોઠવણીને ન્યૂનતમ કરે છે. તમારા ટર્મિનલ અથવા કમાન્ડ પ્રોમ્પ્ટમાં નીચેનો આદેશ ચલાવો:

"'બાશ
npx ક્રિએટ-રિએક્ટ-એપ મારી-એપ
cd my-app
એનપીએમ પ્રારંભ
"`

આ આદેશ `my-app` નામની એક નવી ડિરેક્ટરી બનાવશે, બધી જરૂરી ડિપેન્ડન્સી ડાઉનલોડ અને ઇન્સ્ટોલ કરશે, અને ડેવલપમેન્ટ સર્વર શરૂ કરશે. હવે તમે બ્રાઉઝર ખોલી શકો છો અને ડિફોલ્ટ React.js એપ્લિકેશન જોવા માટે `http://localhost:3000` ને ઍક્સેસ કરી શકો છો.

પગલું 2: ફોલ્ડર માળખું

ચાલો Create React App એ બનાવેલ ફોલ્ડર સ્ટ્રક્ચર પર એક નજર કરીએ:

"`
મારી-એપ/
├── નોડ_મોડ્યુલ્સ/
├── જાહેર/
│ └── ઇન્ડેક્સ.html
└── સ્રોત/
├── એપ.સીએસએસ
├── એપ.જેએસ
├── એપ.ટેસ્ટ.જેએસ
├── અનુક્રમણિકા.સીએસએસ
├── ઇન્ડેક્સ.જેએસ
└── લોગો.એસવીજી
"`

– `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
'પ્રતિક્રિયા' માંથી પ્રતિક્રિયા આયાત કરો;
'./App.css' આયાત કરો;

ફંક્શન એપ() {
પરત (

);
}

ડિફોલ્ટ એપ્લિકેશન નિકાસ કરો;
"`

JSX (JavaScript XML) નો ઉપયોગ કરીને `App.js` ની અંદર React કોડ શરૂ કરો, જે આપણને JavaScript માં HTML જેવું સિન્ટેક્સ લખવાની મંજૂરી આપે છે. તમારા ફેરફારો સાચવો અને પરિણામો તમારા બ્રાઉઝરમાં જુઓ.

પગલું 5: નવા ઘટકો ઉમેરવા

હવે ચાલો કેટલાક નવા ઘટકો ઉમેરીએ. `src` ફોલ્ડરની અંદર `components` નામનું એક નવું ફોલ્ડર બનાવો. પછી `components` ફોલ્ડરમાં `HelloWorld.js` નામની એક નવી ફાઇલ બનાવો.

"`jsx
'પ્રતિક્રિયા' માંથી પ્રતિક્રિયા આયાત કરો;

ફંક્શન હેલોવર્લ્ડ() {
પરત (

);
}

નિકાસ ડિફોલ્ટ હેલોવર્લ્ડ;
"`

`App.js` ખોલો અને આપણે હમણાં જ બનાવેલ `HelloWorld` ઘટક આયાત કરો:

"`jsx
'પ્રતિક્રિયા' માંથી પ્રતિક્રિયા આયાત કરો;
'./App.css' આયાત કરો;
'./components/HelloWorld' માંથી HelloWorld આયાત કરો;

ફંક્શન એપ() {
પરત (

);
}

ડિફોલ્ટ એપ્લિકેશન નિકાસ કરો;
"`

હવે, `App.js` મુખ્ય પૃષ્ઠ પર `HelloWorld` ઘટકને રેન્ડર કરે છે.

પગલું 6: useState સાથે સ્ટેટ મેનેજમેન્ટ ઉમેરવું

સ્ટેટ મેનેજ કરવા માટે રિએક્ટમાં ખૂબ જ શક્તિશાળી હુક્સ છે. ચાલો આપણી એપ્લિકેશનમાં થોડી સ્ટેટ ઉમેરીએ. ઉદાહરણ તરીકે, ચાલો એક કાઉન્ટર ઉમેરીએ જે દરેક બટન ક્લિક કરતી વખતે વધે છે.

`HelloWorld.js` ખોલો અને state અને `useState` હૂક ઉમેરો:

"`jsx
'react' માંથી React, { useState } આયાત કરો;

ફંક્શન હેલોવર્લ્ડ() {
કોન્સ્ટ [ગણતરી, સેટકાઉન્ટ] = યુઝસ્ટેટ(0);

કોન્સ્ટ ઇન્ક્રીમેન્ટકાઉન્ટ = () => {
સેટકાઉન્ટ(ગણતરી + 1);
}

પરત (

);
}

નિકાસ ડિફોલ્ટ હેલોવર્લ્ડ;
"`

`count` સ્થિતિ 0 ના મૂલ્ય સાથે શરૂ થાય છે, અને દરેક વખતે જ્યારે બટન ક્લિક કરવામાં આવે છે, ત્યારે `incrementCount` ફંક્શન આ મૂલ્યમાં વધારો કરશે.

પગલું 7: સ્ટાઇલ ઉમેરવી

સ્ટાઇલ ઉમેરવા માટે, આપણે `App.css` ફાઇલમાં CSS નો ઉપયોગ કરી શકીએ છીએ અથવા styled-components જેવી CSS-in-JS લાઇબ્રેરીનો ઉપયોગ કરી શકીએ છીએ. ચાલો હમણાં માટે પ્રમાણભૂત CSS સાથે રહીએ.

`App.css` ખોલો અને થોડી સ્ટાઇલ ઉમેરો:

"`સીએસએસ
.એપ {
ટેક્સ્ટ-ગોઠવણી: કેન્દ્ર;
}

.એપ-હેડર {
પૃષ્ઠભૂમિ-રંગ: 282c34;
ન્યૂનતમ ઊંચાઈ: 100vh;
પ્રદર્શન: ફ્લેક્સ;
ફ્લેક્સ-દિશા: કૉલમ;
align-items: કેન્દ્ર;
justify-content: કેન્દ્ર;
ફોન્ટ-સાઇઝ: કેલ્ક(10px + 2vmin);
રંગ: સફેદ;
}

બટન {
ગાદી: 10PX 20PX;
ગાળો-ટોચ: 20px;
ફ fontન્ટ-કદ: 16px;
}
"`

પગલું 8: રિએક્ટ રાઉટર સાથે રાઉટિંગ ઉમેરવું

અમારી એપ્લિકેશનમાં વિવિધ પૃષ્ઠો વચ્ચે નેવિગેશન ઉમેરવા માટે, અમે React Router નો ઉપયોગ કરી શકીએ છીએ. નીચે આપેલ આદેશ ચલાવીને React Router ઇન્સ્ટોલ કરો:

"'બાશ
npm install react-router-dom
"`

પછી, `components` ફોલ્ડરમાં બે નવા ઘટકો બનાવો: `Home.js` અને `About.js`.

`હોમ.જેએસ`:
"`jsx
'પ્રતિક્રિયા' માંથી પ્રતિક્રિયા આયાત કરો;

ફંક્શન હોમ() {
પરત (

);
}

નિકાસ ડિફોલ્ટ હોમ;
"`

`About.js`:
"`jsx
'પ્રતિક્રિયા' માંથી પ્રતિક્રિયા આયાત કરો;

કાર્ય વિશે() {
પરત (

);
}

નિકાસ ડિફોલ્ટ વિશે;
"`

આગળ, `App.js` ખોલો અને રૂટીંગ સેટ કરો:

"`jsx
'પ્રતિક્રિયા' માંથી પ્રતિક્રિયા આયાત કરો;
'react-router-dom' માંથી { બ્રાઉઝરરાઉટરને રાઉટર, રૂટ, લિંક, સ્વિચ તરીકે } આયાત કરો;
'./App.css' આયાત કરો;
'./components/HelloWorld' માંથી HelloWorld આયાત કરો;
'./components/Home' માંથી હોમ આયાત કરો;
'./components/About' માંથી About આયાત કરો;

ફંક્શન એપ() {
પરત (

);
}

ડિફોલ્ટ એપ્લિકેશન નિકાસ કરો;
"`

આ સાથે, અમે અમારી એપ્લિકેશનમાં વિવિધ પૃષ્ઠો વચ્ચે મૂળભૂત નેવિગેશન ઉમેર્યું છે.

પેનટઅપ

React.js નો ઉપયોગ કરીને વેબ એપ્લિકેશન બનાવવા માટે આ એક મૂળભૂત ટ્યુટોરીયલ છે. અમે પ્રોજેક્ટ સેટઅપ, કમ્પોનન્ટ બનાવટ, સ્ટેટ મેનેજમેન્ટ, સ્ટાઇલિંગ અને રૂટીંગને આવરી લીધા છે. React.js પાસે અસંખ્ય લાઇબ્રેરીઓ અને ટૂલ્સ સાથે સમૃદ્ધ ઇકોસિસ્ટમ છે જે તમને વધુ જટિલ વેબ એપ્લિકેશન બનાવવામાં મદદ કરી શકે છે.

શુભકામનાઓ, અને મને આશા છે કે આ ટ્યુટોરીયલ તમને React.js સાથે તમારી સફર શરૂ કરવામાં મદદ કરશે!