Własna giełda transportowa z wykorzystaniem React.js - Stack technologiczny oraz stworzenie projektu

Kamil Powroźnik

2018-06-01 | 3 min

Coś zaczyna się dziać

W dzisiejszym wpisie przyjrzymy się technologiom, które wybierzemy do naszego projektu. Jak wskazuje nazwa tej serii naszą podstawą będzie biblioteka React.js, oprócz tego wykorzystamy biblioteki takie jak react-router-dom.

Oprócz tego musimy przechowywać gdzieś dane. Nie będziemy pisać REST API dla naszego projektu, dlatego do przechowywania danych wykorzystamy Firebase. Jest to bardzo przyjemna baza danych w chmurze, dzięki czemu nie musimy odpowiadać za backend naszej aplikacji.

W naszej aplikacji dane wyświetlać będziemy na mapie. Do tego celu wykorzystamy usługę Open Street Map, a do jej obsługi w React użyjemy dedykowanego komponentu osm-ui/react.

Tworzymy projekt

create-react-app

Mam nadzieje, że dysponujesz już narzędziem create-react-app.

Jeśli nie, bardzo prosto zainstalujesz go za pomocą npm, wystarczy jedna komenda: npm install -g create-react-app.

Jest to paczka, dzięki której nie musisz się przejmować konfiguracją i instalacją zależności - ona zrobi to za Ciebie!

Zaczynamy

W celu stworzenia projektu, przejdź do katalogu w którym trzymasz swoje dotychczasowe projekty.

![](./terminal1.png)

Czas na magię, wystarczy, że wykonasz polecenie ``create-react-app freight-exchange``, a cała reszta wykona się za Ciebie.

![](./terminal2.png)

Ok, właśnie wygenerowaliśmy nasz projekt, teraz czas go trochę oczyścić.

Przejdźmy więc do naszego projektu komendą cd freight-exchange i zobaczmy jak wygląda struktura naszego projektu.

![](./tree.png)

Czas wyczyścić projekt z niepotrzebnych rzeczy, uruchommy więc komendę rm src/logo.svg src/App.css

Kolejnym krokiem będzie usunięcie niepotrzebnych importów i kodu z pliku App.js

Docelowo ma on wyglądać tak:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        
      </div>
    );
  }
}

export default App;

Gratulacje. Na tym etapie, mamy wygenerowany czysty projekt w React.js oraz wiemy jakich technologii użyjemy do zbudowania naszej aplikacji. W następnym wpisie w tej części zajmiemy się omówieniem jakich komponentów będziemy potrzebować, a przy okazji zrozumiesz jaka jest różnica między smart i dumb components.

Podoba Ci się ta seria wpisów? Skomentuj i podaj dalej!


Hej, ta strona wykorzysuje pliki cookies, localStorage, sessionStorage oraz dane osobowe do celów analitycznych.