ReactJS fundamentals recap

Plain Javascript

reactJS

• Performance
• Complex UI Logic

    
    class ShoppingList extends React.Component {
    
      render() {
        return (
          <div className="shopping-list">
            <h1>Shopping List for {this.props.name}</h1>
            <ul>
              <li>Instagram</li>
              <li>WhatsApp</li>
              <li>Oculus</li>
            </ul>
          </div>
        );
      }
    
    }
    

    
    class ShoppingList extends React.Component {
    
      render() {
        return (
          <div className="shopping-list">
            <h1>Shopping List for {this.props.name}</h1>
            <ul>
              <li>Instagram</li>
              <li>WhatsApp</li>
              <li>Oculus</li>
            </ul>
          </div>
        );
      }
    
    }
    

Congrats, you just learned 30% of reactJS.

Example wireframe

BOX ALL THE THINGS!

LifeCycle Methods explained.

componentWillMount

Your component is going to appear on the screen very shortly. That chunky render function, with all its beautifully off-putting JSX, is about to be called. What do you want to do?

componentDidMount

Now we’re talking. Your component is out there, mounted and ready to be used. Now what?

componentWillReceiveProps

Our component was doing just fine, when all of a sudden a stream of new props arrive to mess things up.

componentWillUnmount

It’s almost over.

Your component is going to go away. Maybe forever. It’s very sad.

Who feels like they can build a ToDo app?