lecture7.mdx

import { Head, Appear, Image } from "mdx-deck"; import Logo from "./assets/images/logos/rdc-icon.svg"; export { default as theme } from "./theme"; import { CodeSurfer } from "mdx-deck-code-surfer"; import ultramin from "prism-react-renderer/themes/ultramin";

<title>React DeCal Lecture 7</title>

Welcome to Lecture 7

Today will be fun! Sit near people :)

---

Agenda

1. JS Tidbits
2. Props vs. State
3. Thinking in React

---

Announcements

• Grades and feedback will be out by the end of break!
• Project 1 Part 2 Released! Get started soon :)

---

JS Tidbit 1: Template Strings

let firstName = "Aivant";
let lastName = "Goyal";

// Method 1:
console.log("Hi my name is " + firstName + " " + lastName);

// Method 2:
console.log(`Hi my name is ${firstName} ${lastName}`);

---

JS Tidbit 2: Destructuring

const product = { name: "Apple", price: 2, limit: 10 };

// Normal Way:
let name = product.name;
let price = product.price;

// Destructuring:
let { name, price } = product;

---

JS Tidbit 2: Destructuring

// props = {name: "Orange", price: 0.5}
render() {
    let {name, price} = this.props
    return (<h1>{name} is ${price})
}

Super easy to get values out of an object!

---

JS Tidbit 2: Destructuring Arrays

const person = ["Aivant", "Goyal", 19];

// Normal Way:
let firstName = person[0];
let lastName = person[1];

// Destructuring:
let [firstName, lastName] = person;
let [, , age] = person;

Also works for arrays!

---

JS Tidbit 3: Mutability

let numbers = [1, 2, 3];
// What's the difference?
let result1 = numbers.push(4);
let result2 = numbers.concat(4);

---

JS Tidbit 3: Mutability

.push() modifies the existing array

.concat() returns a new array!

Why is this important?

---

State is Immutable!

// Constructor:
this.state = { goals: [] };

// Adding a Goal (BAD)
this.setState({ goals: this.state.goals.push("New Goal!") });

// Adding a Goal (OKAY)
this.setState({ goals: this.state.goals.concat("New Goal!") });

// Adding a Goal (GOOD)
this.setState(prevState => {
  goals: oldState.goals.concat("New Goal!");
});

---

JS Tidbit 4: Spreading

arr1 = [1, 2, 3];
arr2 = [...arr1]; // clones arr1
arr3 = [...arr1, 4, 5]; // creates new array [1, 2, 3, 4, 5]

obj1 = { a: "foo", b: "bar" };
obj2 = { ...obj1 }; // clones obj1
obj3 = { ...obj1, c: "world" }; // clones and adds keys to obj1

---

JS Tidbit 4: Spreading

let arr1 = ["Goal 1", "Goal 2"];

// Old:
let arr2 = arr1.concat("New Goal!");

// New:
let arr3 = [...arr1, "New Goal!"];

---

NO MORE CODE!

Let's Draw :)

---

Thinking in React

Get into groups and pull out some paper!

---

yellkey.com/star

---

Attendance

http://bit.ly/RDAttendance