Dlaczego warto używać React JS?
React skupia się na budowie komponentów, które mogą być wielokrotnie używane w różnych miejscach aplikacji. Jego podejście oparte na wirtualnym DOM pozwala na efektywne zarządzanie aktualizacjami interfejsu użytkownika, co znacznie zwiększa wydajność w porównaniu do tradycyjnych metod manipulacji DOM.
Pondato, React JS zyskał ogromną popularność dzięki swojej prostocie, dużej społeczności oraz wsparciu w tworzeniu zarówno aplikacji internetowych, jak i mobilnych (za pomocą React Native). Dodatkowo, wiele firm na całym świecie wykorzystuje React w swoich projektach, co czyni go wartościową technologią dla każdego programisty front-end.
Podstawowe koncepcje w React JS
Komponenty (Components)
Podstawowym budulcem aplikacji w React są komponenty. Są to samodzielne, odizolowane fragmenty interfejsu, które można wielokrotnie używać w różnych miejscach aplikacji. Istnieją dwa główne rodzaje komponentów:
Komponenty funkcyjne – bazują na funkcjach JavaScript.
Komponenty klasowe – korzystają z klas ES6 i dawniej były popularnym wyborem, jednak po wprowadzeniu hooków w React 16.8 komponenty funkcyjne stały się preferowaną metodą.
Przykład komponentu funkcyjnego
function Welcome() {
return <h1>Witaj w React!</h1>;
}JSX (JavaScript XML)
JSX to rozszerzenie składni JavaScript, które pozwala na mieszanie logiki JavaScript z kodem HTML. Zamiast pisać kod HTML w oddzielnych plikach, JSX umożliwia umieszczanie go bezpośrednio w funkcjach JavaScript. To ułatwia zarządzanie kodem i zwiększa czytelność.
Przykład JSX:
const element = <h1>Hello, World!</h1>;JSX pod maską jest przekształcane do zwykłych wywołań JavaScript, co pozwala na efektywne manipulowanie DOM.
Props
Props to sposób przekazywania danych między komponentami. Są one niezmienne, co oznacza, że komponent-rodzic przekazuje dane komponentowi-dziecku, ale dziecko nie może ich zmienić.
Przykład:
function User(props) {
return <h1>Witaj, {props.name}!</h1>;
}
<User name="Jan" />
Tutaj komponent User otrzymuje wartość props.name i wyświetla „Witaj, Jan!”.
State (Stan)
State to dynamiczne dane, które mogą się zmieniać w trakcie działania aplikacji. W komponentach funkcyjnych korzystamy z hooka useState do zarządzania stanem.
Przykład:
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Stan licznika: {count}</p>
<button onClick={() => setCount(count + 1)}>Zwiększ</button>
</div>
);
}
Stan (count) zmienia się po każdym kliknięciu przycisku.
Cykl Życia Komponentu (Component Lifecycle)
Cykl życia komponentów klasowych
Komponenty klasowe mają wyraźnie zdefiniowane etapy cyklu życia, takie jak:
Mounting – komponent jest montowany do DOM (np. componentDidMount).
Updating – komponent jest aktualizowany (np. componentDidUpdate).
Unmounting – komponent jest usuwany z DOM (np. componentWillUnmount).
Hooki w komponentach funkcyjnych
Dzięki wprowadzeniu hooków, komponenty funkcyjne mogą korzystać z funkcji zarządzania efektami ubocznymi, np. za pomocą useEffect.
Przykład:
useEffect(() => {
document.title = `Liczba kliknięć: ${count}`;
}, [count]);
Eventy i obsługa zdarzeń w React
React posiada wbudowany mechanizm obsługi zdarzeń, takich jak kliknięcia myszą czy zmiany wartości pól tekstowych.
Przykład obsługi kliknięcia:
function Button() {
function handleClick() {
alert('Kliknięto przycisk!');
}
return <button onClick={handleClick}>Kliknij</button>;
}
Możemy również przekazywać funkcje jako propsy, aby umożliwić komponentom-rodzicom kontrolę nad interakcjami w komponentach-dzieciach.
Routing w React – React Router
Większość aplikacji wymaga nawigacji między różnymi stronami. React Router to popularna biblioteka do obsługi routingu w React.
Aby skonfigurować routing, najpierw instalujemy pakiet react-router-dom, a następnie definiujemy trasy w naszej aplikacji.
Przykład konfiguracji:
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<div>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</div>
</Router>
);
}
Praca z formularzami w React
Formularze kontrolowane (Controlled Components)
W formularzach kontrolowanych, wartości pól są przechowywane w stanie komponentu.
Przykład:
function LoginForm() {
const [email, setEmail] = useState('');
return (
<form>
<input value={email} onChange={(e) => setEmail(e.target.value)} />
</form>
);
}
Formularze niekontrolowane (Uncontrolled Components)
W formularzach niekontrolowanych dane są pobierane bezpośrednio z DOM za pomocą referencji.
Przykład:
function LoginForm() {
const emailRef = useRef();
return (
<form>
<input ref={emailRef} />
</form>
);
}
Styling w React
React oferuje kilka podejść do stylizacji komponentów. Można używać tradycyjnych arkuszy CSS, jak i bardziej nowoczesnych narzędzi, takich jak Styled Components.
Przykład:
import styled from 'styled-components';
const Button = styled.button`
background-color: blue;
color: white;
`;
<Button>Kliknij mnie</Button>
Podstawy zarządzania stanem w aplikacjach React
useState vs useReducer
useState jest najprostszym hookiem do zarządzania stanem, natomiast useReducer oferuje większą kontrolę w bardziej skomplikowanych przypadkach.
Context API
Context API pozwala na udostępnianie globalnych danych bez potrzeby przekazywania propsów przez wiele poziomów komponentów.
Przykład:
const ThemeContext = React.createContext();
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
Podłączenie do API z React
React umożliwia łatwe pobieranie danych z zewnętrznych API za pomocą fetch lub Axios.
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
Podsumowanie
Poznałeś podstawy React, takie jak komponenty, stan, propsy oraz cykl życia komponentów. Kolejnym krokiem może być nauka zaawansowanych narzędzi, takich jak Redux lub budowanie bardziej skomplikowanych aplikacji z wykorzystaniem zewnętrznych API i Context API. React to potężne narzędzie, które z pewnością zwiększy twoją produktywność jako programisty front-end.