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

// 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

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

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

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

import React from "react";

const FamilyContext = React.createContext({});

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

maecapozzi

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

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

  render() {
    return (

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

// Imagine your application code looks like this

const Button = styled.button`
  color: ${props => props.theme.main};
`

const theme = {
  main: 'mediumseagreen',
}

maecapozzi

// This file is pseudocode! Don't try to run this, it probably won't work :)
import React from "react";
import axios from "axios";
import Thumbnails from "./Thumbnails";

const Videos = ({ items }) => (
  <Thumbnails>
    {items.map(primeVideos => (
      <Thumbnail primeVides={primeVideos} />;
    ))}