CodeDala
⚛
💻 For developers

React Start

Components, state, effects — modern frontend

What you'll build
📘A solid foundation
⚡Practice in the browser
🎯Mini-projects
🎓Course certificate
📘 30 lessons⏱ 1-2 evenings🎓 Advanced
🎯 Mission
Master React Start
⚡+350XP
🏆CertificatePDF
🎓Course complete
Progress0 / 30 · 0%
Next up: What is React

Course program

01

Компоненты и JSX

0 / 5 lessons
⌄
  1. 01

    What is React

    Library•Component•JSX⚡ +10
    ▶ Now
  2. 02

    JSX rules

    One root tag•Fragment <>•className⚡ +10
    Open
  3. 03

    Expressions in JSX

    Curly braces {}•JS expressions•Template text⚡ +10
    Open
  4. 04

    Using components

    Calling as a tag•Nesting•Reuse⚡ +10
    🔒 Pro
  5. 05

    TypeScript and TSX

    The TSX extension•Type annotation•Why TypeScript⚡ +10
    🔒 Pro
02

Props

0 / 5 lessons
⌄
  1. 06

    What are props

    The props object•As a parameter•Passing values⚡ +10
    🔒 Pro
  2. 07

    Destructuring props

    Destructuring•Cleaner code•Unpacking the parameter⚡ +10
    🔒 Pro
  3. 08

    An interface for props

    interface type•The Props type•Reuse⚡ +10
    🔒 Pro
  4. 09

    Default prop values

    Default value•Destructuring = value•Optional prop⚡ +10
    🔒 Pro
  5. 10

    The children prop

    children prop•Wrapper component•The ReactNode type⚡ +10
    🔒 Pro
03

Состояние useState

0 / 5 lessons
⌄
  1. 11

    Introduction to useState

    The useState hook•State variable•Re-render⚡ +10
    🔒 Pro
  2. 12

    Types in useState

    Type parameter•boolean state•string state⚡ +10
    🔒 Pro
  3. 13

    Multiple state variables

    Multiple useState•Independent states•Form data⚡ +10
    🔒 Pro
  4. 14

    Object state

    Object state•Spread syntax•Immutability⚡ +10
    🔒 Pro
  5. 15

    Counter mini project

    Counter•Increment/Decrement•Reset to zero⚡ +10
    🔒 Pro
04

События и формы

0 / 5 lessons
⌄
  1. 16

    The onClick event

    The onClick event•Event handler•Anonymous function⚡ +10
    🔒 Pro
  2. 17

    The onChange event

    The onChange event•The event object e•The input value⚡ +10
    🔒 Pro
  3. 18

    The onSubmit event

    The onSubmit event•e.preventDefault()•Submitting a form⚡ +10
    🔒 Pro
  4. 19

    Controlled input

    Controlled input•value + onChange•State sync⚡ +10
    🔒 Pro
  5. 20

    Todo form mini project

    Creating a Todo•Submit form•Adding to a list⚡ +10
    🔒 Pro
05

Списки и условия

0 / 5 lessons
⌄
  1. 21

    Rendering a list with .map()

    .map() rendering•Array of JSX•List of elements⚡ +10
    🔒 Pro
  2. 22

    The key prop

    The key prop•Unique ID•Index vs ID⚡ +10
    🔒 Pro
  3. 23

    Conditional rendering with the ternary operator

    Conditional render•Ternary operator•? : syntax⚡ +10
    🔒 Pro
  4. 24

    Conditional rendering with the && operator

    The && operator•One-sided condition•Short render⚡ +10
    🔒 Pro
  5. 25

    Todo list mini project

    Todo list•List rendering•Toggle function⚡ +10
    🔒 Pro
06

useEffect и композиция

0 / 5 lessons
⌄
  1. 26

    Introduction to useEffect

    The useEffect hook•Side effect•After render⚡ +10
    🔒 Pro
  2. 27

    The useEffect cleanup function

    Cleanup function•return () => {}•Clearing setInterval⚡ +10
    🔒 Pro
  3. 28

    Composing components

    Composition•Wrapper component•Nested components⚡ +10
    🔒 Pro
  4. 29

    Lifting state up

    Lifting state•Callback props•Shared state⚡ +10
    🔒 Pro
  5. 30

    Toggle mini project

    Toggle component•State + effect•Final project
    Course complete
    🔒 Pro