Instantly share code, notes, and snippets.

View suspenseDemo.js
// Import Suspense and lazy from React
import React, { Component, Suspense, lazy } from 'react'
import axios from 'axios'
import styled from 'styled-components'
import { Container, Row, Col } from 'react-grid-system'
import { SearchBar } from './components/SearchBar'
import { SearchInput } from './components/SearchInput'
// Dynamically import the file
View netflix-with-suspense.js
import React, { Suspense, lazy } from "react";
import axios from "axios";
// Thumbnails now lives in a different file (as it should)
// We dynamically import it when it's needed
const Videos = lazy(() => import("./Thumbnails"));
const Videos = ({ items }) => (
<Thumbnails>
{items.map(primeVideos => (
View Netflix.js
// 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} />;
))}
View passing-theme-as-prop.js
// Imagine your application code looks like this
const Button = styled.button`
color: ${props => props.theme.main};
`
const theme = {
main: 'mediumseagreen',
}
View FamilyConsumer.js
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>;
};
View Grandmother.js
import React from "react";
import { FamilyProvider, FamilyConsumer } from "./FamilyContext";
export class Grandmother extends React.Component {
state = {
lastName: "Sanchez"
};
render() {
return (
View FamilyContext.js
import React from "react";
const FamilyContext = React.createContext({});
export const FamilyProvider = FamilyContext.Provider;
export const FamilyConsumer = FamilyContext.Consumer;
View propDrillingStateChange.js
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 })
}
View passProps.js
// <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 () {
View propDrilling.js
const App = () => <Grandmother />
class Grandmother extends React.Component {
state = {
lastName: "Sanchez"
}
render() {
return <Mother lastName={this.state.lastName} />
}