react.js

//                   //
// Notes on React.js //
//                   //


// ES6 Arrow Function
// This is a functional component
const App = () => {
  return <h1>Hello World</h1>
};


const App = () => {
  
  // Put variables on top.
  const title = "Hello world";
  const subhead = "This is the subhead."
  
  return (
    // To render more than one div, you must wrap in a parent dev
    <div>
      <h1 className="styled_h1">{title}</h1>
      <p classname="styled_paragraph">I am rendering two elements to the page! {subhead}</p>
    </div>
  );
}

// ES5 (Old way, same output)
function App() {
  return <h1>Hello world</h1>
};

// ES6 Class
class App extends React.Component {
  render() {
    return <h1>Hello World</h1>
};