Wprowadzenie do Reacta

Wstęp

React to biblioteka w języku JavaScript dedykowana budowie interfejsów użytkownika. W tym krótkim poradniku przedstawię jak zacząć pracę z tą biblioteką oraz omówię część niezbędnych elementów.

Instalacja środowiska

Rozpocznijmy od instalacji środowiska niezbędnego do pracy z Reactem. Zalecane jest skorzystanie z menedżera pakietów, takiego jak npm (Node Package Manager). Przy użyciu poniższej komendy można zainstalować React wraz z narzędziami do jego obsługi:

npm install -g create-react-app

Tworzenie pierwszej aplikacji

Po pomyślnej instalacji, możemy rozpocząć tworzenie naszej pierwszej aplikacji React. Skorzystaj z poniższej komendy, aby utworzyć nowy projekt:

npx create-react-app my-app

Następnie przejdź do katalogu projektu:

cd my-app

W utworzonym katalogu znajdują się następujące katalogi i ważniejsze pliki:

1. node_modules - katalog zawierający wszystkie zainstalowane zależności projektu, takie jak biblioteki i narzędzia
2. public - katalog zawierający pliki statyczne, które są używane bezpośrednio przez aplikację
• index.html - szablon dla strony głównej aplikacji.
3. src - główny katalog, w którym znajduje się kod źródłowy aplikacji
• App.css - zawiera style dla głównego komponentu
• App.js - zawiera główny komponent aplikacji
• App.test.js - zawiera testy jednostkowe dla komponentu App
• index.css - zawiera ogólne style dla całej aplikacji. Możesz używać tego pliku do definiowania globalnych stylów, które mają zastosowanie do wszystkich komponentów w projekcie
• index.js - montuje główny komponent do drzewa DOM. Ten plik pełni rolę punktu wejścia dla aplikacji React. Importuje główny komponent, najczęściej App.js
4. package-lock.json -  plik który, gwarantuje, że używane są te same wersje pakietów
5. package.json - plik który, definiuje zależności i konfigurację projektu, jest edytowany ręcznie lub aktualizowany za pomocą poleceń `npm install [nazwa-pakietu]`

Uruchamianie aplikacji

Możemy już teraz uruchomić aplikację za pomocą komendy

npm start

Przejdź do przeglądarki i otwórz adres http://localhost:3000.

Tworzenie pierwszego komponentu

Budowa interfejsu polega na składaniu go z tworzonych przez programistę komponentów. Teraz właśnie utworzymy prosty komponent.

Utwórz katalog components w katalogu src i utwórz tam plik component1.js. Następnie wklej tam tą zawartość:

import React from 'react';

const Component1 = () => {

  return (

    <div>

      <h1>Hello world!</h1>

      <p>My first component</p>

    </div>

  );

}

export default Component1;

Integracja komponentów

Teraz, aby wykorzystać nasz komponent, edytujemy plik App.js:

import logo from './logo.svg';

import './App.css';

import Component1 from './components/component1';

function App() {

  return (

    <div className="App">

      <Component1/>

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a

          className="App-link"

          href="https://reactjs.org"

          target="_blank"

          rel="noopener noreferrer"

        >

          Learn React

        </a>

      </header>

    </div>

  );

}

Uruchamianie aplikacji

Po zakończeniu edycji możemy ponownie uruchomić naszą aplikację za pomocą poniższej komendy:

npm start

Podsumowanie

Podczas tego poradnika pokazałem kluczowe punkty i podstawy Reacta. Warto jednak wiedzieć, że to dopiero początek. Dla tych, którzy pragną kontynuować pracę z biblioteką React, polecam korzystanie z oficjalnej dokumentacji dostępnej na stronie https://react.dev/learn. Ta strona stanowi bogate źródło informacji, zawierające obszerną dokumentację, tutoriale, oraz praktyczne przykłady kodu.