reactJS cheatsheet

Uses JSX for markup language. Essentially just strict html (everything has to be closed)
CSS is noted with classname
<img className="avatar" />

make sure to wrap things in valid parents (e.g. <div>...</div> or <>...<>)

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do</p>
    <>
  );
}

Displaying data

Curly braces let you escape back into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display user.name

return (
  <h1>
    {user.name}
  <\/h1>
);