Opisivanje korisničkog interfejsa (UI)

React je JavaScript biblioteka za prikazivanje korisničkog interfejsa (UI). UI se sastoji od malih jedinica kao što su dugmad, tekst i slike. React vam omogućava da ih kombinujete u ponovljive, nested (ugnježdene) komponente. Od veb sajtova do telefonskih aplikacija, sve na ekranu može se razbiti na komponente. U ovoj glavi naučićete kako da kreirate, prilagodite i uslovno prikažete React komponente.

U ovom poglavlju:

Vaša prva komponenta

React aplikacije su izgrađene of izoliranih delova korisničkog interfejsa (UI) koje se zovu komponente. React komponenta je Javascript funkcija koju možete začiniti markup-om. Komponente mogu biti male kao dugme ili velike kao cela stranica. Ovde je Gallery komponenta koja prikazuje tri Profile komponente:

Fork

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Zadivljujući naučnik</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Ready to learn this topic?

Pročitajte Vaša prva komponenta da biste naučili kako da deklarišete i koristite React komponente.

Importovanje i exportovanje komponenti

Možete deklarisati mnogo komponenti u jednom fajlu, ali veliki fajlovi mogu postati teški za navigaciju. Da biste to rešili, možete exportovati komponentu u svoj fajl, a zatim importovati tu komponentu iz drugog fajla:

Fork

import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Zadivljujući naučnik</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Ready to learn this topic?

Pročitajte Importovanje i exportovanje komponenti da biste naučili kako da podelite komponente u svoje fajlove.

Pisanje markup-a sa JSX

Svaka React komponenta je JavaScript funkcija koja može sadržati neki markup koji React prikazuje u browser-u. React komponente koriste sintaksu proširenja zvanu JSX da predstave taj markup. JSX izgleda mnogo kao HTML, ali je malo stroži i može prikazati dinamičke informacije.

Ako kopirate postojeći HTML markup u React komponentu, neće uvek raditi:

Fork

export default function TodoList() {
  return (
    // This doesn't quite work!
    <h1>Hedy Lamarr's Todo lista</h1>
    <img
      src="https://i.imgur.com/yXOvdOSs.jpg"
      alt="Hedy Lamarr"
      class="photo"
    >
    <ul>
      <li>Izmisli nove semafore
      <li>Vežbaj scenu iz filma
      <li>Unapredi tehnologiju spektra
    </ul>

Ako imate postojeći HTML kao što je ovaj, možete ga popraviti pomoću konvertera:

Fork

export default function TodoList() {
  return (
    <>
      <h1>Hedy Lamarr's Todos</h1>
      <img
        src="https://i.imgur.com/yXOvdOSs.jpg"
        alt="Hedy Lamarr"
        className="photo"
      />
      <ul>
        <li>Izmisli nove semafore</li>
        <li>Vežbaj scenu iz filma</li>
        <li>Unapredi tehnologiju spektra</li>
      </ul>
    </>
  );
}

Ready to learn this topic?

Pročitajte Pisanje markup-a sa JSX da biste naučili kako da napišete validan JSX.

JavaScript u JSX-u sa vitičastim zagradama

JSX vam dozvoljava da pišete HTML sličan markup unutar JavaScript fajla, čuvajući logiku prikazivanja i sadržaja na istom mestu. Ponekad ćete želeti da dodate malo JavaScript logike ili da referencirate dinamičko svojstvo unutar tog markup-a. U ovoj situaciji možete koristiti vitičaste zagrade u vašem JSX-u da “otvorite prozor” ka JavaScript-u:

Fork

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Unapredi the videophone</li>
        <li>Pripremi predavanja iz aeronautike</li>
        <li>Radi na motoru koji radi na alkohol</li>
      </ul>
    </div>
  );
}

Ready to learn this topic?

Pročitajte JavaScript u JSX-u sa vitičastim zagradama da biste naučili kako da pristupite JavaScript podacima iz JSX-a.

Prosleđivanje props-a komponenti

React komponente koriste props da bi komunicirale jedna sa drugom. Svaki roditeljski(parent) komponent može proslediti neke informacije svojoj deci(children) pomoću props-a. Props vam mogu podsetiti na HTML atribute, ali možete proslediti bilo koju JavaScript vrednost kroz njih, uključujući objekte, nizove, funkcije i čak JSX!

Fork

import { getImageUrl } from './utils.js'

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

Ready to learn this topic?

Pročitajte Prosleđivanje props-a komponenti da biste naučili kako da prosledite i čitate props.

Uslovno prikazivanje komponenti

Vaše komponente će često morati da prikažu različite stvari u zavisnosti od različitih uslova. U React-u, možete uslovno prikazati JSX koristeći JavaScript sintaksu kao što su if naredbe, && i ? : operatori.

U ovom primeru, JavaScript && operator se koristi da bi se uslovno prikazala kvačica:

Fork

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✔'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
    <h1>Sally Ride lista za pakovanje</h1>
      <ul>
        <Item
          isPacked={true}
          name="Svemirsko odelo"
        />
        <Item
          isPacked={true}
          name="Kaciga sa zlatnim listom"
        />
        <Item
          isPacked={false}
          name="Foto od Tam"
        />
      </ul>
    </section>
  );
}

Ready to learn this topic?

Pročitajte Uslovno prikazivanje komponenti da biste naučili različite načine za uslovno prikazivanje sadržaja.

Renderovanje liste

Često ćete želeti da prikažete više sličnih komponenti iz kolekcije podataka. Možete koristiti JavaScript filter() i map() sa React-om da biste filtrirali i transformisali vaš niz podataka u niz komponenti.

Za svaki element u nizu, moraćete da odredite key prop. Obično ćete koristiti ID iz baze podataka kao key. Ključevi omogućavaju React-u da prati mesto svakog elementa u listi čak i ako se lista promeni.

Fork

import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
  const listItems = people.map(person =>
    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        poznat je zbog {person.accomplishment}
      </p>
    </li>
  );
  return (
    <article>
      <h1>Scientists</h1>
      <ul>{listItems}</ul>
    </article>
  );
}

Ready to learn this topic?

Pročitajte Renderovanje liste da biste naučili kako da renderujete listu komponenti i kako da odaberete ključ.

Održavanje komponenti čistim (Pure components)

Neke JavaScript funkcije su čiste. Čista funkcija:

Gleda svoj posao. Ne zavisi od bilo kakvih globalnih promenljivih ili stanja aplikacije.
Isti input, isti output. Dajući isti input, čista funkcija uvek treba da vrati isti rezultat.

Striktno pisanje vaših komponenti kao čistih funkcija može da izbegne čitavu klasu zbunjujućih grešaka i nepredvidivog ponašanja kako vaša baza koda raste. Ovde je primer nečiste komponente:

Fork

let guest = 0;

function Cup() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;
  return <h2>Šolja čaja za gosta #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

Možete napraviti ovu komponentu čistom tako što ćete proslediti prop umesto što ćete modifikovati prethodno postojeću promenljivu:

Fork

function Cup({ guest }) {
  return <h2>Šolja čaja za gosta #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

Ready to learn this topic?

Pročitajte Održavanje komponenti čistim da biste naučili kako da napišete komponente kao čiste funkcije.

Šta dalje?

Idite do Vaša prva komponenta da biste počeli da čitate ovo poglavlje stranicu po stranicu!

Ili ako ste već upoznati sa ovim temama, zašto ne biste pročitali o Dodavanju interaktivnosti?

NextYour First Component