See React Together

Leon Noel

#100Devs

"Bad-ass kids, we was racein with the streetlight "

Agenda

  • Questions? 

  • Let's Talk -  #100Devs

  • Review - Why React?

  • Review - components, props, & state

  • See - React Functions and Hooks

  • Homework -  Rewatch & Complete

Questions

About last class or life

Music & Light Warning - Next Slide

Checking In

Like and Retweet the Tweet

!checkin

Submitting Work

WAVE 001 - Closed

 

Tea Spill

FRIDAY
6:00pm EST

BACKEND REVIEW CLASS Part 3

SUNDAY Oct 9th
1:00pm EST

#HUNTOBER2022

 

FOR ALL

New Channels 

Starting Monday!

Standup 

6pm ET M-F

 

DS & Algo + #THEHUNT Checkin

Wave 001

Due Yesterday

Wave 002

Due Nov 1st

Private Channel

Starting Monday

 

Wave 001 -> House Turing

Certificate
Beautiful Letter

Email References
Exclusive Job Board

!checkin

every class

Networking

Alternatives?

Keep !sheet Updated Weekly

1 coffee chat / 3 connections every week

PUSH EVERY DAY

100Hours Project

Due Oct. 11th

React

Read The Docs

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).

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

Function vs. Class Components

 

Function components can now have state via hooks

React Todolist 

Just Add

You should have already watched Traversy Media React JS Crash Course

Questions

  • What is React.js
  • Why would you use React.js
  • What are components
  • What is JSX
  • What are props
  • What is state
  • What are the differences btw/ functional and class based components
  • Give an example of a functional and class based component
  • What are React Hooks
  • How does useState work
  • Give an example of useState

TEAM Work

Makes The DreamWork

Homework

Do: Rewatch

Do: Answer Questions on previous slide