Skip to content

Instantly share code, notes, and snippets.

View yi-mei-wang's full-sized avatar
👻
Inactive on GitHub

Yi Mei Wang yi-mei-wang

👻
Inactive on GitHub
9 followers · 7 following
View GitHub Profile
@yi-mei-wang
yi-mei-wang / react-recap.md
Created October 17, 2019 09:38
React recap

  1. Syntax of functions (declaration with function keyword vs arrow functions)

  2. Passing props to direct children (one level)

  3. Passing props down to grandchildren (multiple levels)

<NameOfComponent nameOfProp={name of value or function}/> > <Container handleClick={this.handleClick}/> > <Button handleClick={props.handleClick}/>

  1. Import components from another file import from "";
@yi-mei-wang
yi-mei-wang / jwt-img-upload.md
Created October 16, 2019 15:54
JWT and Image Upload Lecture
  1. Form validation
  • Disable buttons when the form inputs are empty
  • Show error feedback
  1. JWT in header
@yi-mei-wang
yi-mei-wang / axios-syntax.md
Created October 16, 2019 08:09
Syntax of an axios call (GET request)

Step 1:

Install axios npm install axios

Step 2:

Import axios import axios from 'axios'; ​

Step 3:

Use axios

@yi-mei-wang
yi-mei-wang / check-my-understanding-1.md
Created October 11, 2019 02:47
Check my React understanding - Day 1

Do I understand...

  1. What is state?

  2. What is setState() and what does it do?

  1. What happens when I call setState()?
  1. How do the values inside the state get rendered?
@yi-mei-wang
yi-mei-wang / react-intro.md
Last active October 10, 2019 01:38
Introduction to React.js

What is state?

The condition of the component at a particular time

  • Initial state is what the component should be like when the page is loaded for the first time

  • Modifying your state

    • this.setState()
  • render() gets called every time this.setState() is invoked
@yi-mei-wang
yi-mei-wang / ttt-js.md
Last active October 4, 2019 06:13
How to get started with tic-tac-toe, JS version

Some key functions to use when building the tic-tac-toe logic

Selecting elements

  • We select elements because we want certain parts of the web page to do some thing.
  • Once we select them, we can then perform some action on them, such as change the style, add child elements (such as using append())

Returns one element

  • document.getElementById()
@yi-mei-wang
yi-mei-wang / Tic tac toe.md
Created October 4, 2019 03:03
How to start building tic tac toe?

Ask important questions when you're just starting to build something

What HTML do I need?

  • 3x3 grid
    • div? button? table?
  • New game button
  • A header to announce the winner
  • A section to keep track of the current winner
@yi-mei-wang
yi-mei-wang / fizzbuzz.html
Last active October 1, 2019 12:59
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>FIZZ BUZZ WOOOOOF</title>
</head>
<body>
<button onclick="playGame()">PLAY GAME</button>
@yi-mei-wang
yi-mei-wang / README.md
Last active September 30, 2019 02:43
Responsive width and height

Responsive width and height

Using % as width and height values

  • Ensure that you know what you are using % relative to

  • % is usually relative to the parent

  • Let's see some code!

    <div class="image-wrapper">
@yi-mei-wang
yi-mei-wang / display-flex.md
Created September 26, 2019 08:35
Display flex notes

What is the flex box?

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.

https://stackoverflow.com/questions/37815450/flex-items-ignoring-width

Key points from today's lesson

  1. Apply display: flex; on the parent of the elements you are trying to arrange.
  2. justify-content and align-items allows you to move the elements left and right, up and down