React Colocation

React changed the way we developed apps.
We used to split out logic in differents parts, but now we colocated them.
What we colocate?
- view
- state
- event handlers
- style
- route
- effects
- data

1. React Colocation Evolution Sibelius Seraphini
2. Sibelius Seraphini @sibelius @sseraphini Abstract Engineer
8. State Colocation const Post = () => { const [isLoading, setIsLoading] = useState(false); /* render post, etc */ }
10. Style Colocation const Text = styled.span` font-size: 16px; color: red; `
12. Route/Navigation Colocation Define navigation configuration class HomeScreen extends React.Component { static navigationOptions = { title: 'Home', }; /* render function, etc */ }
15. Relay Data Colocation Define which data your component needs
17. Effects Colocation useEffect(() => { i18n.changeLanguage(lang); }, [lang]);
19. What's missing? Event Handling Animations Tests Documentation ?
20. Thanks! We are hiring! Join Us
21. Give me a Feedback: https://entria.feedback.house/sibelius