ReactJS - Project 1

WHAT DID I LEARN WHILE WORKING ON THIS PROJECT

1. JSX

In JSX we have to define inline styles using an object 'style={{color: 'red'}}'.
JSX produces a JavaScript expression.
Statements are not allowed (if/else, for, switch).

2. Components

The components can have data, logic and appearance of the UI
Here the Logic and UI are tightly coupled (HTML and JS are colocated).
One Concern Per Component.

3. Props

Props are used to pass data from parent component to child components (down the component tree).
Communication channel betweeen a parent and a child component
Passing props in component <Pizza pizzaImg={data.photoName} name={data.name}/>.

4. Immutability

Props are readonly or immutable (can't be changed).
To mutate props we need state.
Mutating props would affect parent, creating side effects (not pure).

5. What One-Way Data Flow Means

Data can only be passed from parent to children.

BASIC INFO

Data : Made of props and state.
State : Internal data that can be updated by the component's logic.
Props : Data coming from the outside, and can only be updated by the parent component.
Side Effect : It happens whenever there's change in data that's located outside of the current function.