tutorial ReactJS, lokalizacje plików Opcje

[eFK]

Witam serdecznie,

robię tutorial ze strony http://www.merixstudio.pl/blog/nie-boj-sie...awy-biblioteki/ i mam problem jakie powinny być lokalizację plików względem siebie, oraz gdzie, co powinno być doinstalowane. Akurat normalnie pracuję na XAMPPie, ale tutaj to chyba nie ma większego znaczenia. No ale w xampie mam katalog ReacjJSmyTut, gdzie chcę sobie robić tutoriale dotyczące ReackJS. a tam katalog tut1. I teraz podążam za tutorialem z wymienionej strony: iw tut1 tworze nowy projekt o nazwie react-project, gdzie instaluje takie rzeczy jak webpack i babel (loaders). Po zainstalowaniu webpacka trzeba utworzyć plik konfiguracyjny webpacka. Po krótkich poszukiwaniach znalazałm informację że powinien on być w głównym katalogu projekt, ale co tak w sumie mam tu uznać za główny katalog projektu? Czy tut1? Czy mam utworzyć obok node_modules jeszcze jakiś inny katalog gdzie będzie jeszcze folder app z app.js, gdzie będzie index.html i greeting.js? Własnie, gdzie index.html i greeting.js powinny się znajdować.

Patrzyłam na jeszcze kilka tutoriali, między innymi o instalacji na oficjalnej stronie Reacta, o konfiguracji środowiska, ale albo nic mi to nie rozjaśniło, albo nie działo. A ten tutorial na początek wydaje mi się najprostszy, tylko nie wszytko wyjaśnia.

Ten post edytował eFK 17.03.2017, 20:31:33

[vonski]

Plik konfiguracyjny webpack'a dajesz do głównego katalogu projektu, inaczej root czyli jeśli masz projekt w katalogu "tut1" to tutaj będzie też webpack.config.js.
Przyjętą praktyką (chociaż nie przez wszystkich, nie jest to reguła) jest utworzenie katalogu "src" gdzie znajdą się pliki JS pisane przez Ciebie, czyli komponenty, akcje itp. W tym katalogu możesz mieć plik index.js, który będzie punktem wejściowym do aplikacji (nie jest to oczywiście koniecznie; jak się uprzesz to możesz mieć wejście i w "root/cos-innego-niz-src/jeszcze-jeden-podkatalog/wcale-nie-index.js").

Generalnie dla Twojej aplikacji może to być coś w stylu:

[HTML] pobierz, plaintext 
/root
  - node_modules
  - src
    - components
        - greeting.js
    - actions
    - reducers
    - index.js
  - styles
  - index.html
  - webpack.config.js
  - package.json
[HTML] pobierz, plaintext 

Tylko ponownie zaznaczam, to nie jest reguła, ale jest moim zdaniem dość fajnie i logicznie uporządkowane.

Rzuć sobie okiem na to repo i zobacz sama na strukturę katalogów, możesz też zbadać co jest w webpack.config.js - myślę, że to rozjaśni trochę sprawę:
https://github.com/StephenGrider/ReduxSimpleStarter

Ten post edytował vonski 11.04.2017, 11:16:33