ayse8888

Bash Commands

Making a directory

mkdir <directory-name>

Example

mkdir hello-world

ayse8888

/* Functional component based on hooks that toggles image when button clicked */ 
const ToggleDivImage = () => {

  /* Setup component state that tracks visibility of the image. Initially, we'll set
  the image to visible (toggled true) */
  const [toggled, setToggled] = React.useState(true);

  /* Define a function that toggles the visibility of the image */
  const toggleImage = () => setToggled(!toggled);

ayse8888

Learning Objectives

The objective of this discussion is to expose you to some of the popular frameworks that are built on top of JavaScript or React. The goal is not for you to know how to use these, but simply understand what their intended usage is in case you want to use it at some point in time.

For each of these, I want you to answer the following questions for the class:

1. Why does this exist? Why did people spend hundreds of hours of their time to build this?
2. For what types of projects would you use this for?

Questions

1. Gatsby
2. Storybook

ayse8888

import {useCallback, useEffect, useState} from 'react';

export const useStateStorage = <TType extends any>(
    key: string,
    defaultValue: TType
) => {
    const [value, setState] = useState(defaultValue);

    useEffect(() => {
        const store = localStorage.getItem(key);

ayse8888

import {useEffect, useState} from 'react';

export const useDocVisible = () => {
    const isVisible = () => document.visibilityState === 'visible';
    const [visible, setVisible] = useState(isVisible());
    useEffect(() => {
        const onVisible = () => setVisible(isVisible());
        document.addEventListener('visibilitychange', onVisible);
        return () =>
            document.removeEventListener('visibilitychange', onVisible);

ayse8888

// # < 1200 #
@media (max-width: 1199px) {

}
// # < 992 #
@media (max-width: 991px) {

}
// # < 768 #
@media (max-width: 767px) {