daftacademy / frontend_levelup_2018 Goto Github PK

Jak zawsze nie mogę wrzucić zawartość folderu dist do gh-pages. Pokazuje że wszystko up to date. Pliki zostali dodane do master branch. Jak mogę to rozwiązać?

Dla ścoisłości: czy chodzi o

2. Details
   czy o
3. Details Grid?

Czy z taką konfiguracją Webpacka jaka była w boilerplate działają Wam funkcje async / await?

U mnie niestety pokazuje się ReferenceError: regeneratorRuntime is not defined.

Screenshoot

Mam problem w ktorym momencie pobierac dane, poniewaz komponent z przyciskami od razu potrzebuje danych poniewaz znajduje sie w render() i wyslane dane sa puste. Dopiero po chwili zdaze pobrac dane z api. Jak opoznic wyslanie danych do tego komponentu zeby dane nie zostaly od razu pobierane przez komponent z przyciskami, tylko dopiero po pobraniu przez fetch?

2. czy mozna stworzyc jedna funkcje fo pobrania danych a pozniej na tych danych operowac? W jaki sposob?

3. czy pobrane dane powinnismy wklejac do state? I w kazdej funkcji do niej sie odwolywac?
   Pobieram dane, ale ciezko mi wyrenderowac odpowiednia skladnie html.

Przydalo by sie omowienie na zajeciach jak pobierac dane jak je modelowac itd...

Wiem, że trochę późno pytam, ale może ktoś mi pomoże ;)

Jak przekazujecie dane z plików .json do projektu? Poprzez propsy czy przez fetch? Bo jak chcę przekazać przez fetch to react domaga się urla a nie relatywnej ścieżki.
Czy trzeba skorzystać z axiosa lub ajaxa do pobierania tych danych?

https://github.com/ibaczewska/spaceX-launches-app <- tutaj jest moja apka jak ktoś chciałby zajrzeć ;)

z góry dzięki

czy docelowo strona będzie miała jedynie widok desktopowy? jeżeli nie, to fajnie byłoby mieć na start również mobilne dizajny, żeby móc robić od razu mobile first.

W tej chwili w ankiecie jest błąd - opcja "Proszę dodatkowo ocenić zakres zaległej pracy domowej" jest obowiązkowa do wypełnienia.

... ale czy są jakieś źródła na temat zastosowania React do tworzenia i obróbki (sortowanie, filtrowanie itp. tabel)? Z przykładami najlepiej...

Cześć

Nie wiem do końca jak interpretować zdanie "Componenty będące observer, nieposiadające wewnętrzego statnu i wyświetlające dane ze store". Czy tylko komponenty będące observer nie mogą posiadać własnego stanu, czy możesz żaden z komponentów w projekcie?

Pozdrawiam

czy istnieje możliwość wydłużenia terminów przesłania prac domowych? Przynajmniej do pełnego tygodnia :) albo 10 dni ? I kolejna kwestia - Co dokładnie oznacza zapis że "wszystkie prace będą sprawdzane"? I czy będzie jakaś informacja zwrotna co do poprawności wykonania tych zadań? Chodzi mi o jakiś sposób weryfikacji zastosowanych rozwiązań?

Niestety nie mogłam uczestniczyć w ostatnich, siódmych zajęciach. Czy ktoś mógłby napisać coś więcej jakie konkretnie tematy zostały poruszone? I co konkretnie w zakresie testowania? czy będzie dostępna jakaś prezentacja z tych zajęć? Czy odbyło się jakieś podsumowanie? Z góry dzięki!

Po kliknięciu w link z pages wyświetla się pusta strona. Wiem, że jest problem z build. Bardzo proszę o pomoc.
To jest link do repo: https://github.com/KajaBR/aboutTravel
a to link do strony: https://kajabr.github.io/aboutTravel/

co dokładnie mamy wykonać w tym zadaniu dowmowym? odwzorować cały dizajn z pliku "details", czy tylko ten fragment dizajnu na białym tle? Chodzi mi o to, czy mamy również robić header, footer i ten element z linkami, czy to zostanie na później.

Cześć

