Simple jsx sample snippets to familiarize the beginner with its key concepts and syntax (Episode 1 of probably many...)

jsxsamples.js

function formatName(user) {
  return user.firstName + ' ' + user.lastName;

}

const user = {
  firstName:'Harper',
  lastName:'Perez'
};

const element = (
  <h1>
    hello, {formatName(user)}!
  </h1>
);

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

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>

  }
  return <h1>Hello, Stranger </h1>;
}

const element2 = <div tableIndex="0"></div>

const element3 = <img src={user.avatarUrl} />

const element4 = (
  <div>
    <h1>Hello!</h1>
    <h2> Good to see you here.</h2>

  </div>
);