Instantly share code, notes, and snippets.

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} />
}
View PassingProps.js
// 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')
}
View create-react-app.md
  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.

View HTTPRequestsInReact.js
import React, { Component } from 'react'
import './App.css'
import axios from 'axios'
class App extends Component {
constructor () {
super()
this.state = {
username: ''