React Review

Joel Ross
Winter 2025

View of the Day

React Review: questions?
- No planned agenda, what do you want to go over?
Firebase Hosting (demo)
Project work time!

Project Draft 2

What we are looking for: Refactored Draft 1 into a React App

Converted the HTML/CSS from draft 1 into a published React app. Began to add interactive functionality.

ALL of content rendered: You should have Components that render DOM for every part of your page
Has Components w/ props and data: Organize your Components! Can hard-code sample data for now
Uses routes to show all page content (today!)
Has 1 feature implemented: Includes event handling and state manipulation (today). Can be the small feature!
Fixes issues from draft 1: You're revising the HTML/CSS, fix problems while you're at it!
Published to Firebase hosting: get that working this draft
(see assignment for details; demo today!)

Anything we should review?

Hosting on Firebase

GitHub pages is not able to cleanly handle client-side routing, so we'll use Firebase to host your projects instead!

Firebase is a web backend solution; it provides multiple features which you can access without need to "code" them yourselves.

Web Hosting
Databases
User Authentication

next weeks

React Deployment to Firebase

Use a combination of Firebase command line tools and Vite scripts to build and deploy your React application to Firebase hosting!

See Project Draft 2 instructions on Canvas for details.

https://vite.dev/guide/static-deploy#google-firebase

Work on your app with all data being stored in the state (even if not persisted). If you have a clean state-based interactive structure, adding in the database will be straightforward.

Until we go over Firebase...

function App(props) {
  const [data, setData] = useState([]); //define the state
  
  //respond to events
  const handleClick = (event) => {
    setData(newData); //update state when event occurs
  }
  
  //render the state
  const dataElems = data.map((item) => {
    return <DataItem value={item} />
  })
  return (
    <div>{dataElems}</div>
  )
}

Action Items!

Complete task list for Week 8 (items 1-5 !!)
Problem Set 08 due Wednesday (it is small)
Project Draft 2 due SUNDAY!!

Next time: Working with Data: AJAX

React Review

Joel Ross Winter 2025