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: