For my final project using React I decided to make an arcade with a couple of activities. Since there would be quite a bit to go over if I wrote about the entire project, I’ll discuss the creation of one of the activities in the arcade, the keyboard.
I wanted to make a chime that would play when a user got into the room, kind of like a personal welcome song. To make the physical representation of the keyboard I made a keyboard container that would hold all of the individual “key” components. The container holds the state and all the logic/functionality of the keys. The keys themselves are just css representations of a piano key. They accept a function that keeps track of when they are pressed as a prop from the parent component, the keyboard container as well as prop that gives each key a note.
const Key = (props) => {let handleClick = () => {
props.keyPress(props.note)
}return (
<div onClick={handleClick} className={props.note}></div>
)
}export default Key
When a key is pressed on the app’s page, the ‘props.keyPress(props.note)’ function triggers the function in the parent component which allows a ‘switch’ to find the corresponding note and sound to play.
keyPress = (note) => { switch(note){ case "c": this.pressedInteger = 0 this.playNoteInteger(0) break; case "cSharp":
When a “C’ note is pressed, the pressedInteger variable keeps track of the note (to be used when recording) and then the note is played for the user to hear through the playNoteInteger() function. I used “Howl” to play the audio files (https://www.npmjs.com/package/react-howler), while the audio files themselves were supplied by my brother and his synth.
The record function allows a user to create a quick soundbite that will be played when entering the arcade. To keep track of the notes being played I decided to run an interval that pushes an integer representation of the note (c = 0, c# = 1 …) into an array when that note is clicked. The interval pushes in the number 24 ( a tribute to Kobe Bryant) at a 50 millisecond rate unless a note is pressed, which will result in the interval function pushing the integer representation into the loop array. When the interval has run it’s course it uses setState to keep that array of numbers as the local state.
From there the user can play back the recording by using the playback() function. This function loops back through the array at the same speed it was recorded and plays the corresponding notes when they are passed through. This allows a user to check they recording before they save it to the API.
To save the recording to our Rails API, I first turn the record loop into a string by using the stringedLoop() function.
stringedLoop = (stringloop) => {
let text = "";
stringloop.forEach(i => text = text +`${i} `)
return text
}This simply goes through each index of the array and adds it to a string followed by a space. Since I save the recording as a string I also need a way to turn it back into an array when fetching it from the API and redux store.
bringBackLoop = (loop) => {
let arr = loop.split(" ")
let arrInt = arr.map(i => parseInt(i))
arrInt.pop()
return arrInt
}This does the opposite of the stringedLoop() function and clips off the extra space I added when turning it into a string.
Now by using ‘connect’ to connect the keyboard container component to the redux store I can use the ‘submitThemeSong’ action that will go into the Rails API and update the user’s data. With redux thunk we are given the ability to run asynchronous functions, such as a fetch request. In the ‘submitThemeSong’ action I make a ‘PATCH’ request to go into my Rails API to update the user’s information i.e their theme song. The Rails Api then sends back a response, the user data. This then triggers a call to my ‘userReducer’ to set the user information. ‘SET_USER’ takes the information from the API and connects it to the Redux store. And there we have it, a user has recorded a song and successfully saved it not only to the Redux store, but also the database!
Now for the final task…we simply invoke a function to play the chime in the componentDidMount() function in the Arcade room component.
When I was first learning React I found myself quickly frustrated. It seemed like instead of writing things out with vanilla JavaScript I was now jumping through hoops to get things on the page and functional. Setting state vs changing variables had me scratching my head and the thought of having to pass relative information as props was a nightmare. The introduction of Redux compounded on my frustrations, but with a little practice everything cleared up quickly.
Contrary to my first impression, React is incredibly easy to get thing up and running quickly. So quick that I found myself getting things working without thinking too deeply about it and having to refactor quite a bit to get components matching up with each other too often. It definitely exposed a weakness I have, which is planning things out before diving in. React has definitely taught me to take a breathe and map things out a little before jumping in.
I feel like React was very fitting finale to the Flatiron course. I really appreciate that the curriculum gave us tools slowly, and really allowed us to get creative the further we got. React makes creating a user experience relatively easy, and really allowed me to use everything this course has given me all on one final and very fun to make project.
https://github.com/skabe89/arcade-client
