Overview of React Frontend for Full Stack Developers: setting up a React app using Vite or Create React App; JSX, functional components, hooks (useState, useEffect); integrating Firebase in a React app for data access and authentication

📖 Theory

બીજું મોટું front end

તમે FestConnect નું front end Angular માં બનાવ્યું, પણ ઉદ્યોગમાં બીજી પ્રભાવશાળી પસંદગી એટલે React. Full-stack developer ને બંને ઓળખતાં આવડવું જોઈએ. આ સમાપન પાઠ React નો સ્વાદ છે: એટલું કે તમે એને વાંચી શકો, Angular સાથે એની સરખામણી જોઈ શકો, અને જાણી શકો કે એ પણ એ જ Firebase backend સાથે જોડાય છે.

React JSX માં લખેલા components માંથી UI બનાવે છે, અને useState તથા useEffect જેવા hooks વડે state અને side effects સંભાળે છે. જો તમને Angular ની component વાળી વિચારસરણી સમજાતી હોય, તો React ભાવનામાં પરિચિત લાગશે, ભલે એની શૈલી હળવી અને વધુ લવચીક હોય.

📖 Theory

Components, JSX અને setup

React એ components માંથી user interface બનાવવા માટેની JavaScript library છે. તમે project ની શરૂઆત Vite (ઝડપી અને આધુનિક) થી કરો છો, અથવા જૂના Create React App થી.

આધુનિક React components એ functions હોય છે જે JSX પાછું આપે છે, એટલે કે એવી syntax જે તમને JavaScript ની અંદર સીધું HTML જેવું markup લખવા દે છે. એટલે component એ ફક્ત એવું function છે જેની return કિંમત શું render કરવું એ વર્ણવે છે. આ Angular ની class અને decorator વાળી શૈલી કરતાં હળવું છે: React component એક નાનકડું function પણ હોઈ શકે. Markup અને logic ને એક જ જગ્યાએ ભેળવતું JSX એ React ની ઓળખ છે, અને એક વાર મગજમાં બેસી જાય પછી એ સહજ રીતે વંચાય છે.

⌨️ Practical

useState સાથેનું React functional component

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);   // state: [કિંમત, setter]

  return (                                 // JSX: JS ની અંદર HTML જેવું markup
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}
export default Counter;

This example runs in Gri-Learn on the web, where you can edit it and see the output.

📖 Theory

Hooks: useState અને useEffect

Hooks functional components માં ક્ષમતાઓ ઉમેરે છે.

useState component ને state આપે છે: const [count, setCount] = useState(0) વર્તમાન કિંમત અને setter પાછાં આપે છે; setter ને બોલાવવાથી કિંમત બદલાય છે અને component ફરી render થાય છે. useEffect render પછી side effects ચલાવે છે, જેમ કે data મંગાવવો કે subscribe કરવું, અને એને ક્યારે ફરી ચલાવવું એ dependency array નક્કી કરે છે (દાખલા તરીકે ખાલી array [] હોય તો mount વખતે એક જ વાર).

એટલે useState એટલે 'કિંમત યાદ રાખો અને એ બદલાય ત્યારે ફરી render કરો', અને useEffect એટલે 'render થયા પછી કંઈક કરો, જેમ કે data load કરો'. બંને મળીને component ને જોઈતું મોટા ભાગનું કામ સંભાળી લે છે, અને React data તથા auth માટે Firebase સાથે આ જ રીતે જોડાય છે.

⌨️ Practical

એક જ વાર data load કરવા માટે useEffect (દા.ત. Firebase માંથી)

import { useState, useEffect } from 'react';

function Events() {
  const [events, setEvents] = useState([]);

  useEffect(() => {
    // side effect: પહેલા render પછી એક જ વાર fetch (ખાલી dependency array)
    fetchEventsFromFirebase().then(setEvents);
  }, []);   // [] = mount વખતે એક જ વાર ચાલે

  return <ul>{events.map(e => <li key={e.id}>{e.name}</li>)}</ul>;
}
// React એ જ client SDK વડે Firebase સાથે જોડાય છે જે Angular માં વપરાય છે.

This example runs in Gri-Learn on the web, where you can edit it and see the output.

🧩 Quiz

React ના functional component માં useState hook શું કરે છે?

1. એ app ના routes નક્કી કરે છે
2. એ component ને state નો ટુકડો આપે છે: વર્તમાન કિંમત અને setter પાછાં આપે છે, અને setter બોલાવવાથી કિંમત બદલાય છે તથા component ફરી render થાય છે
3. એ સીધું database સાથે જોડાય છે
4. એ JSX ની જગ્યા લે છે

💭 Think first

Angular કે React: બંને કઈ રીતે સરખાવાય, અને તમે કયું શીખો છો એથી ફરક પડે?

હવે તમે Angular જાણો છો અને React નો થોડો સ્વાદ પણ. બંને કઈ રીતે જુદાં પડે છે, અને full-stack developer એ આ પસંદગીની ચિંતા કરવી જોઈએ? વિચારીને પછી tap કરો.

📖 Theory

BCA603-01 પૂરું

તમે એક પૂરેપૂરી full-stack application ની કલ્પના છેડેથી છેડા સુધી બાંધી છે: Angular front end (components, routing, forms, ફરી વાપરી શકાય એવું UI, deployment), Express/Node REST backend (routes, middleware, Mongoose દ્વારા MongoDB), બંનેને JSON APIs થી જોડ્યાં અને Firebase Auth તથા JWTs થી સુરક્ષિત કર્યાં, ઉપરાંત Firestore અને React નો સ્વાદ. આ full-stack web development નો પૂરો ચાપ છે. હવે તમે આધુનિક web app ના કોઈ પણ સ્તર વિશે વિચારી શકો છો, અને એમને એક ખરી, deploy કરી શકાય એવી પેદાશમાં જોડી શકો છો. Web પર આગળ બાંધવા માટે આ મજબૂત પાયો છે.

✅ Summary

Key takeaways

• React એ components માંથી UI બનાવવા માટેની જાણીતી JavaScript library છે; project Vite કે Create React App થી શરૂ થાય છે.
• આધુનિક React components એ functions છે જે JSX પાછું આપે છે, એટલે કે JavaScript ની અંદર લખાતી HTML જેવી syntax.
• useState component ને state આપે છે: કિંમત અને setter પાછાં આપે છે, અને કિંમત બદલાતાં component ફરી render થાય છે.
• useEffect render પછી side effects (જેમ કે data મંગાવવો) ચલાવે છે, જેને dependency array નિયંત્રિત કરે છે (ખાલી [] હોય તો mount વખતે એક જ વાર).
• React એ જ Firebase backend (client SDK) સાથે જોડાય છે જે Angular માં વપરાય છે.
• Angular પૂરેપૂરું અભિપ્રાયવાળું framework છે; React હળવી અને લવચીક library છે, પણ બંને component તથા state નો સહિયારો વિચારઢાંચો વહેંચે છે.
• યાદ રાખવાની કડી: React એટલે JSX માં functional components, state માટે useState, side effects માટે useEffect; વિચારો Angular માંથી સીધા કામ લાગે છે.