Sesiunea 2 - Introducere in React

Create React App

npx create-react-app app_name

Componente React

  • Componentele va permit sa va impartiti interfata utilizator in “piese” reutilizabile, iar in acelasi timp va puteti gandi la fiecare piesa ca fiind izolata.
  • Conceptual, componentele sunt asemanatoare cu functiile JavaScript. Acestea accepta intrari (denumite “props”) si returneaza elemente React, care descriu ceea ce ar trebui sa apara in interfata.
  • de tip clasa sau functionala

State

  • State reprezinta un obiect JavaScript care pastreaza informatia si care influenteaza aspectul sau starea componentei compilate si randate. Diferenta fata de props este aceea ca starea este mentinuta in contextul componentei - similar cu definirea unei variabile in interioriul unei functii.
  • Este imutabil
  • Se updateaza prin functii speciale: this.setState() in cazul componentelor de tip clasa sau cu ajutorul React Hooks

Props

  • se transmit de la parinte la copil
  • flux unidirectional

React Hooks

Hooks sunt o noua adaugare in React 16.8. Va permit sa utilizati functiile de stare si alte functii React, fara a scrie o clasa. Avantajul este mai putin cod scris pentru a obtine aceeasi functionalitate.

UseState

  • UseState este un hook de React care va permite sa interactionati cu starea unei componente. Acesta va intoarce un vector format din 2 elemente:
    1. Variabila de stare
    2. Functia care va modifica variabila de stare
  const [myState, myFunctionToChangeState] = useState(initialValue);
moby/frontend/02.txt · Last modified: 2020/07/21 22:08 by ciprian.dobre
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0