JSX in React: Unlocking Dynamic UI with Chemistry-Inspired Components

In the world of React, JSX is the language of design. It brings together the expressive power of JavaScript and the declarative structure of HTML—allowing developers to build UIs as elegantly as a chemist arranges atoms into molecules.

In this first installment of a component-focused series, we’ll break down JSX, why it's essential, and how to harness it with a real-world example based on chemistry: a Periodic Table Element Viewer 🔬.

What is JSX?

JSX stands for JavaScript XML—a syntax extension that lets you write HTML-like code inside your JavaScript. It’s not required to use React, but JSX makes your code:

More declarative
Easier to read and maintain
Fully expressive with JavaScript features

const element = <h1>Hello, world!</h1>;

This JSX is transformed by Babel into:

const element = React.createElement('h1', null, 'Hello, world!');

🧪 Why Developers Use JSX (Like a Chemist Uses a Formula)

Feature	Benefit
Familiar syntax	Looks like HTML—easy to learn
Dynamic expressions	Use `{}` to inject variables, conditions
Component reuse	Define once, use many times
Optimized rendering	Compiled efficiently by Babel

Just as molecules in chemistry follow structure and rules, JSX follows JavaScript rules with HTML structure.

JSX Rules to Remember

Rule	Explanation
`className` instead of `class`	Because `class` is a reserved keyword in JS
`htmlFor` instead of `for`	For label associations
Self-close tags	Like `<input />`, `<img />`
Use `{}` for JS expressions	`{element.symbol}` renders the symbol
Wrap multiline JSX in `()`	Prevent semicolon insertion issues

Chemistry-Inspired Example: Periodic Table Element Viewer

Let’s build a simple React component that shows details of a periodic table element using JSX.

interface Element {
  symbol: string;
  name: string;
  atomicNumber: number;
}

function ElementCard(props: { element: Element }) {
  return (
    <div className="card">
      <h2>{props.element.symbol}</h2>
      <p><strong>Name:</strong> {props.element.name}</p>
      <p><strong>Atomic Number:</strong> {props.element.atomicNumber}</p>
    </div>
  );
}

To render the component:

const hydrogen = {
  symbol: 'H',
  name: 'Hydrogen',
  atomicNumber: 1
};

ReactDOM.render(
  <ElementCard element={hydrogen} />,
  document.getElementById('root')
);

Output:

<div class="card">
  <h2>H</h2>
  <p><strong>Name:</strong> Hydrogen</p>
  <p><strong>Atomic Number:</strong> 1</p>
</div>

Key Concepts Illustrated

JSX Feature	Use
JSX markup	HTML-like code inside components
Curly braces `{}`	Inject JS variables in markup
Component props	Passed like HTML attributes
Capitalized component name	React knows it’s a custom component

Developer Mindset

Just like chemistry, React development benefits from structure, reusability, and clear definitions:

JSX is your molecular language
Components are your molecules
Applications are your chemical reactions 🔬

Conclusion

JSX is the foundation for crafting expressive, maintainable, and dynamic React applications. It simplifies your logic, organizes your UI, and unlocks the power of composition.

By understanding JSX, you're not just writing code—you're engineering interactions, just like scientists do with molecules.

Next up in this series: Props & State — Managing Your Component’s Energy Levels 🔋

Tags: react jsx chemistry frontend typescript webdev

Cristian Sifuentes @cristiansifuentes