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.
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
info340wi25-react-review
By Joel Ross
