Using JSX in React

Why JSX?

JSX allows html, css and js to be written in one place, as opposed to the old way of putting them in separate files.

Example JSX

Curly braces for dynamic strings.

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

Double Curly braces for CSS styles, the inner curly bracket is simple a JS object.

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}