Kòmanse ak React, konprann JSX, Virtual DOM ak kijan pou w rann eleman yo sou ekran an.

• Entwodiksyon sou JSX

  2 min : 30 seg li Apèsi

  Dekouvri pouvwa JSX nan React.

• Poukisa React?

  4 min

  Poukisa React tèlman popilè?

• Alo Lemonn (Hello World)

  4 min

  Ekri premye kòd JSX ou.

• Mistè a Revele

  4 min

  Ki mistè ki dèyè JSX?

• Kisa JSX ye?

  4 min

  Kisa JSX ye reyèlman?

• Eleman JSX

  6 min

  Kreye eleman de baz.

• Eleman JSX ak Anviwònman Yo

  6 min

  Kijan JSX reyaji anndan kòd JS.

• Atitid (Attributes) nan JSX

  6 min

  Mete atitid ou yo klè.

• Anboche JSX (Nested JSX)

  6 min

  Anboche eleman yo youn nan lòt.

• Eleman Paran nan JSX

  4 min

  Kenbe tout bagay anba yon sèl parapli.

• Afichaj (Rendering) JSX

  6 min

  Kijan sa parèt sou entènèt la?

• Esplikasyon sou Afichaj JSX

  6 min

  Dekouvri sekrè ReactDOM.

• Pase yon Varyab nan render()

  4 min

  Pase varyab JSX yo ba rann nan.

• DOM Vityèl la (Virtual DOM)

  4 min

  Sèvo ki fè React rapid la.

• Revizyon

  6 min

  Ann pase men sou sa n wè yo.

• Pwojè: Pwofil Mwen

  10 min

  Konbine tout sa w te aprann sou JSX ak rann eleman nan yon bèl pwofil.

Metrize className, kondisyon, bouk .map(), atribi dinamik ak eleman avanse nan JSX.

• class vs className

  3 min Apèsi

  Poukisa nou itilize className nan plas class nan JSX?

• Baliz ki Fèmen Tèt Yo (Self-Closing Tags)

  3 min

  Gade kijan pou w fèmen tout baliz nan JSX.

• JavaScript anndan JSX

  3 min

  Sèvi ak akolad pou antre nan mond JavaScript.

• Akolad { } ak Kalkil nan JSX

  3 min

  Fè kalkil ak operasyon JavaScript anndan JSX.

• 20 Chif Pi nan JSX

  3 min

  Rele fonksyon matematik anndan JSX.

• Varyab nan JSX

  3 min

  Konbine plizyè varyab ki gen moso JSX.

• Atribi Dinamik nan JSX

  3 min

  Bay atribi tankou src oswa href valè dinamik ak varyab.

• Evènman nan JSX (Event Listeners)

  3 min

  Ajoute evènman onClick sou bouton JSX.

• Kondisyon JSX: Deklarasyon If ki Pa Travay

  3 min

  Poukisa ou pa ka mete if nòmal nan mitan JSX?

• Kondisyon JSX: Deklarasyon If ki Travay

  3 min

  Itilize varyab deyò JSX pou deside sa k ap parèt.

• Kondisyon JSX: Operatè Tènè (Ternary Operator)

  3 min

  Fè chwa rapid dirèkteman anndan JSX ak operatè ? :

• Kondisyon JSX: Operatè Et (&&)

  3 min

  Afiche yon eleman sèlman si kondisyon an vre.

• Fonksyon .map() nan JSX

  3 min

  Transfòme yon tablo (Array) tounen yon lis eleman JSX.

• Atribi Key nan Lis JSX

  3 min

  Poukisa React mande yon key inik lè w ap fè .map()

• Konprann React.createElement

  3 min

  Kijan Babel tradwi JSX an JavaScript pur.

• Revizyon JSX Avanse

  3 min

  Konbine className, operatè tènè ak .map anndan yon sèl eleman.

• Pwojè: Bati yon Tablo Dashboard Dinamik

  13 min : 20 seg

  Konbine tout sa w te aprann nan chapit JSX Avanse a pou w bati yon Dashboard entèaktif.

Aprann kisa yon konpozan ye, kijan pou w kreye l, ekspòte l epi afiche l sou ekran.

• Kisa yon Konpozan React ye?

  3 min Apèsi

  Konprann achitekti konpozan (Components) nan React.

