Learning About React the Wrong Way
For the last few months, I’ve been tinkering with using React, to work on various project ideas that I have. React is a framework that is backed by Facebook, and is something that they use to run many features of their websites and sub-websites such as Instagram.
My latest project involved using React and Sass to create an online music player built upon SoundCloud’s API. You can also view the repo for the project here.
The first most important thing that I learned while working on this project is that life becomes a whole lot easier if you split up the project into different components and containers. By splitting a project up into various components, it becomes easier to manage your project and keep track of all the changes. Changing a piece of code in one component should not break how a different component functions.
I also learned that React isn’t fully capable of making ajax requests on its own and that you’ll need a package for that. I had to install fetch so that I could make calls to SoundCloud’s API in the application. React is mostly a Model-View framework, not a controller, compared to Angular which is a Model-View-Controller.
At this point, I realize that a lot of the features I wanted to implement into this project were going to have to be done in clever ways. For instance, in order to play music, I had to use an HTML5 built-in audio player. However, this limited the way that the audio player behaved. When a user clicks on a track to listen to, it could play simultaneously with another track an unlimited amount of times. I solved this problem by first preventing the pre-loading of any track, which meant that tracks only loaded when a user actually wanted to listen to it. Afterward, I wrote a function that only allowed the user to play one audio element at a time.
Besides my Rick Owens project, working on this SoundCloud application has been one of my favorite projects to date. The focus of this project is to create a different version of SoundCloud’s current desktop site that provides a better user experience. To handle this project I’ve decided to use React library, which is something that I am currently learning. I’ve always been interested in using React and thought that this was the perfect project to put my skills to the test.
While working on this project I learned so many new things about React and ES6 that is not often included in tutorials or lessons. Whenever I made progress on one feature it was because I took the time to understand what I was trying to create, and what would be the best way for me to implement it. I learned how React manages various states, and I also learn how to make different components communicate with each other through props. I plan to continue to work on this project and learn a lot more.
This project is still in development because I have so many features planned for it. However, the core functionality of the website is working. A user is capable of searching and playing different kinds of music. But I do not plan on stopping there because my goal is to turn this into a full-fledged application that hundreds of people can use. I am also working on splitting the app up into different components and containers so that it does not become one big spaghetti code.
