maecapozzi

const Child = () => {
  // Family Consumer uses the 
  // Function as a Child pattern
  return <FamilyConsumer>
    // context is the object with lastName 
    // on it. It gets passed as an argument
    {context => <p>{context}</p>}
  </FamilyConsumer>;
};

maecapozzi

import React from "react";
import { FamilyProvider, FamilyConsumer } from "./FamilyContext";

export class Grandmother extends React.Component {
  state = {
    lastName: "Sanchez"
  };

  render() {
    return (

maecapozzi

import React from "react";

const FamilyContext = React.createContext({});

export const FamilyProvider = FamilyContext.Provider;
export const FamilyConsumer = FamilyContext.Consumer;

maecapozzi

class Grandmother extends React.Component {
  state = {
    lastName: 'Sanchez'
  }
  
  // When this function is called, the 
  // Grandmother's last name is updated
  immigrateTo = (country, newLastName) => {
    this.setState({ lastName: newLastName })
  }

maecapozzi

// <Mother /> is a container component that holds the 
// application's state.
// In this case, <Mother /> holds the family's lastName.

class Mother extends React.Component {
  state = {
    lastName: 'Sanchez'
  }

  render () {

maecapozzi

const App = () => <Grandmother />
      
class Grandmother extends React.Component {
  state = {
    lastName: "Sanchez"
  }
  
  render() {
    return <Mother lastName={this.state.lastName} />
  }

maecapozzi

// App.js 
import React, { Component } from 'react'
import Parent from './Parent'

import './App.css'

class App extends Component {
  handleClick () {
    throw new Error('This is an error')
  }

maecapozzi

1. Install create-react-app globally npm install -g create-react-app

2. Create a new application create-react-app <name-of-application>

3. Run server npm start inside of the applications directory.

maecapozzi

import React, { Component } from 'react'
import './App.css'

import axios from 'axios'

class App extends Component {
  constructor () {
    super()
    this.state = {
      username: ''

maecapozzi

const getUser = async (username) => {
  const uri = 'https://api.github.com/users/' + username
  const response = await fetch(uri)
  const parsedResponse = await response.json()
  console.log(parsedResponse)
}

getUser('maecapozzi')