Konfiguruje się — blog react.js

Konfiguracja projektu node’owego potrafi dać w kość. Niby nic w tym trudnego, ale zajmuje sporo czasu. Wymaga ciągłego czytania wszelakich dokumentacji i zwracania uwagi, czy instrukcje dotyczą aktualnie używanej przez nas wersji. Jakby tego było mało, każdego dnia wyłączam laptopa w momencie, gdy projekt nie może być nawet poprawnie uruchomiony. Po wykonaniu komendy npm start terminal wesoło miga do mnie czerwonymi wiadomościami o błędach. Mimo wszystko próbuję i kolejnego dnia doprowadzam kod do stanu używalności.

Na samym początku skupiłam się na umożliwieniu poprawnego zbudowania wersji produkcyjnej bloga. Używając npm run build w folderze build tworzony był plik index.js i nic więcej. Dodałam więc dodatkowy plugin (html-webpack-plugin) w webpack’u odpowiedzialny za eksportowanie plików html. Od teraz po wgraniu zawartości folderu build na serwer strona będzie poprawnie wyświetlana.

Następnie zajęłam się wdrożeniem podstawowej struktury plików w projekcie, opartej na metodologii atomic design. Według niej komponenty powinny być podzielone tak, aby można je było użyć ponownie. Nie trzeba będzie pisać ich za każdym razem od nowa, bądź kopiować, a projekt zyska na spójności.

Przykładowy podział w atomic design:

  • atomy — najmniejsze elementy, na przykład: przycisk, odnośnik czy paragraf,
  • molekuły — komponenty korzystające z atomów (np. menu),
  • organizmy — komponenty korzystające z molekuł i atomów (nagłówek)
  • szablony — szablony stron do wielokrotnego użycia,
  • strony — gotowe projekty poszczególnych widoków.

Samych komponentów jeszcze nie tworzę, przeniosłam tylko zawartość głównego komponentu <App /> do <MainPage />.

Poniżej zawartość pliku src/App.js:

import MainPage from './src/components/4-pages/mainPage';
class App extends React.Component {
render(){
return (
<MainPage />
);
}
}

Tak wygląda src/components/4-pages/mainPage/index.js:

class MainPage extends React.Component {
render(){
return (
<div>
<h1>Lorem ipsum dolor!!!</h1>
<div>Lorem ipsum dolors sit amet...</div>
</div>
);
}
}

Jednocześnie zajęłam się wdrażaniem react-hot-loader, aby aplikacja odświeżała się bez utraty stanu oraz aliasów, aby można było użyć:

import MainPage from 'pages/mainPage';

zamiast:

import MainPage from './src/components/4-pages/mainPage';

O ile react-hot-loader nie przysporzył mi większych trudności , to funkcjonalność tak prosta jak aliasy w webpack’u wręcz przeciwnie. Wnioski na przyszłość można streścić do stwierdzenia: sprawdzaj dokumentację webpack’a 2, a nie poprzedniej wersji.

const path = require('path');
...
resolve: {
alias: {
atoms: path.resolve(__dirname, 'src/components/1-atoms/'),
molecules: path.resolve(__dirname, 'src/components/2-molecules/'),
organisms: path.resolve(__dirname, 'src/components/3-organisms/'),
pages: path.resolve(__dirname, 'src/components/4-pages/')
}
}

Dzięki, że zostaliście ze mną. W kolejnej odsłonie przygód programistycznych z react’em zajmę się podpinaniem styli.

Stay tuned :)

Projekt robiony w ramach konkursu “Daj Się Poznać”. Aktualny kod źródłowy możecie znaleźć na github’ie.