• Enpòte React ak createRoot

  3 min

  Fè premye etap esansyèl la nan nenpòt dosye React 18+.

• Wòl ReactDOM

  3 min

  Konprann kijan ReactDOM konekte React ak paj HTML ou a.

• Kreye yon Konpozan Fonksyonèl

  3 min

  Ekri premye fonksyon JavaScript ou ki tounen yon konpozan.

• Règ pou Bay Konpozan Non (PascalCase)

  3 min

  Poukisa non konpozan yo DWE kòmanse ak yon majiskil?

• Enstriksyon anndan Konpozan

  3 min

  Mete lojik ak varyab anvan liy return nan.

• Mo-klé Return nan

  3 min

  Poukisa parantèz obligatwa lè w ap retounen plizyè liy JSX.

• Enpòte ak Ekspòte Konpozan

  3 min

  Pataje konpozan nan plizyè dosye avèk export default.

• Itilize ak Rann yon Konpozan

  3 min

  Rele konpozan w lan kòm yon baliz HTML nan render la.

• Revizyon: Premye Konpozan React Ou

  3 min

  Konbine kreyasyon, enstriksyon, return, ak rann nan yon sèl egzèsis.

• Pwojè: Bati Kat Idantite Nimerik Ou (ID Card)

  11 min : 40 seg

  Konbine tout sa w te aprann sou konpozan React pou w bati yon bèl Kat Idantite.

Mete an pratik JSX sou plizyè liy, atribi dinamik, lojik ak evènman anndan konpozan yo.

• JSX sou Plizyè Liy anndan yon Konpozan

  3 min Apèsi

  Kijan pou w rann estrikti HTML ki gen plizyè nivo anndan yon konpozan.

• Atribi Dinamik anndan yon Konpozan

  3 min

  Bay atribi tankou src ak href valè ki soti nan varyab.

• Mete Lojik nan yon Konpozan Fonksyonèl

  3 min

  Fè kalkil ak prepare done anvan liy return nan.

• Kondisyon anndan yon Konpozan

  3 min

  Sèvi ak operatè tènè pou afiche kontni ki adapte.

• Evènman ak Fonksyon Manyen (Event Handlers)

  3 min

  Kreye fonksyon handler anndan konpozan an pou koute onClick.

• Revizyon: Konpozan ak JSX Avanse

  3 min

  Konbine plizyè liy JSX, atribi dinamik, lojik, kondisyon ak evènman.

• Pwojè: Bati yon Mini E-Commerce Card (Kat Pwodwi)

  10 min

  Konbine tout 6 konsèp chapit 4 yo pou w bati yon kat pwodwi.

Aprann kijan konpozan entèaji ansanm nan vlope ak rann lòt konpozan anndan yo.

• Kijan Konpozan yo Entèaji Ansanm

  3 min Apèsi

  Konprann Kisa yon Pyebwa Konpozan (Component Tree) ye.

• Retounen yon Lòt Konpozan anndan Return nan

  3 min

  Ensere yon konpozan pitit kòm yon baliz JSX anndan paran an.

• Itilize yon Konpozan anndan Rann nan

  3 min

  Rann konpozan tèt la (App) pou afiche tout pyebwa a.

• Revizyon: Konpozan Rann Lòt Konpozan

  3 min

  Konbine konpozan Tit ak Kontni anndan yon konpozan paran.

• Pwojè: Bati yon Mini Rezo Sosyal Feed (Mur Piblikasyon)

  8 min : 20 seg

  Mete an pratik konpozisyon konpozan nan bati yon mur rezo sosyal.

Metrize kijan pou w pase done, fonksyon ak eleman timoun (children) ant konpozan yo.

• Kisa Props ye?

  3 min Apèsi

  Konprann sistèm pwopriyete (props) nan React.

• Pran ak Li Props yo nan yon Konpozan

  3 min

  Li akolad ak objè props la anndan konpozan pitit la.

• Pase Props nan yon Konpozan

  3 min

  Ekri atribi nan baliz la lè w ap rele konpozan an.

• Afiche ak Rann Props yo sou Ekran

  3 min

  Mete plizyè props ansanm nan divès baliz HTML.

