JSX

Need to import react to use

• Combines logic with display

• Can put any js expression within braces in JSX

• React elements are immutable js objects

• its elements are just JavaScript objects, you could potentially look at and clone with changes

• const name = 'Josh Perez';
  const element = <h1>Hello, {name}</h1>;
  
  const element = <img src={user.avatarUrl} />;
  //either use quote string or js expression

  auto esapes values in JSX to prevent XSS

Syntax

• Can close empty tags with /> i.e <img src=... />

• Camel case:

  • class => className

  • tabindex => tabIndex

• Can have nested divs, but must have a single outermost div or fragments

• Can be multiple lines

JSX transform

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
//jsx becomes
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
//which essentially becomes
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

Rendering with Variable

let button = <LogoutButton onClick={this.handleLogoutClick} />;
return (  <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );

Inline Logic

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

Prevent Component from Rendering

just return null

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

Fragments

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}