Kilka prostych kroków aby zacząć programować w React JS

Przedstawiamy krótki podstawowy tutorial dotyczący rozpoczęcia pracy w języku React.

Aby zacząć wystarczy kilka prostych kroków. Pierwsze co należy zrobić to zainstalować  następujące oprogramowanie:

1. Node.js - platforma JavaScript do uruchamiania kodu JavaScript poza przeglądarką. Pobierz i zainstaluj najnowszą wersję z oficjalnej strony: https://nodejs.org/en/download/

2. Narzędzie do zarządzania pakietami npm (Node Package Manager) jest automatycznie zainstalowane razem z Node.js. Użyj go, aby zainstalować Create-React-App, narzędzie do tworzenia nowych aplikacji React:

npm install -g create-react-app

3. Użyj Create-React-App, aby utworzyć nowy projekt React i podaj nazwę swojego projektu:

create-react-app my-app

4. Przejdź do katalogu z projektem:

cd my-app

5. Uruchom aplikację:

npm start

Aby napisać prosty program w React, możesz edytować plik src/App.js w swoim projekcie. Na przykład, poniższy kod tworzy komponent "Hello World" wyświetlający tekst "Hello World" na stronie:
 

import React from 'react';

function HelloWorld() {
  return <h1>Hello World</h1>;
}

export default HelloWorld;

Zapisz zmiany i odśwież stronę, aby zobaczyć wynik.

Niezbędnym narzędziem do tworzenia kodu może być Visual Studio Code. Możesz je pobrać ze strony https://code.visualstudio.com/download.
Visual Studio Code to darmowy i otwarty edytor kodu źródłowego, który jest szybki, lekki i zaprojektowany do pracy z różnymi językami programowania. Posiada wbudowane narzędzia do debugowania, kontroli wersji, integrację z narzędziami CLI i szeroką gamę rozszerzeń, które umożliwiają dostosowywanie i rozszerzanie jego funkcjonalności.

 

Aby użyć Visual Studio Code do pracy z aplikacją w języku React, należy postępować w następujący sposób:

1. Zainstaluj Visual Studio Code: Możesz pobrać i zainstalować aplikację na swoim komputerze z oficjalnej strony internetowej.

2. Zainstaluj rozszerzenie dla języka React: Otwórz Visual Studio Code i przejdź do katalogu rozszerzeń (Ctrl + Shift + X). Wyszukaj i zainstaluj rozszerzenie "Reactjs code snippets".

3. Utwórz nowy projekt: Otwórz wiersz poleceń (Ctrl + Shift + `) i wpisz następującą komendę: "npx create-react-app [nazwa_projektu]" (zrobiłeś to wcześniej więc wystarczy przejść do punktu 4)

4. Otwórz projekt: Przejdź do katalogu projektu, który utworzyłeś, i otwórz go w Visual Studio Code.

5. Koduj i debuguj aplikację: Możesz teraz kodować swoją aplikację w React i używać narzędzi debugowania wbudowanych w Visual Studio Code, aby łatwo rozwiązywać błędy i uzyskiwać informacje o stanie aplikacji.

Pamiętaj, że Visual Studio Code jest narzędziem do tworzenia oprogramowania, a nie środowiskiem do tworzenia aplikacji w React. Będziesz potrzebować dodatkowych narzędzi, takich jak Node.js i npm (zainstalowałeś to wczerśniej), aby skonfigurować i uruchomić swoją aplikację React.

Spójrzmy chwilę na strukturę katalogów i zobaczmy czego dotyczą, zwykle wygląda ona następująco:

1. node_modules/ - Zawiera pakiety npm, które są używane przez projekt.

2. public/ - Zawiera pliki, które będą dostępne publicznie, takie jak plik główny HTML i ikony.

3. src/ - Zawiera kod źródłowy aplikacji.

4. src/components/ - Zawiera pliki komponentów React, które są używane w aplikacji.

5. src/containers/ - Zawiera pliki kontenerów, które łączą komponenty z logiką aplikacji.

6. src/assets/ - Zawiera zasoby, takie jak obrazy, pliki CSS i pliki fontów.

7. src/actions/ - Zawiera pliki akcji, które opisują zmiany w stanie aplikacji.

8. src/reducers/ - Zawiera pliki reducerów, które aktualizują stan aplikacji na podstawie akcji.

9. src/store/ - Zawiera plik konfiguracji sklepu, który tworzy i integruje reducery i akcje.

10. src/routes/ - Zawiera pliki tras, które definiują, jak powinny być mapowane adresy URL do komponentów w aplikacji.

11. src/App.js - Plik główny aplikacji, który łączy wszystkie komponenty i tworzy logikę aplikacji.

Te katalogi i pliki są tylko wzorcem i mogą różnić się w zależności od wielkości i skomplikowania aplikacji. Możesz dostosować strukturę katalogów do własnych potrzeb i wymagań.

Aby bardziej zapoznać się z aplikacją napiszmy i zaimplementujmy prosty komponent wyświetlający imię.
Poniżej jest przykład komponentu React, który umożliwia wpisanie imienia i wyświetlenie go na stronie:

import React, { useState } from 'react';

const NameForm = () => {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Imię:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <button type="submit">Wyślij</button>
      {name !== '' && <p>Cześć, {name}!</p>}
    </form>
  );
};

export default NameForm;

Komponent używa stanu lokalnego name i funkcji setName do przechowywania i aktualizowania wartości imienia wpisanego przez użytkownika. Funkcja handleSubmit jest wywoływana po kliknięciu przycisku i powstrzymuje domyślne zachowanie formularza. Na końcu komponent wyświetla wpisane imię po jego wysłaniu.

 

Komponent można wstawić w dowolnym miejscu w aplikacji React, w zależności od potrzeb.

Jeśli chcesz, aby komponent był dostępny na wielu stronach, można go zaimportować do pliku głównego i użyć go jako elementu w wielu komponentach.

Jeśli chcesz, aby komponent był dostępny tylko na jednej stronie, można go zaimportować i użyć bezpośrednio w komponencie strony.

Na przykład, jeśli chcesz wstawić komponent NameForm na stronie głównej aplikacji, możesz zrobić to w następujący sposób:
 

import React from 'react';
import NameForm from './NameForm';

const App = () => (
  <div>
    <NameForm />
  </div>
);

export default App;

W tym przykładzie komponent NameForm jest importowany do pliku App.js i używany jako element wewnątrz komponentu App.
Uruchom aplikację i sprawdź działanie :-)