JSTAcademy
0 XP
Dashboard
Crash Courses
React Components & JSX
10 min
Basic+150 XP
Crash Courses · Basic

React Components & JSX

Build composable UI with function components and JSX syntax.
10 min read+150 XP on completionCert: React Crash Course
Tap any word in the text below to start reading from there.

React Components & JSX

React is a library for building user interfaces from composable components. Every UI element — button, card, nav, page — is a component.

Function Component

interface GreetingProps {
  name: string
  role?: 'admin' | 'student'
}

export function Greeting({ name, role = 'student' }: GreetingProps) {
  return (
    <div className="greeting">
      <h2>Hello, {name}</h2>
      <p>Role: {role}</p>
    </div>
  )
}

// Usage
<Greeting name="Jordan" role="admin" />

JSX Rules

// 1. Only one root element — wrap with div or Fragment
return (
  <>
    <h1>Title</h1>
    <p>Paragraph</p>
  </>
)

// 2. className, not class
<div className="card">

// 3. Self-close empty elements
<img src="/logo.svg" alt="Logo" />
<br />
<input type="text" />

// 4. JavaScript expressions in {}
<h1>Score: {score * 2}</h1>
<img src={`/avatars/${userId}.jpg`} alt="Avatar" />

Conditional Rendering

function StatusBadge({ active }: { active: boolean }) {
  return (
    <div>
      {active && <span className="badge green">Active</span>}

      {active
        ? <span className="badge green">Active</span>
        : <span className="badge grey">Inactive</span>
      }
    </div>
  )
}

Lists with .map()

interface Course { id: string; title: string; xp: number }

function CourseList({ courses }: { courses: Course[] }) {
  return (
    <ul>
      {courses.map(course => (
        <li key={course.id}>
          {course.title} — {course.xp}xp
        </li>
      ))}
    </ul>
  )
}

The key prop is required when rendering lists — React uses it to track which items changed.

0%