Tutorialul de bază React

Introducere Instalarea React Conectarea pluginului react-devtools Abordarea componentă Macheta site-ului Rezultatul lucrării componentei

Limbajul JSX

Introducere în JSX Returnarea tag-urilor imbricate Mutarea tag-ului în jos Returnarea mai multor tag-uri Returnarea tag-ului neînchis Returnarea tag-ului gol de către funcție Inserarea valorilor variabilelor Nuanțe la inserarea variabilelor Inserarea array-urilor Inserarea obiectelor Inserarea în atribute Stocarea tag-urilor în JSX Stocarea mai multor tag-uri Tag-uri pe linii diferite Returnarea tag-urilor Închiderea tag-urilor JSX Corectitudinea markup-ului Executarea codului JavaScript

Condiții

Condiții în JSX Afișare condiționată Condiții pentru returnarea tag-ului Operatorul ternar în JSX Utilizarea operatorului && în JSX Inversare pentru condiții prescurtate

Funcții

Utilizarea funcțiilor Apelarea funcțiilor în interiorul tag-urilor Atribuirea handler-elor Parametrii handler-elor Obiectul Event Obiectul Event la transmiterea parametrilor

Formarea tag-urilor

Matrice de tag-uri Matrice de tag-uri în buclă Tag-uri dintr-o matrice cu date Chei în matrice Matrice de obiecte Chei unice prin id Tabel dintr-o matrice de obiecte

Id-uri unice

Discuție Probleme cu noile id-uri Șiruri aleatorii pentru id Generarea id-urilor Funcție pentru generarea id-urilor Utilizarea funcției de id Utilizarea incorectă a funcției

Stări

Introducere în stări Utilizare Reactivitate Valoare booleană în stare Contor la lucrul cu stări

Formulare

Lucrul cu input-uri Modificarea datelor input-ului la afișare Modificarea datelor cu ajutorul unei funcții Lucrul cu mai multe input-uri Prelucrarea datelor formularului Lucrul cu textarea Lucrul cu checkbox-uri Checkbox-uri și randare condiționată Lucrul cu select-uri Elementele select-ului dintr-un array Atributele value în select Atributele value ale select-ului dintr-un array Lucrul cu radio Valori implicite Legarea input-urilor la un array Legarea input-urilor la un obiect

Date

Introducere Adăugare reactivă în array Operații reactive pe array-uri Adăugare reactivă în array de obiecte Operații reactive pe array-uri de obiecte Afișarea reactivă a datelor

Componente

Introducere în componente Utilizarea componentelor Mai multe instanțe ale componentei Props-urile componentelor Componente copil Array pentru a crea componente copil Componente copil într-o buclă Transmiterea stărilor către componentele copil Transmiterea id-ului într-o componentă Modificarea stării părintelui Editarea stării părintelui Editarea stării bunicului Moduri de funcționare prin stări

Concepte

Introducere Datele componentelor Tipuri de componente Flux de date unidirecțional Ridicarea stării O singură sursă a adevărului

Stilizare

Metode de stilizare în React CSS Global Inserarea datelor în atributul style dintr-un obiect Inserarea datelor în atributul style dintr-un fișier separat Lucrul cu stiluri CSS în atributul style Inserarea datelor în atributul style din variabile Styled Components Props în Styled Components Props și randare condiționată în Styled Components Componente cu stilizare extinsă Începerea lucrului cu CSS modules Continuarea lucrului cu CSS modules Comanda composes pentru clase Comanda composes pentru fișiere

Proiecte

Checklist Bloc de note

↑