Why React?

Leon Noel

#100Devs

I wanna make my mum so proud
Like, "Yo, Mum, book a flight, go now"

Agenda

  • Questions? 

  • Let's Talk -  #100Devs

  • Let's Talk - Mental Health Action Day

  • Learn - What is react?

  • Learn - What are components

  • Learn - What are props and state

  • Do - Take Action 

  • Homework - React / Interview Prep

Questions

About last class or life

Stream & Blog

Team Meeting

FRIDAY
6:30pm EST

BACKEND REVIEW CLASS

SUNDAY
1:00pm EST

BIPOC & In Boston, Philly, or Pittsburg? 

Resilient Coders Recruitment Hackathon This Saturday: https://bit.ly/join-rc

This & Next Week - React!

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

June Will Be 1 on 1s

I'm going to help with your:

Resume

Portfolio

Job Outreach

Interview Practice / Skills

I Will Be Your Reference

And more...

 

Special Discord Channels for Interview Feedback and Faster Help

!checkin

every class

Homework

Please submit your work here:

 

https://forms.gle/usiNBEkn6mAZS9Zx7

Checklist (items should be updated)

 

https://forms.gle/Y8T57oJNWLSEQjQc8
(Team Project, Hitlist / Networking, Methods work, and Codewars)

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

(June 1st)

 100 Hours Project
Beautiful MVP

 Due Tuesday

(June 1st)

Thank You

Mental Health Action Day

Music & Light Warning - Next Slide

Congrats Ahperi!

11 / 100

Offer to transfer

from customer support to engineering

!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 {name, team} = {"Bob", "100Devs"};

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!

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

Example 1

Example 2

Example 3

Mental Health Action Day

Homework

Do: FINISH

#100Devs - Why Use React?

By Leon Noel

#100Devs - Why Use React?

Class 46 of our Free Web Dev Bootcamp for folx affected by the pandemic. Join live T/Th 6:30pm ET leonnoel.com/twitch and ask questions here: leonnoel.com/discord

  • 748

More from Leon Noel