JSX

JSX

短篇 React 學習筆記。

JSX

JSX = JavaScript Syntax Extension

Lets XML/HTML + JavaScript/React code coexist.

Example:

1
2
3
4
5

const name = 'Boop';
const element = '<div>Hello, {name}</div>';


ReactDOM.render(element, document.getElementById('root'));

In this example, the variable name is wrapped in JSX.

These code are then converted into standard JavaScript objects that can be parsed by the JS Engine.

Why JSX?

  • Much faster than normal JS, as JSX optimizes when it’s converted into regular JS.
  • Easy to create template.
  • React Component lets us keep both markup and logic together in one file using JSX.

Attributes in JSX

React DOM uses camelCase.

For example, class becomes className…

1

let button = <button className="btn-primary">Button</button>;