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

The other big front end

You built FestConnect's front end in Angular, but the other dominant choice in the industry is React. A full-stack developer should recognise both. This closing lesson is a taste of React: enough to read it, see how it compares with Angular, and know it connects to the same Firebase backend.

React builds UIs from components written in JSX, and manages state and side effects with hooks like useState and useEffect. If you understand Angular's component thinking, React will feel familiar in spirit, though lighter and more flexible in style.

📖 Theory

Components, JSX, and setup

React is a JavaScript library for building user interfaces from components. You start a project with Vite (fast and modern) or the older Create React App.

Modern React components are functions that return JSX, a syntax that lets you write HTML-like markup directly inside JavaScript. So a component is just a function whose return value describes what to render. This is lighter than Angular's class-and-decorator style: a React component can be a single small function. JSX mixing markup and logic in one place is React's signature look, and once it clicks, it reads very naturally.

⌨️ Practical

A React functional component with useState

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 and useEffect

Hooks add capabilities to functional components.

useState gives a component state: const [count, setCount] = useState(0) returns the current value and a setter; calling the setter updates the value and re-renders the component. useEffect runs side effects after render, such as fetching data or subscribing, controlled by a dependency array that says when to re-run it (for example, once on mount with an empty array []).

So useState is 'remember a value and re-render when it changes', and useEffect is 'do something after rendering, like load data'. Together they cover most of what a component needs, and they are how React connects to Firebase for data and auth.

⌨️ Practical

useEffect to load data once (e.g. from 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

In a React functional component, what does the useState hook do?

1. It defines the app's routes
2. It gives the component a piece of state: it returns the current value and a setter, and calling the setter updates the value and re-renders
3. It connects to the database directly
4. It replaces JSX

💭 Think first

Angular or React: how do they compare, and does it matter which you learn?

You now know both Angular and a bit of React. How do they differ, and should a full-stack developer worry about the choice? Then tap.

📖 Theory

BCA603-01 complete

You have built a full-stack application concept end to end: an Angular front end (components, routing, forms, reusable UI, deployment), an Express/Node REST backend (routes, middleware, MongoDB via Mongoose), the two connected with JSON APIs and secured with Firebase Auth and JWTs, plus Firestore and a taste of React. That is the complete arc of full-stack web development. You can now reason about any layer of a modern web app, and connect them into a real, deployable product. A strong foundation for building on the web.

✅ Summary

Key takeaways

• React is a popular JavaScript library for building UIs from components; set up with Vite or Create React App.
• Modern React components are functions that return JSX, an HTML-like syntax written inside JavaScript.
• useState gives a component state: it returns the value and a setter, and updating re-renders the component.
• useEffect runs side effects (like fetching data) after render, controlled by a dependency array (empty [] runs once on mount).
• React connects to the same Firebase backend (client SDK) used in Angular.
• Angular is a full opinionated framework; React is a lighter flexible library, but both share the component/state mental model.
• Memory hook: React = functional components in JSX, useState for state, useEffect for side effects; the concepts transfer from Angular.