WorkTimetable#1 Czas zacząć projekt

Aleksander Patschek

Czas czytania: 2 min
Liczba słów: 370
Data: 04-03-2017
Udostępnij:

Jako, że konkurs już się zaczął to czas zacząć programować. Dziś będzie jeszcze krótko na temat startu projektu w React’cie. W moim projekcie zamiast standardowego menadżera npm będę korzystać z yarna(trochę informacji o nim i dlaczego uważam, że jest lepszy od npm znajdziecie TUTAJ). Tak więc nie zostaje nam teraz nic innego niż stworzyć WorkTimetable.

Niech się stanie WorkTimetable

Jeśli zajrzeliście do innych moich postów to wiecie, że jestem zwolennikiem generatorów do tworzenia ogólnego szablonu aplikacji. Jako, że chciałbym korzystać z SCSS użyję  https://github.com/kitze/custom-react-scripts.

Korzystanie z niego jest proste i sprowadza się najpierw do zainstalowania go globalnie przy pomocy yarna a następnie użyciu komendy

create-react-app WorkTimetable --scripts-version custom-react-scripts

do stworzenia nowego projektu. Oto co dostajemy po użyciu komendy.

Zrzut ekranu 2017 02 27 o 09 15 17

Jednak mnie nie wystarczyło takie coś więc dostosowałem to pod swoje wymagania i wizję. Stworzyłem sobie podstawową strukturę katalogów. Jako, że w większości są na razie puste skorzystałem z .gitkeep aby się prawidłowo dodały do do Git’a. Po moich zmianach struktura aplikacji wygląda następująco:

Zrzut ekranu 2017 03 03 o 22 56 42

Prawda, że przyjemniej?

Jako, że struktura została wymyślona przeze mnie i nie wszyscy się mogą z nią zgodzić chciałbym pokrótce wyjaśnić co będzie w każdym z folderów. Jeśli macie pomysły lub lepiej praktykę jakby można to było lepiej ułożyć to zapraszam do komentowania. Póki co struktura będzie wyglądać następująco:

  • actions – będę tam trzymał definicje wszystkich akcji używanych w systemie np.: GET_EVENTS
  • reducers – miejsce na reducery, czyli funkcje które będą defioniowały jak aplikacja ma się zmieniać po wystąpieniu konkretnych akcji
  • routes – w tym katalogu będą trzymane wszystkie komponenty Reactowe wraz ze stylami

Co to są akcje i reducery powiem dokładnie jak będę do aplikacji wprowadzał Redux’a.

Repozytorium Github

Ostatnią rzeczą jaka została mi do zrobienia na starcie to wrzucenie mojego podstawowego projektu do repozytorium GitHub’a. Nie było to dosyć skomplikowane i wymagało użycia następujących komend:

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/Feridum/WorkTimetable-UI.git
git push -u origin master

Bonus

Jako bonus mam zamiar skorzystać Github Pages aby pokazywać wam działający projekt. Będę do tego używał folderu docs dzięki czemu będziecie mogli na bieżąco śledzić stan mojego projektu od strony UI. Możecie śledzić to na bieżąco tutaj. Początkowo miałem trochę problemów żeby to działało ale w końcu się udało.

Na razie to tyle. W przyszłym tygodniu mam zamiar dalej rozbudowywać projekt i napisać co nieco o SCSS oraz BEM’ie z których będę korzystał.

Jeśli podobał ci się ten artykuł to dołącz do newslettera. Dostaniesz dodatkowe treści do każdego postu oraz eksluzywne materiały, które pomogą ci pisac lepszy kod Chcę uzyskać dostęp do bonusów