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 એપ્લિકેશન બનાવો

અમે React પ્રોજેક્ટને ઝડપથી બનાવવા માટે create-react-app નો ઉપયોગ કરીશું.

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           # App ઘટક માટે CSS શૈલી
│   ├── App.js            # App ઘટક
│   ├── App.test.js       # App ઘટક માટે પરીક્ષણ ફાઇલ
│   ├── index.css         # વૈશ્વિક CSS શૈલી
│   ├── index.js          # એપ્લિકેશન માટે પ્રવેશ JavaScript ફાઇલ
│   ├── logo.svg          # રિએક્ટ લોગો
│   └── ...
├── .gitignore            # Git અવગણના ફાઇલ
├── package.json          # પ્રોજેક્ટ મેટાડેટા અને અવલંબન
├── README.md             # પ્રોજેક્ટ દસ્તાવેજીકરણ
└── yarn.lock             # અવલંબન સંસ્કરણ લૉક ફાઇલ (જો yarn નો ઉપયોગ કરો છો)

રિએક્ટ ઘટકોને સમજવું

રિએક્ટ એપ્લિકેશન ઘટકોથી બનેલી છે. ઘટકો સ્વતંત્ર, ફરીથી વાપરી શકાય તેવા કોડ બ્લોક્સ છે, જેનો ઉપયોગ વપરાશકર્તા ઇન્ટરફેસના ચોક્કસ ભાગને રેન્ડર કરવા માટે થાય છે.

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'; રિએક્ટ લાઇબ્રેરી આયાત કરો.
• 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 કોડમાં JavaScript વેરીએબલ્સ દાખલ કરવા માટે થાય છે.
• + અને - બે બટનો બનાવો, જે અનુક્રમે 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 એ એક એવી તકનીક છે જેને સતત પ્રેક્ટિસ અને શીખવાની જરૂર છે. તમને શીખવામાં આનંદ આવે!