Build a ReactJS/Javascript MP3 Player with 7 Components
Take your ReactJS Skills To the Next Level By Programming a Fun Application From the Ground Up
3.67 (9 reviews)
99
students
5.5 hours
content
May 2018
last update
$19.99
regular price
What you will learn
Build a complete ReactJS application from the ground up
Have a better understanding of ReactJS lifecycle methods
How to run a ReactJS application using the NodeJS package called create-react-app
How to map a JSON feed into a ReactJS state
Build ReactJS apps using the ES6 standard
Access and manipulate the HTML5 range control
CSS3 Animations
Get More Practice Passing Data Between Props, States, Refs, and custom methods
When to use dangerouslySetInnerHTML
Learn the all-powerful but confusing lifecycle methods including shouldComponentUpdate, componentWillMount, componentWillReceiveProps and more
ReactJS Routing
Why take this course?
Developers who are familiar with Javascript and basic ReactJS will get more practice by building 7 components and various lifecycle methods can now build a fun application which plays MP3s from a simple JSON object.
In this course, we start with the ES6 NodeJS package called Create-React-App and then we build our player with it.
With our app we will add all of the following features:
- main player component
- MP3 buttons
- custom play button
- custom pause button
- custom mute button
- custom volume slider control
- animated title marquee
- genre buttons to filter MP3 buttons by specific genres including (rock, hip hop, country, and more)
- select and play a random MP3 when the player is first started
In this course, you will learn the following:
- how to build ReactJS components using ES6 syntax
- how to set states the ES6 way
- how to pass states as props from parent components into child components
- how to get more comfortable with the lifecycle methods render, shouldComponentUpdate, componentWillMount, componentDidMount, componentWillReceiveProps
- how to access methods and properties of the HTML5 audio tag
- how to style with CSS3 animations
- how to use the ReactJS map function to cycle through JSON object nodes
- how to properly bind component methods inside the instructor
- how to create ReactJS references known simply as "refs"
- how to use the dangerouslySetInnerHTML attribute and when it is appropriate to use it
- build a HTML5 range control for our volume slider
- how to create routes and bind them to paths using the BrowserRouter NPM package
Screenshots
Reviews
Tommy
August 17, 2021
script is old and Bruce has not answered any questions. I spent 5 to 10 hours looking for deprecated code updates and still can not get this working. I'm now getting an error with the last character ';' trying to close the script. ReactDOM.render(
<AudioPlayer title='Music Player'/>,
document.getElementById('root'),
);
can not move forward at this point until I find the fix. 3 days trying to fix this error and I've given up. Sure wish Bruce would respond to my questions, maybe he got Covid19 and died I don't know.
Lea
October 10, 2019
This course was just what I needed! I built the component I needed, and learn more about react along the way. Everything was super easy to follow, and straightforward. Thanks for the hard work!
Glenn
October 19, 2018
Enjoying the learning process. Instructions are concise, and looking forward to completing the finished product. Thank you, Bruce.
Charts
Price
Rating
Enrollment distribution
Related Topics
1678614
udemy ID
5/6/2018
course created date
11/22/2019
course indexed date
Bot
course submited by