Why React?

Leon Noel

#100Devs

"Tell me why are we so blind to see
That the ones we hurt are you and me?"

Agenda

  • Questions? 

  • Let's Talk -  #100Devs

  • Learn - What is react?

  • Learn - What are components

  • Learn - What are props and state

  • Do - Learn React

  • Homework - React / Interview Prep

Questions

About last class or life

Checking In

Like and Retweet the Tweet

!checkin

BACKEND SUPER REVIEW 

SUNDAY
1:00pm EST

This & Next Week - React!

Watch  - https://www.youtube.com/watch?v=w7ejDZ8SWv8
Do - https://egghead.io/courses/the-beginner-s-guide-to-react

HUNTOBER

IS UPON US

(almost...)

!checkin

every class

Homework

DUE TUESDAY

Networking

Alternatives?

Keep !sheet Updated Weekly

1 coffee chat / 3 connections every week

PUSH EVERY DAY

This Week

 

Please research the following string methods:

 

 

 

 

 

 

 


Give a short description of what the method does, how it works, it's time complexity (if appropriate), and give three examples of it in action!

 

 

 

charAt
charCodeAt
concat
includes
indexOf
match
repeat
replace


search
slice
split
substr
toLowerCase
toUpperCase
trim

 Client Signature
Approved PR

 Due Tuesday

 

 100 Hours Project
Beautiful MVP

 Due Tuesday

 

Thank You

!newsletter

React

Read The Docs

https://reactjs.org/docs/getting-started.html

ES6+

Review

Classes

class MakeCar{
  constructor(carMake,carModel,carColor,numOfDoors){
    this.make = carMake
    this.model = carModel
    this.color = carColor
    this.doors = numOfDoors
  }
  honk(){
    alert('BEEP BEEP FUCKER')
  }
  lock(){
    alert(`Locked ${this.doors} doors!`)
  }
}

let hondaCivic = new MakeCar('Honda','Civic','Silver', 4)

let teslaRoadster = new MakeCar('Tesla','Roadster', 'Red', 2)

Classes are like templates for objects!

const foo = ['a', 'b', 'c'] 
const bar = ['d', 'e', 'f']

console.log(...foo) 
console.log([...foo, ...bar])

"a" "b" "c"
["a", "b", "c", "d", "e", "f"]

Array Spread

const defaultStyle = { 
  color: 'black', 
  fontSize: 12, 
  fontWeight: 'normal'
}

const style = {
  ...defaultStyle, 
  fontWeight: 'bold', 
  backgroundColor: 'white'
} 

console.log(style)

Object {
  color: "black", fontSize: 12,
  fontWeight: "bold", backgroundColor: "white"
}

Object Spread

let [name, team] = ["Bob", "100Devs"]

console.log(name)//"Bob"
console.log(team)//"100Devs"

Array Destructuring

https://www.freecodecamp.org/news/array-and-object-destructuring-in-javascript/

let mascot = {name: "Bob", team: "100Devs"}

let {name, team} = mascot

console.log(name)//"Bob"
console.log(team)//"100Devs"

Object Destructuring

https://www.freecodecamp.org/news/array-and-object-destructuring-in-javascript/

🚨 WARNING 🚨

React

React is a library for handling your UI.
It allows you to write components which you can re-use and

extend when needed. It does not handle anything else!

🚨 WARNING 🚨

React APIs

"react" contains the APIs for creating components

 

"react-dom" contains the APIs for rendering to the browser DOM

JSX

React components are functions which return JSX

 

A syntax extension to JS!
JSX is a shortcut for using the React.createElement() API, that is
much more concise, easy to read, and visually looks a little like the generated UI (as both are tree-like).

https://www.react.express

this.props

Component API

Props are arguments passed into React Components

 

Components can be configured upon instantiation by

passing properties to the constructor

- these properties are called props. 

this.state

Component API

React components have a built-in state object

 

This is where you store stuff related to the component

 

When the state object changes, the component

REACTS and re-renders!

 

Virtual DOM

🚨 WARNING 🚨

Example 1

Comes From The Reading

Example 2

Comes From The Reading

Example 3

Comes From The Reading

Mental Health Action Day

Homework

Do: FINISH