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

वह दूसरा Big Front End

आपने FestConnect का front end Angular में build किया, पर industry में दूसरा dominant choice React है। एक full-stack developer को दोनों recognise करने चाहिए। यह closing lesson React का एक taste है: इसे पढ़ने के लिए enough, देखने के लिए यह Angular से कैसे compare करता है, और जानने के लिए यह same Firebase backend से connect होता है।

React JSX में लिखे components से UIs build करता है, और useState और useEffect जैसे hooks से state और side effects manage करता है। अगर आप Angular की component thinking समझते हैं, React spirit में familiar लगेगा, हालाँकि style में lighter और ज़्यादा flexible है।

📖 Theory

Components, JSX, और Setup

React components से user interfaces build करने के लिए एक JavaScript library है। आप Vite (fast और modern) या older Create React App से एक project start करते हैं।

Modern React components functions हैं जो JSX return करते हैं, एक syntax जो आपको JavaScript के अंदर directly HTML-like markup लिखने देता है। तो एक component बस एक function है जिसका return value बताता है क्या render करना है। यह Angular के class-and-decorator style से lighter है: एक React component एक single small function हो सकता है। JSX एक जगह markup और logic mix करता है, यही React का signature look है, और एक बार यह click हो जाए, यह बहुत naturally पढ़ता है।

⌨️ Practical

useState के साथ एक React Functional Component

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);   // state: [value, setter]

  return (                                 // JSX: HTML-like markup in JS
    <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 में capabilities add करते हैं।

useState एक component को state देता है: const [count, setCount] = useState(0) current value और एक setter return करता है; setter call करना value update करता है और component को re-render करता है। useEffect render के बाद side effects run करता है, जैसे data fetch करना या subscribe करना, एक dependency array से controlled जो बताता है इसे कब re-run करना है (उदाहरण के लिए, एक empty array [] के साथ mount पर एक बार)।

तो useState है 'एक value याद रखिए और यह change होने पर re-render कीजिए', और useEffect है 'render होने के बाद कुछ कीजिए, जैसे data load करना'। साथ में ये ज़्यादातर वह cover करते हैं जो एक component को चाहिए, और यही तरीका है React Firebase से data और auth के लिए connect होता है।

⌨️ Practical

एक बार Data Load करने के लिए useEffect (जैसे Firebase से)

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    // side effect: fetch once after first render (empty dependency array)
    fetchEventsFromFirebase().then(setEvents);
  }, []);   // [] = run once on mount

  return <ul>{events.map(e => <li key={e.id}>{e.name}</li>)}</ul>;
}
// React integrates with Firebase via the same client SDK used in 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 define करता है
2. यह component को state का एक piece देता है: यह current value और एक setter return करता है, और setter call करना value update करता है और re-render कराता है
3. यह directly database से connect होता है
4. यह JSX को replace करता है

💭 Think first

Angular या React: ये कैसे Compare होते हैं, और आप कौन सा सीखते हैं यह Matter करता है?

अब आप Angular और थोड़ा React दोनों जानते हैं। ये कैसे अलग हैं, और एक full-stack developer को choice की worry करनी चाहिए? फिर tap कीजिए।

📖 Theory

BCA603-01 Complete

आपने end to end एक full-stack application concept build किया है: एक Angular front end (components, routing, forms, reusable UI, deployment), एक Express/Node REST backend (routes, middleware, Mongoose के through MongoDB), दोनों JSON APIs से connected और Firebase Auth और JWTs से secured, plus Firestore और React का एक taste। यही full-stack web development का complete arc है। अब आप modern web app की किसी भी layer के बारे में reason कर सकते हैं, और इन्हें एक real, deployable product में connect कर सकते हैं। Web पर build करने के लिए एक strong foundation।

✅ Summary

Key takeaways

• React components से UIs build करने के लिए एक popular JavaScript library है; Vite या Create React App से set up कीजिए।
• Modern React components functions हैं जो JSX return करते हैं, JavaScript के अंदर लिखा एक HTML-like syntax।
• useState एक component को state देता है: यह value और एक setter return करता है, और update करना component को re-render कराता है।
• useEffect render के बाद side effects (data fetch करने जैसे) run करता है, एक dependency array से controlled (empty [] mount पर एक बार run होता है)।
• React Angular में इस्तेमाल हुए same Firebase backend (client SDK) से connect होता है।
• Angular एक full opinionated framework है; React एक lighter flexible library है, पर दोनों component/state mental model share करते हैं।
• Memory hook: React = JSX में functional components, state के लिए useState, side effects के लिए useEffect; concepts Angular से transfer होते हैं।