JSX: Describing the Interface

A student report combines fixed labels with calculated marks. We want to see the page structure and the calculation’s insertion points together without treating markup as a string.

JSX is a syntax extension to JavaScript. It resembles HTML, but a build tool transforms it into JavaScript that describes React elements. JSX is optional for React, though this course uses it because it keeps component structure readable.

Explain
Insert a student’s name and a calculated mark using JSX braces.
Trace
Connect an accessible field label with htmlFor and id.
Apply
Fix missing wrappers, unclosed tags and incorrectly quoted expressions.

JSX: follow the relationship

Read marks
The component reads maths and science from its current data.
Evaluate braces
The expression maths + science produces a numeric total.
Insert text
The JSX paragraph includes that total in the displayed report.

Read this relationship alongside the complete code. This diagram explains the flow; it does not execute React.

Build the mental model

Literal text goes between tags. Braces open an expression position: {name} reads a value and {maths + science} evaluates addition. Quotes in an attribute mean a fixed string; braces mean a JavaScript expression. Those choices change what the program receives.

Expressions, statements and text

An expression computes a value, so it fits inside JSX braces. Addition, property access and a conditional expression are examples. A statement such as if controls execution rather than producing an insertable value in that position. Put statement-based decisions before the return and insert the resulting value.

JSX is not a quoted HTML template. Tags form syntax that the build tool must understand. A syntax error can stop the entire component from compiling, while a wrong expression can compile successfully and display the wrong result. Check both syntax and the meaning of the resulting screen.

Read the complete React example

The fragment groups a heading and paragraph without adding an extra wrapper element to the page. The name is Asha; maths is 40 and science is 35. While this component renders, the addition inside braces produces 75, so the paragraph displays Total: 75.

The heading mixes an inserted name with literal text. Braces evaluate the name variable, while the words outside braces remain text. Change a mark and render again to see how the same description produces a different total.

React · JavaScript with JSX

import React from 'react';
export default function App() {
  const name = 'Asha';
  const maths = 40;
  const science = 35;
  return <><h1>{name}'s marks</h1><p>Total: {maths + science}</p></>;
}

Expected screen and behavior

Initial screen: Asha's marks Total: 75

Connect the source to the screen

React · main example

import React from 'react';
export default function App() {
  const name = 'Asha';
  const maths = 40;
  const science = 35;
  return <><h1>{name}'s marks</h1><p>Total: {maths + science}</p></>;
}

Calculations inside braces happen while the component renders. JSX is a description of the interface, not an immediate instruction to append a browser node. An object cannot be displayed directly as paragraph text; choose a property such as student.name instead.

Read attributes as JavaScript inputs

React · labeled read-only mark

import React from 'react';
export default function App() {
  const mark = 42;
  return <><h1>Maths report</h1><label htmlFor="mark">Maths mark</label><input id="mark" value={mark} readOnly /><p>Recorded mark: {mark}</p></>;
}

An attribute with quotes supplies fixed text, such as className="student-report". Braces supply a JavaScript value, such as value={mark}. Use htmlFor on a label to refer to the field’s id, and close a field tag with /> because JSX requires every tag to be closed.

An input with value is controlled by that value. The example below deliberately marks it readOnly because it displays a mark rather than allowing editing. Editable fields need an update handler; you will learn that relationship in controlled inputs. A label identifies the field’s purpose for a person using a screen reader as well as someone viewing the page.

Avoid the common mistakes

Use one enclosing element or fragment for adjacent returned siblings. Write style objects with JavaScript property names rather than CSS declarations in a string. JSX does not sanitize arbitrary HTML supplied through dangerouslySetInnerHTML; ordinary text interpolation is the suitable choice for names.

Practice before reading the solution

React · starting example

import React from 'react';
export default function App() {
  const name = 'Asha';
  const maths = 40;
  const science = 35;
  return <><h1>{name}'s marks</h1><p>Total: {maths + science}</p></>;
}

Show one student’s subject mark and a descriptive label for a read-only field.

Predict the initial visible text and explain which values determine it. Then inspect the worked solution below. Change one relevant input in your local project and check whether the screen follows your prediction. A working screen should be checked for the intended meaning, not merely the absence of an error.

Worked practice solution

The solution uses a fragment because the two top-level elements belong together but need no extra layout container. The braces supply the numeric value; the accessible label makes the field’s purpose clear even without visual positioning.

React · JavaScript with JSX

import React from 'react';
export default function App() {
  const mark = 42;
  return <><h1>Maths report</h1><label htmlFor="mark">Maths mark</label><input id="mark" value={mark} readOnly /><p>Recorded mark: {mark}</p></>;
}

Expected screen and behavior

Initial screen: Maths report Maths mark Recorded mark: 42

Choose the explanation that matches React and JavaScript behavior. Review the reasoning for each alternative before moving on.

Use the idea in the next lesson

JSX is a syntax extension to JavaScript. It resembles HTML, but a build tool transforms it into JavaScript that describes React elements. JSX is optional for React, though this course uses it because it keeps component structure readable.

Continue with Styling React Components. Revisit Your First Component when the relationship between inputs and the resulting screen needs another look.

Read the primary reference: React documentation on JSX: Describing the Interface.

Reaching the recap and completing the quizzes are separate milestones.

Next lesson: Styling React Components →

JSX: Describing the Interface