Stage 2 · Lesson 1 of 10
Components, props and JSX
A screen is a tree of components. A component is a function that takes (its inputs) and returns JSX, which describes the UI. This is declarative UI: you describe what to show and React draws it.
Props flow from parent to child and are read-only. So a ProductCard receives a product and shows it, and the list screen maps an array of products into many cards. JSX is underneath.
You use map for lists, && or a (a ? b : c) for parts that only sometimes show, and curly braces for values. Split a design into small components with clear props, written in so the props have types.
Common trapa 400 line screen component, or rendering a number with && when it can be 0, which crashes on native.
A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- GuideFreeExpo Documentation
Expo
The Expo tutorial builds a small app you run on your own phone
- GuideFreeReact Documentation
Meta
"Describing the UI" and "Adding interactivity" cover the React you need