MENU

About JSX

Notice in 1.1, when implementing LikeButton, we used an HTML-like string:

<button onClick={() => this.setState({ liked: true })}>Like
  </button>

<button onClick={() => this.setState({ liked: true })}>Like
  </button>

The syntax

<Type attribute=value>children</Type>

<Type attribute=value>children</Type>

is an extension to JavaScript and called JSX. JSX can have:

HTML elements or user-defined components as Type. User-defined components must be capitalized.

user-defined props, 'key', 'ref', HTML-attribute (eg. className, checked) as attribute. {...props} copies the entire inherited props list.

string literals, {expression}, {function}, {JSX components} as attribute value.'checked' is the same as 'checked={true}'.

string literals, {expression}, {function}, or other {JSX components} as children. 'false', 'null', 'undefined', and 'true' are valid children. They simply don't render. Eg. <div/>,<div></div>,<div>{true}</div> render to the same thing.

const msg = ‘Hello, world’;const c1 = ‘greeting’;const myEventHandler = ()=>{alert(“YES");}const element = (
  <h1 className={c1} myProp="a" onClick={myEventHandler}>
    {true && msg}!!!
  </h1>);

const msg = ‘Hello, world’;const c1 = ‘greeting’;const myEventHandler = ()=>{alert(“YES");}const element = (
  <h1 className={c1} myProp="a" onClick={myEventHandler}>
    {true && msg}!!!
  </h1>);

Note that there are no paratheses after 'myEventHandler' specified for 'onClick'.