Components & props

Session 2
Getting into React

● Components

● Props
Learning Focus
● To be able to understand the concepts behind react
● To be able to explain why we use components
● To be able to write some simple JSX
Why components
We often need to break things down into more manageable
chunks.

We can then reuse these components

DRY - Don’t repeat yourself

Dynamic - we can render the same component with

different dynamic values so they appear different each time.
Functional vs class based components
Class based components are the old way of doing it. It is a little harder to understand, but it is worth
knowing because some things can still only be achievedwith class components, and there is still a
lot of legacy code out there.

Functional components just look like a function. They used to be quite limited, but they are now
very close to class based components, in terms of what you can do with them thanks to HOOKS.

The lifecycle events can be done by using hooks. Common examples of these hooks are useState
and useEffect.
Props
Props are dynamic properties that you give to a component.

They can be ‘passed’ into the component, by simply adding an attribute

when you ‘call’ the component ( ie in the tag of the component
<MyComponent color=”red” /> )

Then, in your component, you describe what to do with that prop. Eg. you
could say return a div with a background of whatever the value for color is.
Reusablity
This way you can re use the component, but pass in a different value for the
prop each time so you can use the component many times but with different
values.