К содержанию

Tutorialul de bază React

Tutorial despre framework-ul JavaScript React. Pentru începători. Multă teorie și sarcini practice.

Уроки

Introducere în framework-ul React

Instalarea framework-ului React

Conectarea pluginului react-devtools

Introducere în abordarea componentelor în React

Layout-ul site-ului framework-ului React

Rezultatul lucrării componentei

Limbajul JSX

Introducere în limbajul JSX în React

Returnarea tag-urilor JSX imbricate prin funcții

Regulile de returnare a funcției la mutarea tagului în jos în JSX

Particularități ale returnării mai multor tag-uri în JSX

Returnarea unui tag JSX neînchis

Returnarea unui tag gol de către o funcție în JSX

Inserarea valorilor variabilelor și constantelor în JSX

Nuanțe la inserarea valorilor variabilelor

Inserarea array-urilor în JSX

Inserarea obiectelor în JSX

Inserarea variabilelor și constantelor în atributele tag-urilor în JSX

Stocarea tag-urilor în variabile și constante JSX

Particularitățile stocării mai multor tag-uri în constante JSX

Etichete pe linii diferite în JSX

Returnarea tag-urilor prin return în JSX

Închiderea Tagurilor JSX

Corectitudinea Layout-ului în React

Executarea codului JavaScript

Condiții

Utilizarea condițiilor în JSX

Afișare condiționată în React

Condiții pentru returnarea tag-ului în JSX

Operatorul ternar în JSX

Utilizarea operatorului && în JSX

Inversarea condițiilor scurte în JSX

Funcții

Utilizarea funcțiilor în React

Apelarea funcțiilor în interiorul tag-urilor în React

Atasarea evenimentelor în JSX

Parametri în funcția JSX

Obiectul Event în React

Obiectul Event la transmiterea parametrilor

Formarea tag-urilor

Etichete în array-uri JSX

Formarea unui array de tag-uri într-o buclă React

Generarea de tag-uri dintr-un array cu date în React

Chei unice în matricea de tag-uri în React

Afișarea unui array de obiecte în React

Chei unice prin id în React

Afișarea unui tablou de obiecte sub formă de tabel HTML în React

Id-uri unice

Discuție despre id-uri unice în React

Probleme cu noile id-uri în React

Șiruri aleatorii pentru id în React

Generarea id-ului în React

Funcție pentru generarea id-ului în React

Utilizarea funcției id în React

Utilizarea incorectă a funcției id în React

Stări

Introducere în stările în React

Utilizarea stărilor în React

Reactivitatea stărilor în React

Valoarea booleană în starea din React

Contor cu stări în React

Formulare

Lucrul cu input-uri în React

Modificarea datelor introduse în input la afișarea lor în React

Modificarea datelor folosind o funcție în React

Lucrul cu mai multe input-uri în React

Prelucrarea datelor formularului la click pe buton în React

Lucrul cu textarea în React

Lucrul cu checkbox în React

Casetă de bifat și randare condiționată în React

Lucrul cu select în React

Elemente de selectare dintr-un array în React

Atributele value în select în React

Atributele value ale select-ului dintr-un array în React

Lucrul cu radio în React

Valori implicite în React

Legarea input-urilor la un array în React

Legarea inputurilor la un obiect în React

Date

Reactivitatea datelor în React

Adăugarea reactivă într-un array în React

Operațiuni reactive pe array-uri în React

Adăugarea reactivă într-un array de obiecte în React

Operații reactive pe array-uri de obiecte în React

Afișarea reactivă a datelor în React

Componente

Introducere în componentele React

Utilizarea componentelor în React

Mai multe instanțe ale unui component în React

Props-urile componentelor în React

Crearea componentelor copil în React

Matrice pentru crearea componentelor copil în React

Componente copil în buclă React

Transmiterea stărilor în componentele copil în React

Transmiterea id-ului în component în React

Modificarea stării părintelui în componenta copil în React

Editarea stării părintelui în componenta copil în React

Editarea stării într-un component strănepot în React

Moduri de lucru prin stările componentelor descendente în React

Concepte

Conceptele React în lucrul cu componente

Datele componentelor în React

Tipuri de componente în React

Flux de date unidirecțional în React

Ridicarea stării în React

O singură sursă a adevărului în React

Stilizare

Metode de stilizare a componentelor React

Utilizarea CSS global pentru stilizarea în React

Inserarea datelor în atributul style dintr-un obiect în React

Inserarea datelor în atributul style dintr-un fișier separat în React

Lucrul cu stilurile CSS în atributul style în React

Inserarea datelor în atributul style din variabile în React

Stilizarea cu Styled Components în React

Utilizarea props cu Styled Components în React

Utilizarea props-urilor în redarea condiționată cu Styled Components în React

Stilizarea Avansată a Componentelor în React

Începutul studiului stilizării cu CSS modules în React

Continuarea studiului stilizării cu module CSS în React

Proprietatea composes pentru clase în CSS modules în React

Comanda composes pentru fișiere în CSS modules în React

Proiecte

Lista de Verificare a Proiectului în React

Proiectul Notițe în React