React ColocationEvolutionSibelius Seraphini
Sibelius Seraphini
Abstract Engineer

State Colocation

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

Style Colocation

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

Route/Navigation Colocation

    class HomeScreen extends React.Component {
      static navigationOptions = {
        title: 'Home',
      };
      /* render function, etc */
    }

Define navigation configuration

Relay Data Colocation

const Post = ({ post }) => (
  <div>
    <span>{post.title}</span>
    <span>{post.description}</span>
  </div>
);
const PostFragmentContainer = createFragmentContainer(
  Post, {
  post: graphql`
    fragment Post_post on Post {
      id
      title
      description
    },
  `,
});

Define which data your component needs

Effects Colocation

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

What's is missing?

  • Event Handling
  • Animations
  • Tests
  • Documentation
  • ?
Thanks!
We are hiring!
Join Us