Druga radionica - React.js [Cortex Academy]

Druga radionica - React.js [Cortex Academy]

Druga radionica - React.js [Cortex Academy]

Korisne Visual Studio Code ekstenzije

https://www.youtube.com/watch?v=_aWDQVxZP6A

Props destructuring u React.js-u

https://www.tutorialspoint.com/destructuring-of-props-in-reactjs

React.js - map funkcija

// Definišemo komponentu koja prima podatke kao prop
const ListaElemenata = ({ podaci }) => {
  // Koristimo map metodu nad nizom podataka kako bismo generisali listu elemenata 
  const lista = podaci.map((element, index) => (
    // Svaki element u nizu dobija jedinstveni ključ (key) kako bi React mogao efikasno pratiti promjene
    <li key={index}>{element}</li>
  ));

  // Vraćamo listu unutar JSX-a
  return (
    <div>
      <h1>Lista elemenata</h1>
      <ul>{lista}</ul>
    </div>
  );
};


// App komponenta

const App = () => {
  // Primjer niza podataka koji želimo prikazati
  const podaci = ['Element 1', 'Element 2', 'Element 3'];

  // Prikazujemo komponentu ListaElemenata i proslijeđujemo joj niz podataka kao prop
  return <ListaElemenata podaci={podaci} />;
};

// Renderujemo korijensku komponentu u HTML div s id-om 'root'
ReactDOM.render(<App />, document.getElementById('root'));

Vite vs NPX Create React App

https://medium.com/@pailodzeshotiko/vite-vs-npx-create-react-app-a-head-to-head-comparison-a20852edf3a8

Šta je .jsx i čemu služi?

JSX je JavaScript sintaksa koja omogućava pisanje HTML koda unutar JavaScript datoteka(fajlova).

Glavna svrha JSX-a je olakšavanje izgradnje korisničkog interfejsa u React.js-u, jer omogućava programerima da pišu komponente koristeći sintaksu sličnu HTML-u, što čini kod čitljivijim i olakšava manipulaciju DOM-om. 
Kada se JSX kod kompajlira, pretvara se u obični JavaScript koji React može razumjeti i renderovati na stranici.

Šta su React.js props?

https://builtin.com/articles/react-props#:~:text=React%20Props%20Definition-,Props%20is%20a%20special%20keyword%20in%20React%20that%20stands%20for,flow%20from%20parent%20to%20child.