LCP React Lunch and Learn

lcpreact.md

• What is react?

• Why is it nifty?

• Hello World

lesson-01-hello-world.js

// First, we'll render a <div> into the document body

ReactDOM.render(
  <div>Hello I am React.</div>, 
  document.getElementById('example')
);

// Whoa, you put HTML into my JavaScript? Whaaaaaat?
// Fine, we can use plain old JS too.

ReactDOM.render(
  React.DOM.div(
    {},
    'Hello I am also React.'
  ), 
  document.getElementById('example')
);

lesson-02-first-component.js

/*
  Let's create an actual component now.
  A component can be thought of as a function that takes in
  props and state, and returns a UI. We'll be returning HTML
  using ReactDOM, but you could also be returning the UI for 
  an iOS or Android app using React Native, or to a <canvas>
  using react-canvas.
*/

var HelloWorld = React.createClass({
  render: function () {
    return (
      <p>Hello I am react</p>
    );
  }
});

ReactDOM.render(<HelloWorld />, document.getElementById('example'));

// ES6 Classes:
// class HelloWorld extends React.Component {
//   render() {
//     return (
//       <p>Hello I am react</p>
//     );
//   }
}

lesson-03-props.js

/*
  So far we've just made a pretty dumb component. 
  All it can do is render out some static text.
  Let's fix that.
  
  Let's make a <HelloClock>.
*/

var HelloClock = React.createClass({
  render() {
    return (
      <div>
        <p>Hello there. The current time is: ????</p>
      </div>
    );
  }
});

ReactDOM.render(<HelloClock />, document.getElementById('example'));

lesson-04

asdfasdfasdf