Slide 1

Slide 1 text

React Colocation Evolution Sibelius Seraphini

Slide 2

Slide 2 text

Sibelius Seraphini @sibelius @sseraphini Abstract Engineer

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

State Colocation const Post = () => { const [isLoading, setIsLoading] = useState(false); /* render post, etc */ }

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Style Colocation const Text = styled.span` font-size: 16px; color: red; `

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Route/Navigation Colocation Define navigation configuration class HomeScreen extends React.Component { static navigationOptions = { title: 'Home', }; /* render function, etc */ }

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Relay Data Colocation Define which data your component needs

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Effects Colocation useEffect(() => { i18n.changeLanguage(lang); }, [lang]);

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

What's missing? Event Handling Animations Tests Documentation ?

Slide 20

Slide 20 text

Thanks! We are hiring! Join Us

Slide 21

Slide 21 text

Give me a Feedback: https://entria.feedback.house/sibelius