WHAT TO KNOW<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>
Funkcionalne i Klasne Komponente u React-u sa TypeScript-om
</title>
<style>
body {
font-family: sans-serif;
}
h1, h2, h3 {
margin-top: 2em;
margin-bottom: 1em;
}
code {
background-color: #f2f2f2;
padding: 0.2em 0.5em;
border-radius: 3px;
font-family: monospace;
}
pre {
background-color: #f2f2f2;
padding: 1em;
border-radius: 5px;
overflow-x: auto;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<h1>
Funkcionalne i Klasne Komponente u React-u sa TypeScript-om
</h1>
<h2>
Uvod
</h2>
<p>
React je popularna JavaScript biblioteka za izgradnju korisničkih sučelja. Jedna od ključnih karakteristika React-a je koncept komponenti, koji omogućuje modularnost i ponovnu upotrebu koda. U React-u, komponente mogu biti definirane na dva glavna načina: funkcionalne komponente i klasne komponente. U ovom članku ćemo istražiti ove dvije vrste komponenti u React-u, posebno u kontekstu TypeScript-a, moćnog jezika za tipiziranje koji poboljšava čitljivost i stabilnost koda.
</p>
<p>
Funkcionalne i klasne komponente u React-u sa TypeScript-om pružaju razne prednosti, uključujući:
</p>
<ul>
<li>
<strong>
Poboljšana čitljivost i stabilnost koda:
</strong>
TypeScript dodaje statičko tipiziranje, što pomaže u otkrivanju pogrešaka tijekom kompilacije i u sprječavanju pogrešaka tijekom izvršavanja.
</li>
<li>
<strong>
Jasnija struktura koda:
</strong>
Komponenti se mogu bolje organizirati i održavati pomoću TypeScript-a, što poboljšava modularnost.
</li>
<li>
<strong>
Bolja refaktorizacija:
</strong>
TypeScript omogućuje da se kôd bolje refaktorira i mijenja bez straha od grešaka.
</li>
<li>
<strong>
Lakoću održavanja:
</strong>
Kada se koristi TypeScript, kôd je lakše razumjeti, mijenjati i održavati, što čini rad s React-om lakšim.
</li>
</ul>
<h2>
Ključni Koncepti
</h2>
<h3>
Funkcionalne Komponente
</h3>
<p>
Funkcionalne komponente su funkcije koje primaju objekat props (properties) kao argument i vraćaju React element. Ove komponente su jednostavne za pisanje i čitanje, te su često preferirane za komponente koje nemaju stanje ili logičke metode.
</p>
<pre>
<code>
import React from 'react';
const Greeting: React.FC<{ name: string }> = ({ name }) => {
return <h1>Zdravo, {name}!</h1>;
};
export default Greeting;
</code>
</pre>
<p>
U ovom primjeru,
<code>
Greeting
</code>
komponenta je definirana kao funkcija koja prima
<code>
name
</code>
prop i vraća React element sa porukom "Zdravo, [ime]!".
</p>
<h3>
Klasne Komponente
</h3>
<p>
Klasne komponente su JavaScript klase koje produžuju
<code>
React.Component
</code>
klasu i koriste metode kao što su
<code>
render()
</code>
,
<code>
constructor()
</code>
,
<code>
componentDidMount()
</code>
,
<code>
componentDidUpdate()
</code>
, itd. Ova vrsta komponenti koristi se za upravljanje stanjem i kompleksnom logikom, kao i za interakciju sa životnim ciklusom React-a.
</p>
<pre>
<code>
import React from 'react';
class Counter extends React.Component {
constructor(props: any) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState((prevState) => ({ count: prevState.count + 1 }));
};
render() {
return (
<div>
<h1>Brojilac: {this.state.count}</h1>
<button onclick="{this.increment}">Povećaj</button>
</div>
);
}
}
export default Counter;
</code>
</pre>
<p>
U ovom primjeru,
<code>
Counter
</code>
komponenta upravlja stanjem
<code>
count
</code>
i nudi gumb za povećanje brojača. Koristi
<code>
this.state
</code>
i
<code>
this.setState
</code>
za upravljanje stanjem.
</p>
<h3>
TypeScript u React-u
</h3>
<p>
TypeScript donosi tipiziranje u JavaScript kod, što čini kôd čitljivijim i stabilnijim. U React-u, TypeScript se može koristiti za definiranje tipova za props, state, metode i druge elemente.
</p>
<pre>
<code>
import React, { useState } from 'react';
interface CounterProps {
initialValue: number;
}
const Counter: React.FC<counterprops> = ({ initialValue }) => {
const [count, setCount] = useState(initialValue);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<h1>Brojilac: {count}</h1>
<button onclick="{increment}">Povećaj</button>
</div>
);
};
export default Counter;
</counterprops></code>
</pre>
<p>
U ovom primjeru,
<code>
Counter
</code>
komponenta koristi TypeScript za definiranje tipa
<code>
CounterProps
</code>
, koji uključuje
<code>
initialValue
</code>
prop. Također, koristimo TypeScript za definiranje tipa za
<code>
count
</code>
state.
</p>
<h2>
Praktične Primjene
</h2>
<h3>
Primjer: Webshop
</h3>
<p>
U webshop-u, funkcionalne komponente se mogu koristiti za prikaz proizvoda, dok klasne komponente mogu upravljati košaricom i procesom naručivanja. TypeScript može se koristiti za definiranje tipova za proizvode, košaricu i korisnike.
</p>
<h3>
Primjer: Blog Platforma
</h3>
<p>
U blog platformi, funkcionalne komponente se mogu koristiti za prikaz postova, dok klasne komponente mogu upravljati komentarima i korisničkim profilima. TypeScript može se koristiti za definiranje tipova za postove, komentare i korisnike.
</p>
<h2>
Korak po Korak Upute
</h2>
<h3>
Postavljanje Projecta
</h3>
1.
<strong>
Kreiranje projekta:
</strong>
Koristite Create React App sa TypeScript-om:
```
bash
npx create-react-app my-app --template typescript
```
2.
<strong>
Pokretanje projekta:
</strong>
Uđite u direktorij projekta i pokrenite ga:
```
bash
cd my-app
npm start
```
<h3>
Kreiranje Komponente
</h3>
1.
<strong>
Kreiranje funkcionalne komponente:
</strong>
Napravite novu datoteku s imenom
<code>
Greeting.tsx
</code>
i umetnite sljedeći kod:
```
typescript
import React from 'react';
const Greeting: React.FC<{ name: string }> = ({ name }) => {
return
<h1>
Zdravo, {name}!
</h1>
;
};
export default Greeting;
```
2.
<strong>
Kreiranje klasne komponente:
</strong>
Napravite novu datoteku s imenom
<code>
Counter.tsx
</code>
i umetnite sljedeći kod:
```
typescript
import React from 'react';
class Counter extends React.Component {
constructor(props: any) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState((prevState) => ({ count: prevState.count + 1 }));
};
render() {
return (
<div>
<h1>
Brojilac: {this.state.count}
</h1>
<button onclick="{this.increment}">
Povećaj
</button>
</div>
);
}
}
export default Counter;
```
3.
<strong>
Importiranje i korištenje komponenti:
</strong>
U datoteci
<code>
App.tsx
</code>
, importirajte i koristite kreirane komponente:
```
typescript
import React from 'react';
import Greeting from './Greeting';
import Counter from './Counter';
function App() {
return (
<div>
<greeting name="Ivan">
</greeting>
<counter>
</counter>
</div>
);
}
export default App;
```
<h3>
Koristiti TypeScript
</h3>
1.
<strong>
Definirati tipove za props:
</strong>
U
<code>
Greeting.tsx
</code>
, dodajte tip za props:
```
typescript
import React from 'react';
interface GreetingProps {
name: string;
}
const Greeting: React.FC
<greetingprops>
= ({ name }) => {
return
<h1>
Zdravo, {name}!
</h1>
;
};
export default Greeting;
```
2.
<strong>
Definirati tipove za state:
</strong>
U
<code>
Counter.tsx
</code>
, dodajte tip za state:
```
typescript
import React from 'react';
interface CounterState {
count: number;
}
class Counter extends React.Component {
constructor(props: any) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState((prevState: CounterState) => ({ count: prevState.count + 1 }));
};
render() {
return (
<div>
<h1>
Brojilac: {this.state.count}
</h1>
<button onclick="{this.increment}">
Povećaj
</button>
</div>
);
}
}
export default Counter;
```
<h3>
Prednosti TypeScript-a
</h3>
*
<strong>
Otkrivanje pogrešaka tijekom kompilacije:
</strong>
TypeScript otkriva pogreške u tipiziranju tijekom kompilacije, što sprečava greške tijekom izvršavanja.
*
<strong>
Bolja čitljivost:
</strong>
TypeScript poboljšava čitljivost koda, što olakšava razumijevanje i održavanje.
*
<strong>
Refaktorizacija:
</strong>
TypeScript omogućuje sigurnu refaktorizaciju koda bez straha od grešaka.
<h2>
Izazovi i Ograničenja
</h2>
*
<strong>
Stepen učenja:
</strong>
Naučiti TypeScript može zahtijevati dodatno vrijeme i trud.
*
<strong>
Kompilacija:
</strong>
Kompilacija TypeScript-a može dodati vrijeme na proces gradnje projekta.
*
<strong>
Sukob s postojećim JavaScript-om:
</strong>
Ponekad može biti teško pomiriti postojeći JavaScript kod s TypeScript-om.
<h2>
Usporedba s Alternativama
</h2>
*
<strong>
Plain JavaScript:
</strong>
Plain JavaScript je lakši za učenje, ali manje stabilan i čitljiv.
*
<strong>
Flow:
</strong>
Flow je još jedan alat za statičko tipiziranje, ali manje popularan od TypeScript-a.
*
<strong>
ReasonML:
</strong>
ReasonML je funkcionalni jezik koji se kompilira u JavaScript, ali može biti složen za učenje.
<h2>
Zaključak
</h2>
Funkcionalne i klasne komponente u React-u s TypeScript-om pružaju moćan način za izgradnju robusnih i održivih React aplikacija. TypeScript donosi dodatnu sigurnost i čitljivost, što čini rad s React-om lakšim i učinkovitijim.
<h2>
Poziv na Akciju
</h2>
Počnite koristiti TypeScript u svojim React projektima! Isprobajte navedene korake i pogledajte prednosti koje TypeScript nudi. Zatim, istražite druge značajke TypeScript-a i njegove mogućnosti za poboljšanje vaših React aplikacija.
</greetingprops>
</body>
</html>
Napomena: Ovaj HTML kod sadrži osnovnu strukturu članka. Za dodavanje slika i daljnje detalje, možete izmijeniti kod prema potrebi. Također, ovaj članak pruža samo osnovne informacije o funkcionalnim i klasnim komponentama u React-u s TypeScript-om. Za potpuno razumijevanje teme, preporučujemo proučavanje službene dokumentacije React-a i TypeScript-a.
