gisderdube

// 3rd party packages
import React from 'react'
import styled from 'styled-components'

// Stores
import Store from '~/Store

// reusable components
import Button from '~/components/Button'

gisderdube

const StudentSchema = new Schema({
    teacher: {
        type: Schema.Types.ObjectId,
        ref: 'Teacher',
        required: true,
    },
    name: String,
    ...
})

gisderdube

function logCountry({
    name = 'United States', 
    code, 
    language = 'English', 
    currency = 'USD', 
    population = '327 Million', 
    continent,
}) {
    let msg = `The official language of ${name} `
    if(code) msg += `(${code}) `

gisderdube

function logCountry({name, code, language, currency, population, continent}) {
    let msg = `The official language of ${name} `
    if(code) msg += `(${code}) `
    msg += `is ${language}. ${population} inhabitants pay in ${currency}.`
    if(contintent) msg += ` The country is located in ${continent}`
}

logCountry({
    name: 'Germany',
    code: 'DE',

gisderdube

// GOOD
function displayUser(firstName, lastName, age) {
    console.log(`This is ${firstName} ${lastName}. She is ${age} years old.`)
}

// BAD
function displayUser(user) {
    console.log(`This is ${user.firstName} ${user.lastName}. She is ${user.age} years old.`)
}

gisderdube

function add(a, b) {
    return a + b   
}

function subtract(a, b) {
    return a - b   
}

module.exports = {
    add,

gisderdube

// NOT REAL
// Context.js
export const CountContext = React.createContext(0)

// Counter.js
import { CountContext } from './Count'

function Counter() {
    const [count, setCount] = useContext(CountContext)

gisderdube

import React, { useContext } from 'react'

import Counter from './Counter'
import { ColorContext, ColorContextProvider } from './ColorContext'

function Application() {
    return (
        <ColorContextProvider>
            <Workspace />
        </ColorContextProvider>

gisderdube

import React, { useEffect, useState } from 'react'

function Counter() {
    const [count, setCount] = useState(0)

    function scrollListener() {
        setCount(window.pageYOffset)
    }
    useEffect(() => {
        document.addEventListener('scroll', scrollListener)

gisderdube

import React, { useEffect, useState, useRef } from 'react'

function useInterval(callback, delay) {
    const savedCallback = useRef()

    useEffect(() => {
        savedCallback.current = callback
    })

    useEffect(() => {