React - podział i konstrukcja plików

Cześć,
piszę w Reakcie aplikację dla własnego rozwoju. Używam react-router i material-ui (gwoli wyjaśnienia niektórych fragmentów kodu, które będą niżej). Moje pytanie dotyczy faktycznego rozdziału kodu na komponenty i kontenery (choć kontenery to raczej pojęcie Reduxowe, to używam go tutaj jako "połączenie" komponentów w większy element).

Konkretnie: mam 3 pliki: LoginComponent, LoginPageContainer i CustomizedSnackbar. Chciałbym się dowiedzieć, czy dzielę pliki zgodnie z tym, co jest oczekiwane (tzn. - czy też byście tak podzielili). Pierwszy zawiera komponent od logowania, zmodyfikowany kod z material-ui; drugi to opakowany w Grida LoginComponent. Snackbar to tylko element informacyjny jeżeli wystąpią jakieś błędy. Idąc po kolei od roota aplikacji renderowanie wygląda tak:

App.js:

<Router>
                <MuiThemeProvider theme={theme}>
                    <Route exact path="/" component={**LoginPageContainer**} />
                    <Route path="/leagues" component={LeaguesPageContainer} />
                </MuiThemeProvider>
</Router>

LoginPageContainer.js:

<Grid
                container
                spacing={0}
                direction="column"
                alignItems="center"
                style={{minHeight: '100vh'}}>
                <Grid item xs={12}>
                    <img src={logo} alt="Logo" style={{maxHeight: '10em', marginTop: "2em"}}/>
                    <LoginComponent/>
                </Grid>

            </Grid>
        )

LoginComponent.js:

<main className={classes.main}>
                <CssBaseline/>
                <Paper className={classes.paper}>
                    <Avatar className={classes.avatar}>
                        <LockOutlinedIcon/>
                    </Avatar>
                    <Typography component="h1" variant="h5">
                        Zaloguj się
                    </Typography>
                    <form className={classes.form} onSubmit={this.handleSubmit}>
                        <FormControl margin="normal" required fullWidth>
                            <InputLabel htmlFor="email">Nazwa użytkownika</InputLabel>
                            <Input id="username" name="email" onChange={this.handleChange} autoComplete="username"
                                   autoFocus/>
                        </FormControl>
                        <FormControl margin="normal" required fullWidth>
                            <InputLabel htmlFor="password">Hasło</InputLabel>
                            <Input name="password" type="password" id="password" onChange={this.handleChange}
                                   autoComplete="current-password"/>
                        </FormControl>
                        <FormControlLabel
                            control={<Checkbox value="remember" color="primary"/>}
                            label="Zapamiętaj mnie"
                        />
                        <Button
                            type="submit"
                            fullWidth
                            variant="contained"
                            color="primary"
                            className={classes.submit}>
                            Zaloguj
                        </Button>
                    </form>
                </Paper>
                <CustomizedSnackbar variant="error" text={this.state.errorReason} open={this.state.open}
                                    handler={this.handleClose}/>
            </main>

Snackbara tu nie będę wstawiał, jest to po prostu lekko zmodyfikowany kod z material-ui. Zależy mi na radach dotyczących podziału plików, czystego kodu, dobrych praktyk. Uczę się JS i Reacta od jakiegoś czasu, nawet w tym pracowałem, ale chcę wyplenić ze swojego sposobu pisania złe nawyki.

Mniej więcej tak wygląda widok:

(pomijając logo, obrazki wstawiać umiem :P. Screen jest krzywy, bo chciałem pokazać też Snackbara)

A tak drzewo projektu:

Jeśli chodzi o strukturę plików w projekcie to powinieneś wybrać taką, która pozwoli ci łatwo nawigować między nimi.
Jest tego wiele:

Jednak to które wybierzesz nie ma kompletnie znaczenia, najważniejsze to żeby był wszędzie porządek i żeby było ci wygodnie na tym pracować ;)

W świecie reacta nie ma jednego słusznego podejścia, więc jedyne co jest oczekiwane to to że się dostosujesz do tego co będzie w projekcie :). Ja osobiście preferuje podział wertykalny, zwany również "Grouping by features or routes" w dokumentacji reacta.
Czyli w folderze components lądują tylko komponenty używane przez więcej niż jeden feature/route, a a komponenty które są używane tylko przez jeden feature/route lądują wewnątrz niego.

a czy ktoś próbówał, albo ma jakieś zdanie na temat react atomic design?