FSGeek
Mało jest aplikacji, które składają się tylko z jednego widoku. Zdecydowana większość ma ich więcej i pojawia się potrzeba sprawnego zarządzania nimi z poziomu kodu. W przypadku aplikacji opartych na React’cie z pomocą przychodzi react-router.
Instalacja react-router
Aby dodać do projektu tą bibliotekę przy pomocy yarna należy skorzystać z tego polecenia:
yarn add react-router
Doda ono nowy wpis do pliku package.json oraz pobierze react-router do naszego projektu.
Konfiguracja react-router
Jednak, żeby z niego skorzystać trzeba skonfigurować aplikację w odpowiedni sposób. Zacząłem od stworzenia pliku app.routes.js w którym będą skonfigurowane ścieżki po jakich może się poruszać użytkownik. Korzystałem z poradnika, który znajduje się na repozytorium githuba pod tym adresem. W mojej aplikacji skorzystałem z Plain Routes które wydaje mi się rozwiązaniem czystym i najmniej skomplikowanym. Dlaczego? Po samej budowie widać jakie mamy dostępne ścieżki i jak one zależą od siebie. U mnie ten plik wygląda następująco:
const routes = {
path: '/',
component: App,
indexRoute: { component: Calendar },
childRoutes:[
{path:'/settings', component: Settings}
]
}
export default () => (
<Router history={browserHistory} routes={routes}></Router>
);
Łatwo zauważyć, że występuje jedna główna ścieżka pod którą będę podpinał ścieżki potomne. Na razie jest tylko jedna ze stroną ustawień ale w przyszłości może to się zmienić. Warto też wspomnieć ze możemy definiować ścieżki potomne w ścieżkach potomnych co daje nam dość sporą swobodę w działaniu i pozwala w łatwy sposób rozbudowywać aplikację
Oprócz tego aby wszystko działało musiałem troszkę zmodyfikować zawartość pliku src/app.js . Nie było to trudne bo wystarczyło, że zamieniłem ten fragment kodu
ReactDOM.render(
<App />,
document.getElementById('root')
);
na następujący
ReactDOM.render(
appRoutes(),
document.getElementById('root')
);
gdzie appRoutes jest zaimportowanym plikiem app.routes.js
import appRoutes from './app/app.routes'
Ostatnią rzeczą jaka została mi do wyedytowania była zawartość komponentu App która wygląda teraz tak:
class App extends Component {
render() {
return (
<div> Menu & Layout
Menu
<div>
<Link to="/">Kalendarz</Link>
<Link to="/settings">Ustawienia</Link>
</div>
{this.props.children}
</div>
);
}
}
Najważniejsze w tym pliku jest linijka 10. Definiuje ona w którym miejscu naszego głównego komponentu chcemy tworzyć widoki z komponentów pochodnych. Bez tego nasz widok nie będzie się zmieniał pomimo dobrze skonfigurowanego routingu.
Github Pages
Żeby ułatwić sobie sprawę z github pages dodałem do devDependencies gh-pages. Korzystanie z tego sprowadza się do dodania dwóch wpisów do package.json
"predeploy": "npm run build", "deploy": "gh-pages -d build"
i wywołaniu następującego polecenia w konsoli gdy chcemy zaktualizować kod na github pages
yarn run deploy
Komenda ta wysyła zbudowane pliki na branch gh-pages.
Jednak nie było tak fajnie jak myślałem bo początkowo projekt nie chciał działać. Po trwającym chwilę przeszukiwaniu Google’a okazało się że używane przez mnie browserHistory nie jest obsługiwane przez Github Pages więc na potrzeby dema zmieniłem to na hashHistory. I teraz na szczęście działa więc możecie tutaj sprawdzić jak działa react-router.
Na razie to tyle. Moim następnym krokiem będzie poprawienie wyglądu komponentów tak by jakoś to wyglądało. Niedługo też pojawi się post dotyczący SCSS i BEM’a. Zapraszam do śledzenia bloga i do usłyszenia.
