Witaj drogi czytelniku. Zacznijmy budowę aplikacji.
Pobranie globalnie (do node_modules) twojego komputera
npm i create-react-app -g
Wywołujemy tą komendę w terminalu/konsoli. (Jednokrotne wywołanie działa jak instalacja więc przy kolejnym projekcie nie musisz jej wywoływać.)
Spowoduje on pobranie paczki z npm czyli repozytorium paczek, paczki z biblioteką create-react-app. Pozwala ona na 1 komentowe stworzenie aplikacji z wszystkimi zależnościami.
Jeśli nie masz większego doświadczenie w React Js jest to jedno z szybszych rozwiązań bez bawienia się w budowanie aplikacji plik po pliku.
2. Po pobraniu wszystkich zależności (zakończeniu pobierania) wywołujemy komende
npx create-react-app moja-aplikacja
Tutaj ważne wywołuj ją w folderze w którym chcesz by został utworzony folder projektu. Bedzie to wymagać trochę wiedzy na temat konsoli/terminala.
W moim przypadku lubie stworzyć folder Dev w C:/Dev lub na mac /Dev
By to zrobić otwórz terminal wpisz
cd C:/
Przeniesie cię to do folderu dysku C
mkdir Dev
Stworzy folder
następnie
cd Dev
Wejdziesz do Dev
Mamy wszystki wiec zaczynajmy:
W terminalu wywołaj
npx create-react-app moja-aplikacja
Stworzy to aplikację react moja-aplikacja zmień na nazwę jaką tylko chcesz.
Analizuje błędy które mogą pokazywać się po uruchomieniu komendy.
Kolejny krok to rozpoczęcie pracy nad kodem.
Polecam Visual Studio Code
Otwieramy folder projektu w VSC zobaczymy go tak

Dodamy teraz folder w src o nazwie Components
Pozwoli on na utrzymywanie komponentów które bedziemy pisać.
Dodajmy w nim folder Header a w nim plik index.js
dokładnie tak

Następnie zacznijmy pisać kod
import React from 'react';
function Header() {
return (
<h1>
Hi jestem u góry
</h1>
)
}
export default Header;er
Powyższy kod stanie się naszym komponentem by go dodać i widzieć na stronie App wchodzimy do pliku App.js który jest głównym plikiem realizacji aplikacji
Pokaże się on nam tak

Następnie wyczyścimy sobie demo app
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
</div>
);
}
export default App;
Zostaw sobie tylko ten kod
Następnie by skorzystać z komponenty
dodaj do importów na samej górze
import Header from './Components/Header'
Oraz co najważniejsze wywołanie naszego komponentu by na pewno się ukazał w miejscu które chcemy
<Header />
Nasz kod powinien wyglądać tak
import React from 'react';
import './App.css';
import Header from './Components/Header'
function App() {
return (
<div className="App">
<Header />
</div>
);
}
export default App;
Ok idźmy wiec do terminala/konsoli i uruchommy w lokalizacji projektu
czyli C:/Dev/moja-aplikacja
komendę
npm start
Spowoduje ona uruchomienie aplikacji

Ok mamy 1 komponent teraz stworzymy kolejne.
Niektóre tutoriale pokazują dodawanie komponentów bezpośrednio w App.js
Zróbmy to dla testu
import React from 'react';
import './App.css';
import Header from './Components/Header'
function Footer() {
return (
<div className="Footer">
<h1>
Jestem na dole
</h1>
</div>
);
}
function App() {
return (
<div className="App">
<Header />
<Footer />
</div>
);
}
export default App;
Dodaliśmy komponent funkcyjny Footer który jest wywołany pod Header i pozwoli na wyświetlenie tekstu Jestem na dole.
W react warto wspomnieć o 2 typach komponentów
funkcyjnych i klasach
Oba pozwalają na zastosowanie ciekawych elementów w sobie to w następnej lekcji.