CodeBlanks Logo Icon CodeBlanks
Login Register

What is JSX?

Learn that JSX lets you describe UI with an HTML-like syntax.

What is JSX?

JSX is a React extension that lets you write HTML-like syntax inside JavaScript files. When you write return <h1>Hello</h1>;, the build tool turns it into a React.createElement(...) call behind the scenes.

JSX keeps the UI markup next to the component logic, so the view and the behaviour live together. JSX is not a template language; it is fully part of JavaScript.

Its biggest strength is being declarative: you say what should appear on screen, and React takes care of the rest.

Why is JSX handy?

Without JSX, writing UI with React.createElement is long and hard to read. JSX lets you write the same structure in a short, HTML-like form.

You can put any JavaScript expression inside curly braces { } in JSX. This makes linking data to the view a one-liner.

JSX is compiled JavaScript; the browser does not understand it directly. That's why a tool like Vite or Babel transforms the code first.

Practice First JSX component

Complete the skeleton. Write a function called Title that returns <h1>Welcome</h1> and export it.

Starter code

App.jsx
// Write the Title component here

Sample solution

App.jsx
function Title() {
  return <h1>Welcome</h1>;
}

export default Title;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 The call JSX compiles to

  • React.createElement Correct answer
  • React.makeNode
  • React.build
  • document.createElement

Explanation: JSX compiles to React.createElement calls behind the scenes.

2 The tool that compiles JSX

Question 
Vite or ____ translates JSX into code the browser understands.
Answer 
Vite or Vite translates JSX into code the browser understands.

Explanation: Vite or Babel turns JSX into React.createElement calls.

3 Match the concepts

Term Meaning
JSX HTML-like syntax
{ } Expression slot
React.createElement Compiled call
Babel Transformer

All lessons in Beginner

1 React intro

  1. What is React?
  2. Setup and Vite
  3. Your first component
  4. Summary - React intro

2 JSX basics

  1. What is JSX?
  2. Expressions and curly braces
  3. Attributes and className
  4. Summary - JSX basics

3 Components

  1. Component logic
  2. Component tree
  3. Naming rules
  4. Summary - Components

4 Profile card

  1. Project: Profile card
  2. Avatar component
  3. Info list
  4. Assemble the card

5 Props

  1. What are props?
  2. Reading props
  3. Children prop
  4. Default props
  5. Summary - Props

6 Conditional rendering

  1. What is conditional rendering?
  2. Ternary operator
  3. Logical AND (&&)
  4. Early return
  5. Summary - Conditional rendering

7 List rendering

  1. What is list rendering?
  2. The key attribute
  3. Array to components
  4. Filtering and sorting
  5. Summary - List rendering

8 Shopping list

  1. Project: Shopping list
  2. Item component
  3. List body
  4. Empty state

9 Events

  1. Events
  2. The event object
  3. Form events
  4. Summary - Events

10 useState

  1. What is state?
  2. The useState call
  3. Updating state
  4. Multiple state values
  5. Summary - useState

11 Counter app

  1. Project: Counter app
  2. Number and buttons
  3. Decrement and reset
  4. Boundary control

12 Forms

  1. Controlled input
  2. Form submission
  3. Multiple fields
  4. Summary - Forms

13 Styling

  1. Styling with CSS
  2. CSS Modules
  3. Inline styles
  4. Summary - Styling

14 styled-components

  1. What is styled-components?
  2. Styling with props
  3. Using themes
  4. Summary - styled-components

15 useReducer

  1. What is useReducer?
  2. Action and state
  3. useState vs useReducer
  4. Summary - useReducer

16 useEffect

  1. What is useEffect?
  2. Dependency array
  3. Cleanup function
  4. Summary - useEffect

17 Context

  1. What is context?
  2. createContext
  3. Provider and useContext
  4. Summary - Context

18 useRef

  1. What is useRef?
  2. DOM access
  3. Timer example
  4. Summary - useRef

19 Todo app

  1. Project: Todo app
  2. Todo entry form
  3. Todo list
  4. Filter and summary

20 Beginner final

  1. Challenge: Weather card
  2. Challenge: Cart summary
  3. Challenge: Counter and reset
  4. Challenge: Dropdown menu