if (loading) {
<Loading>
} else if (error) {
<Error>
} else {
return (код компонента);
}export default (props) => {
if (props.data.loading) {
return <div>Loading</div>
}
return <div />
}import React from 'react'
import { Link } from 'react-router-dom'
import './Registration.scss'
export default () => (
<div>
<h1>Sign up</h1>
<Link to="/sign_in">Sign in</Link>
</div>
)body {
background-color: yellow;
}import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, Switch } from 'react-router'
import createHistory from 'history/createBrowserHistory'
// SHARED
import './shared/stylesheets/base.scss'
// APPS
import Welcome from './welcome'
import Authorization from './authorization'
import Registration from './registration'
const history = createHistory()
const div = document.createElement('div')
document.body.append(div)
ReactDOM.render(
<Router history={history}>
<Switch>
<Route component={Welcome} exact={true} path="/" />
<Route component={Authorization} exact={true} path="/sign_in" />
<Route component={Registration} exact={true} path="/sign_up" />
</Switch>
</Router>,
div
)body {
text-align: center;
}body {
text-align: center; }
body {
background-color: yellow; }А зачем это надо? Во первых, одним файлом загружать гораздо быстрее, чем десятками мизерных почти с одним и тем же пустым шаблоном кода.
Если делать индивидуально для каждой страницы - может быть пересекающийся код, который помимо трафика сожрет повторно еще и оперативки.
Например, то же сжатие gzip имеет смысл на файлах >8kb, в противном случае он может не только не сжимать код, но и немного увеличить. При этом один собранный общий файл js или css gzip легко может сжать и в 10 раз.
Собирать код в общие файлы также полезно и для сервера. Даже если они кэшируются браузером, браузер все равно отправляет запрос по каждому файлу web-серверу, который в свою очередь смотрит в папку с проектом и отвечает браузеру, что файл не изменился. А каждое обращение к HDD съедает его ресурс и увеличивает время переходов по сайту.
Мое мнение - если у вас меньше 20Мб яваскрипта и стилей - не стоит задумываться об их разделении. Большой головняк и при этом минимум эффективности.