Po przeczytaniu obecnej pracy domowej zastanawia mnie jedna rzecz - jest w niej wyraźnie napisane, żeby po kliknięciu na jeden z "filtrów" np. Falcon 1, było robione zapytanie do API, o tę konkretną rakietę. Jednak w poprzedniej pracy domowej, idea działa filtrów była trochę inna, mianowicie jak sama nazwa wskazuje filtrowały one "pobrane" wcześniej dane, dotyczące wszystkich rakiet. Czy w takim razie mam napisać komponent "filters" od nowa, czy może jednak mogę pobrać przy ładowaniu strony wszystkie starty, a potem operować już na pobranych danych (z punktu widzenia użytkownika to chyba lepsza opcja, bo nie będzie musiał przy każdym filtrowaniu czekać)?

Drugie pytanie dotyczy dostępnych rakiet. Wszystkie przyszłe starty, będą wykonywane przez Falcone'a 9, co trochę burzy idee posiadania kilku przycisków do filtrowania, bo będą one w większości zwracały "nic". Chyba, żeby użyć również przeszłych startów, tylko wtedy z kolei niepotrzebny robi się licznik odliczający do startu. Jakieś sugestie z jakiego zakresu czasowego danych korzystać?

Pozdrawiam

Czy ktoś wie dla czego występuje mi błąd (0 , _mobx.inject) is not a function?

To jest fragment z dokumentacji Reacta

With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input. For example, if we wanted to enforce that names are written with all uppercase letters, we could write handleChange as:

> handleChange(event) {
>   this.setState({value: event.target.value.toUpperCase()});
> }

Otóż próbowałem u siebie w pracy domowej zastosować podobne rozwiązanie, jednak dostałem ostrzeżenie:

Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info:
https://fb.me/react-controlled-components

Przeczytałem ze dwa razy tę stronę i nie bardzo rozumiem dlaczego te ostrzeżenie się pojawia. Co więcej, próbowałem zastosować dokładanie taki kod jak powyżej - i ostrzeżenie jest nadal na tym oryginalnym kodzie ze strony.
Jeżeli nie modyfikuję event.target.value to wszystko gra. Sprawdziłem też wpływ wartości początkowej, bo takie były sugestie na Stack Overflow ale u mnie nie pomaga.
Dalej: mimo ostrzeżenia dalszy rezultat jest zgodny z oczekiwaniami. Ktoś coś?

Właściwie nic dodać nic ująć - jak w temacie.
A przy okazji, czy moglibyście wrzucić przykład który stworzony został przez Kolegę Prowadzącego pod sam koniec zajęć?

Cześć,
mam pytanie odnośnie podziału projektu z poprzedniej pracy domowej na komponenty, czy ktoś mógłby mi napisać jakąś source-mapę czy coś w tym stylu? :)

Na najbliższych zajęcia 8 maja będziemy mówić głównie o DevTools'ach i ciekawych feature'ach języka JavaScript. Pomyślałem również żeby na początku zrobić krótką sesję Q&A. Napiszcie proszę tutaj swoje pytania związane z tym co dotychczas było omawiane na zajęciach oraz z obszaru prac domowych.

Dawajcie łapki w górę przy pytaniach innych osób, jeśli chcecie poznać odpowiedzi na ich pytania.

