Theory
Building a UI from LEGO bricks
FestConnect's page has 40 event cards, each the same shape with different data. In BCA405-01 you would build them by hand with DOM manipulation, tedious and error-prone.
React offers a better way: build the UI from components, reusable bricks you define once and reuse everywhere. Write an EventCard component ONCE, then render it 40 times with 40 different events. If this reminds you of Flutter's widgets from BCA405-02, that is no accident: same idea, different framework. This unit rebuilds FestConnect's front-end in React, starting with its 3 core ideas: components, JSX, and props.
Theory
Components and JSX
React is a JavaScript LIBRARY for building user interfaces from components: self-contained, reusable pieces of UI.
A component is a function (Capitalised name) that RETURNS what to show, written in JSX: an HTML-like syntax embedded in JavaScript.
function EventCard() { return <h2>Garba Night</h2>; }
JSX lets you write markup right inside your code (it is transpiled to JavaScript behind the scenes). And components NEST: an EventList component renders many EventCard components inside it. This composition, components within components, is how a whole page is built from small, understandable bricks.
Practical
A component receiving data through props
// A reusable component. It receives data via `props`.
function EventCard(props) {
return (
<div className="card">
<h2>{props.name}</h2> {/* {} embeds JS in JSX */}
<p>Seats: {props.seats}</p>
</div>
);
}
// A parent component nests EventCards, PASSING data down as props:
function EventList() {
return (
<div>
<EventCard name="Garba Night" seats={350} />
<EventCard name="Coding Contest" seats={60} />
</div>
);
}
// EventList (parent) -> EventCard (child), data flows DOWN via props.
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
Props: data flowing down, read-only
Props (short for properties) are how a PARENT passes data to a CHILD component. In the listing, EventList passes name="Garba Night" and seats={350} to each EventCard, which reads them as props.name and props.seats.
Two rules define props:
- one-way flow: data flows DOWN, parent to child (never up through props)
- read-only: a component must NEVER modify its own props; they belong to the parent
This immutable, one-directional flow makes React predictable: to find where a value comes from, you look UP to the parent. If a child needs to CHANGE something, that is STATE (next lessons), not props. Props are the child's inputs, fixed by the parent.
Quiz
What are props in React, and what is a key rule about them?
- Props are a component's private changeable variables
- Props pass data from a parent to a child component and are READ-ONLY: a child must not modify them
- Props flow from child up to parent
- Props are the same as the page's HTML tags
Show the answer
Props pass data from a parent to a child component and are READ-ONLY: a child must not modify them
Props pass data DOWN from a parent component to a child, and they are READ-ONLY: the child reads them but must never modify them (they belong to the parent). This one-way, immutable flow is what makes React predictable. Option A confuses props with STATE (a component's own changeable data, coming in later lessons). Option C reverses the direction: props flow parent-to-child, not child-to-parent. Option D confuses props with markup: props are the data passed to a component, JSX is the markup it returns. Remember: props flow down and are immutable; changeable data is state.
Think first
React components, Flutter widgets: same idea?
In BCA405-02 you built Flutter UIs from widgets that nest in a tree and take configuration through named parameters. How does React's model compare? Then tap.
Show the answer
They are strikingly parallel. A React COMPONENT is like a Flutter WIDGET: a reusable, self-contained UI piece. Both NEST into a TREE (an EventList of EventCards; a Column of Cards). And React PROPS are like Flutter's constructor/named parameters: the read-only configuration passed from parent to child. Even the philosophy matches: build complex UIs by composing small pieces, with data flowing down the tree. The differences are surface: React uses JSX and JavaScript, Flutter uses Dart widgets; React runs in the browser, Flutter compiles to native. But the MENTAL MODEL, a tree of configurable, composable UI pieces, is the same. Learn it once (as you did in Flutter) and React's structure feels familiar immediately. That transfer is the real payoff of learning frameworks.
Watch out
React basics traps
Lowercase component names: components must be Capitalised (EventCard, not eventCard), or React treats them as HTML tags.
Modifying props: props are read-only; changing them is a bug; use state for changeable data.
className not class: JSX uses className (class is a JS reserved word).
Forgetting {} for JS in JSX: embed JavaScript values with curly braces: {props.name}.
React is a library, not a language: it is JavaScript; JSX is a syntax extension, not a new language.
Theory
Components render; now make them react
You can build FestConnect's UI from nested components fed by props. But so far the components are STATIC: they display data and never change. Real UIs REACT to the user: clicking, typing, toggling. The next lesson covers components that respond, handling events, rendering lists and conditionals, using React's class-component style, before hooks bring the modern function-component approach. From displaying data to reacting to users.
Summary
Key takeaways
- React is a JavaScript library for building UIs from components: reusable, self-contained UI pieces.
- Components are functions (Capitalised) that return JSX, an HTML-like syntax embedded in JavaScript.
- Components nest (components within components): a page is built from small composable bricks.
- Props pass data from a parent to a child component: props.name, props.seats.
- Props flow one-way (down, parent to child) and are READ-ONLY: a child never modifies them.
- The component-tree-with-props model mirrors Flutter's widget tree from BCA405-02.
- Memory hook: components are bricks, JSX is markup-in-JS, props flow down and are read-only.