# Part 08 miroslav.binas@tuke.sk / [**SMART**](https://kurzy.kpi.fei.tuke.sk/smart)
## Example: Torch App

Turn On
## Project Structure
## What is Component? > Component is small isolated, independent and reusable part for componsing the UI. ([React Native](https://reactjs.org/docs/components-and-props.html))
## Share Data Between the Components
## Existing Relationships 1. parent to child component 2. child to parent component 3. between siblings 4. sharing data between not related components
## Parent to Child ![Parent to Child](https://www.javascriptstuff.com/static/parent-to-child-fc4c68730b003da3f9d20dd57cf52d20-8aa1a.png)
## Properties
## Properties are Read-Only! they are immutable!
## Pure Function **All React components must act like pure functions with respect to their props.**
## Child to Parent ![Child to Parent](https://www.javascriptstuff.com/static/child-to-parent-a34180d7d83bb61f4f1fab6eecc620a6-8aa1a.png)
## Between Siblings ![Sibling to Sibling](https://www.javascriptstuff.com/static/sibling-to-sibling-e9e0b2563138c72f4786301fcd0fbd18-8aa1a.png)
## ### Sharing data between not related components ![Any to Any](https://www.javascriptstuff.com/static/any-to-any-61fe0f2813dfcb909c9ff3ed042c0abc-8aa1a.png)
![The Problem](https://css-tricks.com/wp-content/uploads/2016/03/redux-article-3-01.svg)
## Existing Approaches * Global Variables * Context * Observer Pattern
![Redux](../images/redux.png)
## Questions?