Warto zacząć od pytania, dlaczego React?

Głównie dlatego, że jest niesamowicie wszechstronny. Wcześniejsza aplikacja na tym blogu, była pisana przy użyciu Python + Flask, jednak jakiś czas temu postanowiłem napisać kilka rzeczy w React, co skusiło mnie do stworzenia tego tutoriala.

React posiada bardzo dużą zaletę, jaką jest jego natywna odmiana, czyli React Native. Tym samym jeśli opanujecie ten framework, nic nie stoi na przeszkodzie, aby tworzyć również aplikacje mobilne. Dokumentacja została przetłumaczona na język polski, co oczywiście sprzyja nauce, jeśli wolicie zasięgać informacji w ojczystym języku:

https://pl.reactjs.org/docs/getting-started.html

Dosyć zatem tego przynudnawego wstępu, zajmijmy się konkretami.

Co będziemy tworzyć?

W tym tutorialu napiszemy aplikację w formie serwisu z najważniejszymi newsami z całego świata, obejmującej 6 państw i 8 kategorii. Stnadardowo, od początku do końca, czyli od pierwszej linijki kodu, po deploy live. Skorzystamy z zewnętrznego API, więc już możecie tam założyć konto, aby uzyskać token. Spokojnie, do 1000 userów dziennie, API jest darmowe, nie trzeba też rejestrować kart czy innych płatności, wystarczy korzystać:

https://newsapi.org/

Działającą już aplikację możecie zobaczyć na:

https://reactnews-app.herokuapp.com/

Zaczynajmy!

Pierwszym krokiem jest stworzenie środowiska dla aplikacji. To co musicie mieć zainstalowane, to Node.js, rzecz jasna. Jeśli nie macie:

https://nodejs.org/en/

Instalacja Node.js za nami, stwórzmy więc środowisko dla React’a, co jak się okazuje, jest niezwykle proste i przyjemne. Użyjemy tutaj Create React App.

W terminalu katalogu projektu (np. super-kurs-reacta), odpalacie:

npx create-react-app news-app --use-npm

Zostanie stworzony folder ze wszystkimi niezbędnymi zależnościami i toną modułów node modules (widzicie analogię z obrazkiem posta?)

Style będziemy pisać tym razem nie w CSS, a w Sass, co znacznie przyspiesza stylowanie, jednak jeśli nie znacie Sass, nie martwcie się, przekopiujcie to co w nich będzie, ponieważ nie skupiamy się tu na stylach, tylko na React. W tym celu jednak, doinstalujmy moduł, który będzie również prekompresorem i będzie kompilował style z .scss, do .css, czytelne dla przeglądarek.

npm install node-sass

Po instalacji całości (która trochę trwa), możecie spokojnie odpalić serwer. W tym celu:

cd news-app
npm start

Ujrzycie pierwszy ekran live Waszej aplikacji 🙂

Struktura

Żeby całość miała bardziej przystępną dla nas formę, stwórzmy nowy folder, w folderze src, pod nazwą components

Tu umieścimy nasze komponenty i przeniesiemy aktualne, które zostały stworzone domyślnie. Aby nie opisywać wszystkiego, Wasze drzewko powinno wyglądać jak poniżej:

Jeśli macie odpalony serwer, dostaniecie log błędu, co zatem się stało i co zrobić?

  1. Stworzyliśmy nowy folder w src – components
  2. Przenieśliśmy App.js i App.css do components, oraz zmieniliśmy App.css na App.scss

Błędy wynikają właśnie z przeniesienia, dlatego zmienimy zależności w pliku index.js, który aktualnie nie może znaleźć komponentu App.js, a więc:

index.js

Zmeniamy z:

import App from './App';

na:

import App from './components/App';

Dodatkowo w pliku App.js, zmieńmy:

index.js

import './App.css';

na:

import './App.scss';

Usuwamy też w tym pliku import logo, bo nie będzie nam potrzebne:

import logo from './logo.svg';

Usuńcie też cały kod w tagu <header>, finalnie App.js wyglądać powinien tak:

import React from 'react';
import './App.scss';

function App() {
  return (
    <div className="App">

    </div>
  );
}

export default App;

A co to w ogóle jest?

W pierwszej lini importujemy globalny komponent React, następnie importujemy style .scss.

Funkcja App() zwraca nam diva z klasą App. To w nim będziemy umieszczać inne komponenty, które zostaną zrenderowane. Zwróćcie uwagę, że klasa w <div> jest określana jako className. Jest to składnia JSX, którą można nazwać, JS-owym HTML. Zostaje tu użyty atrybut className, ponieważ dosyć często będziemy też korzystać z programowania obiektowego w React, gdzie obiekt określany jest poprzez class. Stąd aby nie wprowadzać konfliktu, dla struktury HTML używa się className.

Na samym końcu eksportujemy komponent App, dzięki czemu możemy go importować w innych plikach, jak np, wcześniej wspomniany index.js

Jeśli dodacie coś w tagach z klasą App, zobaczycie to live. Dodajmy prosty H1:

import React from 'react';
import './App.scss';

function App() {
  return (
    <div className="App">
		<h1>I'm a pug lord</h1>
    </div>
  );
}

export default App;

I już!

Środowisko skonfigurowane, serwer odpalony, komponenty zrobione pierwszy komunikat wyświetlony. Jak zwykle nie było trudno, więc nie ma się czego bać, trzeba pisać dalej 🙂

W kolejnej części zajmiemy się już logiką aplikacji, nauczymy się tworzyć komponenty oraz je importować. Stworzymy reguest do API i uzyskamy w końcu nasze newsy!

Do zobaczenia w przyszłym odcinku! 🙂