Communication

...needs multiple components

Composability

Separation of concerns

Data flow

How do components communicate?

Parent-child communication:

Passing props

Child-parent communication:

Passing handlers as props in order to get child component information in the parent when such handlers are executed

Communication between two independent components:

Subscribers (e.g.: Flux, Alt or Redux)

Let's code!

Forms

Forms are controlled via interactive props:

• value
• checked
• selected

Form state is updated via events:

• onChange
• onInput
• onSubmit

Keep on coding!

Stateful and stateless

Stateful components own data, so that they can make UI interact

Stateless components just render data

Lists

Dynamic children are the key

React Router

Routing library for React that keeps our UI in sync with the URL

by React Training

One Router, multiple Route

We can Redirect and also navigate through Link

Different options for route matching

Animation between sections

Let's taste it!

Context

Passing info automatically through a tree