React js lekcja 1

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">
       &lt;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.