React Practice

I’ve worked on a few React projects in the past and used the library when integrating with the new Gutenberg editor for WordPress, but I wanted to brush up on some fundamentals and best practices. I build out a few demo concepts and went through some online courses, which produced the below results.

Catch of the Day

Catch of the Day app

This app allows a user to select items from a menu which will be added to their ‘order’. Items maintain an inventory and price, and the order total is calculated from that price. The item inventory can be managed by the store owner, with authentication via GitHub or Twitter utilizing Firebase. the inventory is persisted in Firebase, and the current user order is stored in LocalStorage.

This app is based off of the React for beginners course by Wes Bos.

RSVP App

RSVP app front-end

This is the front end of a theoretical RSVP application. There is no data persistence or actual inviting of guests, though that could be added. There’s nothing particularly fancy going on here. This was simply a practice of going from a design to components and functionality, building out each component, and then refactoring.

View Live | GitHub

Scoreboard

React-based scoreboard app
Scoreboard app

A simple front-end scoreboard app (with no data persistence). I used the React Context API here just for fun, though it was not entirely necessary. The Context API can make component reuse more difficult, but in this case I wasn’t particularly concerned with reuse and wanted more to see how much I could clean things up by keeping app state and global handlers in context instead of passing down through props.

View Live | GitHub