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

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

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

Function vs. Class Components

 

Function components can now have state via hooks

Baddie React Code

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

https://live.remo.co/e/100devs-project-night-room-01 https://live.remo.co/e/100devs-project-night-room-02

Homework

Do: Rewatch

Do: Answer Questions on previous slide