Chyba dotarłem do ściany jeżeli chodzi o zadanie domowe
Zegar chodzi - ale sam, jeżeli mu się poda start i metę.
Formsy przyjmują start i metę ale choć niby wiem jak powinny ją przekazać ( w końcu po to dostają obsługę onSubmit od parenta to nie przekazują.
Z jednej strony wiem, że wejście w cudzy kod graniczy z niemożliwością, z drugiej wszyscy robilismy ten sam przykład. Gdyby więc ktoś coś zobaczył- byłbym wdzięczny.
Tylko jakby coś, piszcie otwartym tekstem, jestem świeży w te klocki.

class ParentdoPrzerobu extends React.Component {
  constructor(props) {
    super(props);

    this.state = { start: 0, meta: 0 };
    this.changeName = this.changeName.bind(this);
  }

  changeName(newStart, newMeta) {
    this.setState({
      start: newStart,   meta: newMeta
     });
  }

  render() {
    console.log('parent-start '+this.state.start);
    console.log('parent-meta '+this.state.meta);
    let meta1 = this.state.meta;
    const start1 = this.state.start;
    console.log('parent meta1' +meta1);
    console.log('parent start1'+start1);
    return (
      <div>
       <Granice onChange={this.changeName} />
       <h1>Zegar zaczyna tykać...</h1>
       <Timer start={start1} meta={meta1}/>
       
      </div>
    );
  }
}


class Granicedoprzerobu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: '', start:'', meta:''};
    this.handleChangeMeta = this.handleChangeMeta.bind(this);
    this.handleChangeStart = this.handleChangeStart.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChangeMeta(event) {
    this.setState({meta: event.target.value.split(/\D/).join('') });
    console.log('handleChangeMeta wykonane');
  }

  handleChangeStart(event) {
    this.setState({start: event.target.value.split(/\D/).join('') });
    console.log('handleChangeStart wykonane');
  }
  handleSubmit(event) {//to jest odpowiednik handlechange
   const meta= + this.state.meta;
   console.log ('meta '+ meta);
   const start = + this.state.start;
   if (start > meta){
   this.props.onChange(start,meta);} else{alert('Czas startu musi bć większy od czasu stopu')};
   console.log('handlesubmit this.state.meta'+ this.state.meta);//onSubmit musi olecieć wyżej i byc ma ztym dziecko wywoływane

  }
  
}



  class Timer extends React.Component {
    constructor(props) {
      super(props);
      this.state = { start: 100, meta: 90, komunikat:" Liczymy Liczymy..."};
      this.onClickHandler = this.onClickHandler.bind(this)
    }

componentWillReceiveProps(){

this.setState({start: this.props.start, meta: this.props.meta})
console.log('timer start '+this.props.start);
console.log('timer meta'+ this.props.meta);

}
shouldComponentUpdate(nextProps, nextState) {
  if ((this.state.start == 100) && 
    (this.state.meta == 90)) {
    return false;
  } else {
    alert("Okay fine I will update.")
    return true;
  }
}

  onClickHandler () {
    alert('od nowa.');}

    componentDidMount() {
      this.timerID = setInterval(
        () => this.tick(),
        1000
      );
    }
  
    componentWillUnmount() {
      clearInterval(this.timerID);
    }
    
  
    tick() {
      
      if (this.state.start>this.state.meta){
      this.setState ({
        start: this.state.start-1
       
       });console.log('tyk'+ this.state.start );
      
      }

       else(this.setState({komunikat:'No to policzyli my !'}))
    
        
       }
      ``

Hej,

jeśli jest taka możliwość, to prosiłbym organizatorów o wyjaśnienie czemu mój kod nie obsługuje błędu komunikacji z serwerem (złe warunki?).

Poniżej link do pliku z fetchem :)
https://github.com/Remigiusz-Wasiak/spaceX/blob/master/src/view/LaunchesList.js

Hej.
Przy budowaniu produkcyjnie webpack wywala mi błędy z plikami .svg
Do tej pory wczytywałem pliki tak:
webpack:

test: /\.(svg|jpe?g|png|gif|ico)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
            },
          },
        ],

component:

import fb from '../assets/img/fb.svg';
...

<img src={fb}/>

Mam problem z npm install. Probuję wykonać pracę domowę #3.

Za template wzięłam https://github.com/mkaczkowski/daftcode-react-starter. Utworzyłam nowe repozutorium, sklonowałam do niego pliki z https://github.com/mkaczkowski/daftcode-react-starter ale jak probuję urochomić npm install w konsoli, to dostaję błąd:

npm ERR! code ETIMEDOUT
npm ERR! errno ETIMEDOUT
npm ERR! network request to https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.46.tgz failed, reason: read ETIMEDOUT
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'

Co robię niepoprawnie?

Próbowałam też zrobić to w inny sposób. Skorzystałam z tego linku: https://github.com/gitname/react-gh-pages i założyłam nowe repozytorium z projektem. Ale nie mogę skonfigurować gulpifile.js żeby skorzystać z SASSa.
Link do repozytorium: https://github.com/NataD/space-x/tree/master

Czy mogę po prostu dodać style w zwykłym pliku CSS?

Rozumiem, że to wygląda głupio, ale nie mogę zrozumieć, co powinnam zrobić, aby pojawiło się na stronie, co zrobiłam.

W tej chwili, bez względu na to, co próbowałam, strona wygląda tak: https://ozamaray.github.io/daftcode-react-starter/dist/
(bez counteru)

To, co testowałam lokalnie w siebie, wygląda tak: https://github.com/ozamaray/daftcode-react-starter/blob/master/HowItLookLike.png

