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!
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
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
let mascot = {name: "Bob", team: "100Devs"}
let {name, team} = mascot
console.log(name)//"Bob"
console.log(team)//"100Devs"
Object Destructuring
🚨 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).
this.props
Component API
Props are arguments passed into React Components
Components can be configured upon instantiation by
passing properties to the constructor
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 🚨
Comes From The Reading
Comes From The Reading
Comes From The Reading
Mental Health Action Day
Homework
Do: FINISH
#100Devs - Why Use React? (cohort 2)
By Leon Noel
#100Devs - Why Use React? (cohort 2)
Class 58 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
- 1,392