Components, JSX and props

A React interface is a tree of components. A component is a function that takes props (its inputs) and returns JSX, which looks like HTML and describes what should appear. Props flow one way, from parent to child.

A component should never change the props it receives. Learn to split a screen into components, one per job. To render a list, use map and give each item a stable key: an id from your data, not the array position, when items can move.

To show something only sometimes, use && or a ternary (a ? b : c). The children prop lets you build a wrapper, like a Card or Layout, that can hold anything. In the first stage you changed the DOM (the page's live structure) by hand.

Here React updates it for you. The new question is where each piece of data should live, which the next topic answers.