Co powinna zrobić, aby to poprawić? Może ktoś wie, jak to naprawić.
Dzięki

P.S. To co napisane na tej stronie testowałam i nie dziła: https://pages.github.com/

Hej!
tutaj jest link do mojego rozwiązania zadania 3.
Rozumiem, że spieprzyłem Flexa, może ktoś rzucić okiem i powiedzieć co robie nie tak?

Mam problem z publikacja projektu z brancha gh-pages na moim GH Pages. Projekt zaimplementowalam poprzez react-create-app a nie daftcode boilerplate, robilam wg instrukcji z create-react-app czyli homepage i deploy/predeploy w package.json. Potem run build na masterze i deploy na gh-pages. I projekt sie zbudowal ale nie widze go w moim GitHub Pages czyli tu: https://b-e-a-t-a.github.io/spacex/. Pierwszy trop dotyczyl automatycznej zamiany "/" w nazwie przez github na "-" w urlu przed nazwa projektu w wartosci "homepage". Ale to raczej standard. Kolejny trop dotyczyl innej struktury katalogow po deployu- poczatkowo wszystko wrzucilam do build, ale patrzac na odwolania w html, to w kolejnym comitcie zostawilam taka strukture podkatalogow jak bylo oryginalnie czyli z katalogiem 'static'. Probowalam roznych opcji ale nadal pusty widok. Czy ktos moze mi pomoc? Albo tez uzywal tutoriala reacta i struktury katalogow build??Moj projekt jest tu: https://github.com/b-e-a-t-a/b-e-a-t-a.github.io-spacex.
Lokalnie czy na statycznym serwerze wszystko dziala. Dodam ze pierwsze zadanie robilam z biolerplate i aplikacja online na GHPages jest widoczna. Ale nie chcialbym musiec teraz na nowo uzywac Daftcode boilerplate i czegos przepisywac :(

siemka
próbowałem zrobić commend bota do cs go. Wszytko szło dobrze, normlnie dopóki nie musiałem wpisać npm install. Po wpisaniu tego do WinowsPowerShell pojawiał sie błąd (zdjęcie). To samo dzieje się po wpisaniu npm install sqlite3. Chyba próbowałem wszystkiego.

Pobierałem na nowo 3 razy node (instalowałem i na dysku C i na dysku D

pobierałem ten plik (potrzebny do zrobienia commend bota) 3 razy (instalowalem i na C i na D)
https://github.com/daftcode/frontend_levelup_2018/files/4518331/csgo-commend-bot-master2.zip

standardowo kilka razy reset kompa

pobrałem najnowszego pythona (na początku na dysk C potem jak nie działało na dysk D)

co mogę zrobić żeby to zadziałało i żeby zrobić tego commend bota?

tutaj błąd:

[email protected] install D:\csgo-commend-bot-master\csgo-commend-bot-master\node_modules\sqlite3
node-pre-gyp install --fallback-to-build

node-pre-gyp WARN Using request for node-pre-gyp https download
node-pre-gyp WARN Tried to download(403): https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v4.1.0/node-v83-win32-x64.tar.gz
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v83 ABI, unknown) (falling back to source compile with node-gyp)
gyp ERR! find Python
gyp ERR! find Python Python is not set from command line or npm configuration
gyp ERR! find Python Python is not set from environment variable PYTHON
gyp ERR! find Python checking if "python" can be used
gyp ERR! find Python - "python" is not in PATH or produced an error
gyp ERR! find Python checking if "python2" can be used
gyp ERR! find Python - "python2" is not in PATH or produced an error
gyp ERR! find Python checking if "python3" can be used
gyp ERR! find Python - "python3" is not in PATH or produced an error
gyp ERR! find Python checking if the py launcher can be used to find Python 2
gyp ERR! find Python - "py.exe" is not in PATH or produced an error
gyp ERR! find Python checking if Python is C:\Python27\python.exe
gyp ERR! find Python - "C:\Python27\python.exe" could not be run
gyp ERR! find Python checking if Python is C:\Python37\python.exe
gyp ERR! find Python - "C:\Python37\python.exe" could not be run
gyp ERR! find Python
gyp ERR! find Python **********************************************************
gyp ERR! find Python You need to install the latest version of Python.
gyp ERR! find Python Node-gyp should be able to find and use Python. If not,
gyp ERR! find Python you can try one of the following options:
gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe"
gyp ERR! find Python (accepted by both node-gyp and npm)
gyp ERR! find Python - Set the environment variable PYTHON
gyp ERR! find Python - Set the npm configuration variable python:
gyp ERR! find Python npm config set python "C:\Path\To\python.exe"
gyp ERR! find Python For more information consult the documentation at:
gyp ERR! find Python https://github.com/nodejs/node-gyp#installation
gyp ERR! find Python **********************************************************
gyp ERR! find Python
gyp ERR! configure error
gyp ERR! stack Error: Could not find any Python installation to use
gyp ERR! stack at PythonFinder.fail (D:\node_modules\npm\node_modules\node-gyp\lib\find-python.js:307:47)
gyp ERR! stack at PythonFinder.runChecks (D:\node_modules\npm\node_modules\node-gyp\lib\find-python.js:136:21)
gyp ERR! stack at PythonFinder. (D:\node_modules\npm\node_modules\node-gyp\lib\find-python.js:225:16)
gyp ERR! stack at PythonFinder.execFileCallback (D:\node_modules\npm\node_modules\node-gyp\lib\find-python.js:271:16)
gyp ERR! stack at exithandler (child_process.js:310:5)
gyp ERR! stack at ChildProcess.errorhandler (child_process.js:322:5)
gyp ERR! stack at ChildProcess.emit (events.js:315:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:274:12)
gyp ERR! stack at onErrorNT (internal/child_process.js:468:16)
gyp ERR! stack at processTicksAndRejections (internal/process/task_queues.js:84:21)
gyp ERR! System Windows_NT 10.0.18363
gyp ERR! command "D:\node.exe" "D:\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "configure" "--fallback-to-build" "--module=D:\csgo-commend-bot-master\csgo-commend-bot-master\node_modules\sqlite3\lib\binding\node-v83-win32-x64\node_sqlite3.node" "--module_name=node_sqlite3" "--module_path=D:\csgo-commend-bot-master\csgo-commend-bot-master\node_modules\sqlite3\lib\binding\node-v83-win32-x64" "--napi_version=6" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v83"
gyp ERR! cwd D:\csgo-commend-bot-master\csgo-commend-bot-master\node_modules\sqlite3
gyp ERR! node -v v14.0.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute 'D:\node.exe D:\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=D:\csgo-commend-bot-master\csgo-commend-bot-master\node_modules\sqlite3\lib\binding\node-v83-win32-x64\node_sqlite3.node --module_name=node_sqlite3 --module_path=D:\csgo-commend-bot-master\csgo-commend-bot-master\node_modules\sqlite3\lib\binding\node-v83-win32-x64 --napi_version=6 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1)
node-pre-gyp ERR! stack at ChildProcess. (D:\csgo-commend-bot-master\csgo-commend-bot-master\node_modules\node-pre-gyp\lib\util\compile.js:83:29)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:315:20)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:1051:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
node-pre-gyp ERR! System Windows_NT 10.0.18363
node-pre-gyp ERR! command "D:\node.exe" "D:\csgo-commend-bot-master\csgo-commend-bot-master\node_modules\node-pre-gyp\bin\node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd D:\csgo-commend-bot-master\csgo-commend-bot-master\node_modules\sqlite3
node-pre-gyp ERR! node -v v14.0.0
node-pre-gyp ERR! node-pre-gyp -v v0.11.0
node-pre-gyp ERR! not ok
Failed to execute 'D:\node.exe D:\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=D:\csgo-commend-bot-master\csgo-commend-bot-master\node_modules\sqlite3\lib\binding\node-v83-win32-x64\node_sqlite3.node --module_name=node_sqlite3 --module_path=D:\csgo-commend-bot-master\csgo-commend-bot-master\node_modules\sqlite3\lib\binding\node-v83-win32-x64 --napi_version=6 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node-pre-gyp install --fallback-to-build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\mateu\AppData\Roaming\npm-cache_logs\2020-04-22T15_54_07_830Z-debug.log
PS D:\csgo-commend-bot-master\csgo-commend-bot-master>

Mam problem z github pages. Nie mam tam ostatnich zmian (menu i counter nie są widoczne na github pages).
Może ktoś wie, jak to naprawić.
Dzięki

Nie mogę użyć npm run start, za każdym razem dostaję błąd:

Nic nie zmieniałam w plikach daftcode-react-starter.