DROPS IV - Como organizo meus projetos em React

Não sei se é só eu, mas tenho problemas com React, mesmo me divertindo com e achando uma das ferramentas mais produtivas que vi em anos. Meu problema com o React é um pouco do ecossistema e o infinito de configurações ao invés de convenções (Ember ❤) e também aquele infinito de declarações de estrutura misturado com estilos e código que depois falam que não está misturando nada só tecnologia. (vou publicar meu artigo detalhadamente sobre, prometo)

Mas vamos ao que importa que é como organizei os arquivos e para mim fez sentido, pode ser até o recomendado e já usado no mercado, mas para aplicação de pessoal de React Native separei da seguinte forma:

Components

Acredito que ao trabalhar com uma arquitetura orientada a components essa separação é importante, junto dela deve existir algo para um shared-components, essa estrutura ajuda para components em comum de outras estruturas.

Estruturas principais de components serve para organizar um conjunto de telas e fica em uma estrutura principal no mesmo nível da shared-components. Por exemplos Authentication tem as telas de login e signup dentro dela.

Nessa estrutura principal deve exister um arquivo index.js que expõe os arquivos das pastas para a aplicação principal.

Screen-Components

Vou chamar dessa forma as estruturas que montam e agem para uma tela em si, vamos usar a já citada tela de Login que vc encontraria na seguinte caminho no terminal /App/components/authentication/login/.

Devem existir 3 arquivos um index.js, login.js e login.styles.js, cada arquivo representa uma função bem especifica, expor a classe, para evitar a declaração login/login, organizar estilos dessa tela e também conter a lógica do component.

O arquivo index.js seria algo assim:

// index.js
import { Login } from './login';
export default { Login };

Já o login.js ficaria assim:

import React from 'react'
import { Text, TextInput, View, Button } from 'react-native';

import { styles } from './login.style';

export default class Login extends React.Component {}

e o arquivo de login.styles.js:

import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({});
export default { styles };

Isso ajuda a ter arquivos menores e com mais fácil manutenção, ainda estou pensando em algo para separar essa lógica da renderização, mas aí não seria React.

Me fale seus opiniões sobre o assunto lá no twitter. :)