Leverage New Features of React 16

lesson_1.jsx

/*
    Leverage New Features of React 16
    Lesson 1: Error Handling using Error Boundaries in React 16
 */

import React, { Component } from 'react';
import sendToErrorReporting from './sendToErrorReporting';


// Reusable ErrorBoundary component
class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false
    };
  }
  // New life cycle in React 16
  componentDidCatch(error, info) {
    this.setState(state => ({
      ...state,
      hasError: true
    }))
    sendToErrorReporting(error, info);
  }
  render() {
    if (this.state.hasError) {
      // fallback UI
      return (<div>Sorry, something went wrong.</div>)
    }
    return this.props.children
  }
}

class Profile extends Component {
  constructor(props) {
    super(props);
    // [√] throw new Error('Oh no!')
  }

  componentDidMount() {
    // [√] throw new Error('Oh no!')
  }

  onClick = e => {
    e.preventDefault();
    // [x] throw new Error('Oh noooo!')
    this.setState(state => {
      // [√] throw new Error('oh no!')
      return { ...state }
    })
  }
  render() {
    return (
      <div onClick = {this.onClick}>
        Name: {user.name}
      </div>
    )
  }
};

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {name: 'Chris'}
    };
  }

  updateUser() {
    this.setState(state => ({
      ...state,
      user: null
    }))
  }
  render() {
    return (
      <div>
        <ErrorBoundary>
          <Profile user={this.state.user}/>
          <button onClicj={this.updateUser.bind(this)}>Update</button>
        </ErrorBoundary>
      </div>
    );
  }
}

lesson_2.jsx

/*
    Leverage New Features of React 16
    Lesson 2. Render Multiple Elements without a Wrapping Element in a Component in React 16
 */
import React, { Component } from 'react';
import {render} from 'react-dom';

const data = [
  [14, 25, 122, 182],
  [10, 122, 220, 310],
  [0, 19, 28, 50]
];

const RawCell = ({ cell }) => cell.map( (v, key) => <td key={key}>{v}</td>);
const RawRows = ({data}) => data.map((v, key) => <tr key={key}><RawCell cell={v}/></tr> )
const vSum = (r, a) => r.map((b, index) => a[index] + b); // array.reduce(vSum)

const SumRow = ({data}) => (<tr>{data.reduce(vSum).map((v, key) => <td key={key}>{v}</td>)}</tr>);

render(
  <table>
    <tbody>
      <RawRows data={data} />
      <SumRow data={data}/>
    </tbody>
  </table>,
  document.getElementById('root')
);

lesson_3.jsx

/*
    Leverage New Features of React 16
    Lesson 3: Text Only components
 */

import React, { Component } from 'react';

const Comment = ({text}) => {
  const emojifiedText = text
    .replace(':)', '😀')
    .replace(';)', '😉')
    .replace(':D', '😁')
    .replace('(:', '🙃')
    .replace(':(', '☹');
  // return <span> {emojifiedText} </span>; 
  return emojifiedText;
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Comment text="today we are sailing home :)" />
      </div>
    );
  }
}

export default App;

lesson_4.jsx

/*
    Leverage New Features of React 16
    Lesson 4: Render Elements Outside the current React tree using portals in React 16
 */

import React, { Component } from "react";
import ReactDOM from "react-dom";

class Overlay extends Component {
  constructor(props) {
    super(props);
    this.overlayContainer = document.createElement("div");
    document.body.appendChild(this.overlayContainer);
  }

  componentWillUnMount() {
    document.body.removeChild(this.overlayContainer)
  }
  render() {
    return ReactDOM.createPortal(
      <div className="overlay" style={{backgroundColor: 'gray', padding: '1em .5em'}}>
        <div className="btn" onClick={this.props.onClose}>x</div>
        {this.props.children}
      </div>,
      this.overlayContainer
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {overlayActive: true}
  }

  closeOverlay() {
    this.setState({overlayActive: !this.state.overlayActive})
  }
  render() {
    return (
      <div>
        <h1>Dashboard</h1>
        {this.state.overlayActive &&
          <Overlay onClose={this.closeOverlay.bind(this)}>
            <div style={{backgroundColor: 'white'}}>Welcome</div>
          </Overlay>
        }
      </div>
    );
  }
}

lesson_5.jsx

/*
    Leverage New Features of React 16
    Lesson 5: Define DOM Attributes
 */

import React, { Component } from "react";
import ReactDOM from "react-dom";

class Foo {
  toString() {
    return 'foo'
  }
}

const foo = new Foo();

class App extends Component {
  
  render() {
    return (
      <div my-attribute={foo}>
        hello
      </div>
    );
  }
}

lesson_6.jsx

/*
    Leverage New Features of React 16
    Lesson 6: setState with null
 */

import React, { Component } from "react";
import ReactDOM from "react-dom";

import City from './City';
import Btn from './Btn';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      city: 'vienna',
    }
  }
  selectCity(e) {
    e.preventDefault();
    const newCity = e.target.value;
    this.setState(state => {
      if(state.city === newCity) {
        // Calling setState with null no longer triggers an update
        return null
      }
      return {
        city: newCity
      }
    })
  }
  render() {
    return (
      <div>
        <button value='vienna' onClick={this.selectCity.bind(this)}>Vienna</button>
        <button value='paris' onClick={this.selectCity.bind(this)}>paris</button>
        <City name={this.state.city} />
      </div>
    );
  }
}