• Pase Props de Konpozan an Konpozan

  3 min

  Konprann Prop Drilling de Granparan ale nan Paran epi Pitit.

• Afichaj Diferan Selon Valè Props yo

  3 min

  Itilize operatè tènè pou chanje afichaj selon prop la.

• Fonksyon Manyen Evènman anndan Konpozan

  3 min

  Kreye yon handler anvan nou pase l kòm prop.

• Pase yon Fonksyon Handler kòm Prop

  3 min

  Voye yon fonksyon paran bay yon konpozan pitit.

• Resevwa ak Egzekite yon Handler depi Props

  3 min

  Konekte prop la avèk onClick nan baliz pitit la.

• Kouran pou Bay Non: handleEvent vs onEvent

  3 min

  Suiv bon pratik pou nonmen fonksyon ak props evènman yo.

• Pwopriyete Espesyal: props.children

  3 min

  Vlope kontni ant baliz lendi ak fèmen pou rann nan children.

• Bay Props yo Valè pa Defo (Default Values)

  3 min

  Evite erè si paran an bliye voye yon prop nan itilize valè pa defo.

• Revizyon Konplè sou Props

  3 min

  Melanje props, handlers, ak children nan yon sèl egzèsis.

• Pwojè: Bati yon Sistèm Kat Itilizatè Dinamik (User Directory)

  15 min

  Mete an pratik tout 13 leson yo sou props, handlers, ak children.

Aprann kijan pou rann konpozan yo entèaktif avèk useState pou chanje done yo sou ekran an.

• Poukisa nou Itilize Hooks?

  3 min Apèsi

  Konprann rezon ki fè varyab nòmal pa fè ekran an rafrechi nan React.

• Mete State la Ajou avèk Setter a

  3 min

  Sèvi ak fonksyon setter a pou modifye done aktyèl la.

• Inisyalize State la

  3 min

  Chwazi bon valè kòmansman an (tèks, boolean, chif).

• Rele Setter a deyò JSX la (Nan Handlers)

  3 min

  Kreye yon fonksyon handler separe pou kenbe JSX la pwòp.

• Chanje State apati Valè Anvan an (Updater Function)

  3 min

  Sèvi ak yon fonksyon (prev => prev + 1) pou sekirite maksimòm.

• Tablo (Arrays) nan State

  3 min

  Ajoute eleman nan yon tablo san ou pa modifye ansyen an.

• Objè (Objects) nan State

  3 min

  Modifye yon sèl chan nan yon objè avèk ...obj.

• Plizyè Hooks pou Done Separe

  3 min

  Kreye plizyè liy useState pou chak done endepandan.

• Revizyon Konplè sou useState Hook

  3 min

  Melanje inisyalizasyon, updater function, ak objè nan yon sèl leson.

• Pwojè: Bati yon Jesyonè Panye Acha (Interactive Shopping Cart)

  13 min : 20 seg

  Mete an pratik tout 9 konsèp yo sou useState, updater function ak objè.

Aprann kijan pou jere efè segondè yo tankou chaje done depi API oswa revèy avèk useEffect.

• Poukisa nou Itilize useEffect?

  3 min Apèsi

  Konprann diferans ant kalkile JSX sou ekran ak fè efè segondè deyò.

• Kreye yon Efè anndan yon Konpozan

  3 min

  Enpòte ak ekri fonksyon useEffect la.

• Netwaye Efè yo (Clean Up Function)

  3 min

  Retounen yon fonksyon netwayaj pou anile revèy ak evènman yo.

• Kontwole Kilè Efè a Rele (Dependency Array)

  3 min

  Mete yon tablo depandans [] pou kontwole egzekisyon efè a.

• Chaje Done depi Sèvè (Fetch Data)

  3 min

  Sèvi ak useEffect ak [] pou simule oswa chaje done nan kòmansman an.

• Règ Sakre pou Hooks yo (Rules of Hooks)

  3 min

  Toujou rele Hooks sou tèt konpozan an, pa nan if oswa bouk.

• Plizyè useEffect pou Efè Separe

  3 min

  Kreye plizyè useEffect pou jere chak travay separeman.

• Itilize useEffectEvent (Konsèp Avanse)

  3 min

  Konprann kijan nou separe lojik reyaktif ak non-reyaktif.

