Introducing JSX

As you explore Create React App's JavaScript files, you may notice "HTML" in the JavaScript files. It may look and feel like HTML but it's not HTML.

JSX is a syntactical extension of JavaScript. It allows developers to describe the user interface in a templating language while having the full power of a programming language.

Expressions

Expressions can be embedded into JSX. Review the following render() example:

render() {
  return (
    <div>
      2 + 2 = {2+2}
    </div>
  );
}

or similarly:

sum (a, b) {
  return a + b;
}
render() {
  const a = 3,
        b = 2;
  return (
    <div>
      {a} + {b} = {this.sum(a, b)}
    </div>
  );
}

Since JSX is actually JavaScript (and not HTML), JSX uses camelCase naming convention instead of standard HTML attribute names. For example, the property class in HTML is className in JSX.

Please refer to the React documentation for in-depth material on JSX.

Homework

• Finish Codecademy's React 101 tutorial