Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Colocation

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

4f821cc50056b266277a2156593eb96c?s=128

Sibelius Seraphini

September 12, 2019
Tweet

More Decks by Sibelius Seraphini

Other Decks in Research

Transcript

  1. React Colocation Evolution Sibelius Seraphini

  2. Sibelius Seraphini @sibelius @sseraphini Abstract Engineer

  3. None
  4. None
  5. None
  6. None
  7. None
  8. State Colocation const Post = () => { const [isLoading,

    setIsLoading] = useState(false); /* render post, etc */ }
  9. None
  10. Style Colocation const Text = styled.span` font-size: 16px; color: red;

    `
  11. None
  12. Route/Navigation Colocation Define navigation configuration class HomeScreen extends React.Component {

    static navigationOptions = { title: 'Home', }; /* render function, etc */ }
  13. None
  14. None
  15. Relay Data Colocation Define which data your component needs

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

  18. None
  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