• Revizyon Konplè sou useEffect

  3 min

  Melanje revèy, depandans, ak chaje done nan yon sèl leson.

• Pwojè: Bati yon Tablo Dashboard Live (Live Dashboard)

  14 min : 10 seg

  Mete an pratik tout 9 konsèp yo sou useEffect, depandans ak netwayaj.

Aprann separe konpozan lojik (Container) ak konpozan vizyèl (Presentational) epi jere kominikasyon.

• Separe Konpozan Lojik ak Konpozan Vizyèl

  3 min Apèsi

  Konprann wòl Container Components vs Presentational Components.

• Kreye yon Konpozan Lojik (Container Component)

  3 min

  Ekri konpozan ki kenbe state epi ki ap jere tout fonksyon yo.

• Kreye yon Konpozan Vizyèl (Presentational Component)

  3 min

  Ekri konpozan ki rann sèlman UI apati props li resevwa yo.

• Kominikasyon ant Paran ak Pitit epi Frè ak Sè (Siblings)

  3 min

  Leve done yo anlè nan paran komin nan (Lifting State Up).

• Rann Konpozan Vizyèl yo anndan Konpozan Lojik la

  3 min

  Rasanble plizyè konpozan vizyèl nan return paran an.

• Revizyon Konplè sou Patwon Pwogramasyon React

  3 min

  Melanje Container, Presentational ak Lifting State Up nan yon sèl leson.

• Pwojè: Bati yon Sistèm Komantè an Rezo (Container & Presentational Pattern)

  12 min : 30 seg

  Mete an pratik tout 6 konsèp yo sou Container vs Presentational Components.

Aprann diferan fason pou dekore aplikasyon React ou: estil inline, objè estil, sentaks camelCase, ak plizyè fèy estil.

• Entwodiksyon sou Estil nan Aplikasyon React

  3 min Apèsi

  Dekouvri kijan pou dekore aplikasyon React ou ak diferan apwòch estil yo.

• Estil Inline ak Varyab Objè Estil

  3 min

  Aprann pase objè JavaScript nan atribi style oswa estoke yo nan varyab.

• Sentaks Estil nan React (camelCase & Nimerik)

  3 min

  Metrize sentaks camelCase ak valè nimerik pou estil React yo.

• Fèy Estil Miltip (Multiple Stylesheets)

  3 min

  Aprann òganize estil ou ak plizyè klas ak fichye pou chak konpozan.

• Revizyon Konplè sou Estil nan React

  3 min

  Melanje estil inline, objè estil nan varyab, ak camelCase nan yon konpozan dinamik.

• Pwojè: Bati yon Tablodbò ak Tèm Dinamik (Dynamic Theme Dashboard)

  12 min

  Mete an pratik tout konsèp sou estil inline, objè estil nan varyab ak camelCase.

Aprann jere fòmilè an React: input onChange, handlers, state inisyal, epi konprann diferans ant eleman kontwole ak sa ki pa kontwole.

• Fòmilè nan React (React Forms)

  3 min Apèsi

  Konprann kijan fòmilè travay an React ak poukisa yo diferan de HTML nòmal.

• Evènman onChange sou Input

  3 min

  Aprann koute chak fwa itilizatè a tape yon karaktè avèk onChange.

• Ekri yon Handler pou Evènman Input la

  3 min

  Kreye fonksyon handler ki resevwa evènman e epi ekstrè e.target.value.

• Defini State Inisyal pou Input la

  3 min

  Inisyalize state ak useState pou konekte done ak jaden fòmilè a.

• Mete Valè Input la a Jou nan State la

  3 min

  Konekte value ak onChange pou kreye yon sik konplè ak setInput.

• Input Kontwole vs Input Pa Kontwole

  3 min

  Konprann diferans ant Controlled Components ak Uncontrolled Components.

• Revizyon Konplè sou Fòmilè React

  3 min

  Revizyon sou fòmilè kontwole, plizyè jaden, ak e.preventDefault().

• Pwojè: Bati yon Fòmilè Rezèvasyon pou Somè Teknoloji Ayiti (Event Registration Form)

  14 min : 10 seg

  Mete an pratik tout konsèp sou fòmilè kontwole ak onChange nan yon pwojè konplè.