Build a ReactJS/Javascript MP3 Player with 7 Components

Build a ReactJS/Javascript MP3 Player with 7 Components, available at $19.99, has an average rating of 3.67, with 27 lectures, 1 quizzes, based on 9 reviews, and has 99 subscribers.

You will learn about 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 This course is ideal for individuals who are Developers who are interested in building an exciting ReactJS application or ReactJS developers looking to strengthen their skills with lifecycle methods or Javascript developers looking to create a ReactJS application from the ground up It is particularly useful for Developers who are interested in building an exciting ReactJS application or ReactJS developers looking to strengthen their skills with lifecycle methods or Javascript developers looking to create a ReactJS application from the ground up.

Enroll now: Build a ReactJS/Javascript MP3 Player with 7 Components

Summary

Title: Build a ReactJS/Javascript MP3 Player with 7 Components

Price: $19.99

Average Rating: 3.67

Number of Lectures: 27

Number of Quizzes: 1

Number of Published Lectures: 27

Number of Published Quizzes: 1

Number of Curriculum Items: 28

Number of Published Curriculum Objects: 28

Original Price: $69.99

Quality Status: approved

Status: Live

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

Who Should Attend

Developers who are interested in building an exciting ReactJS application
ReactJS developers looking to strengthen their skills with lifecycle methods
Javascript developers looking to create a ReactJS application from the ground up

Target Audiences

Developers who are interested in building an exciting ReactJS application
ReactJS developers looking to strengthen their skills with lifecycle methods
Javascript developers looking to create a ReactJS application from the ground up

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

Course Curriculum

Chapter 1: Introduction: Demoing Our Application and Setting Up Our Development Environment

Lecture 1: Introduction: Viewing the Finished ReactJS MP3 Player/Jukebox Application

Lecture 2: From the Instructor: Introduction To The 7 Components That We Will Be Building

Lecture 3: Starting our MP3 Player with NodeJS and our main ReactJS component <MP3Player />

Chapter 2: Building Our Main Parent Component: <MP3Player /> & Child Components

Lecture 1: Starting our MP3 Player Marquee

Lecture 2: Animating our Marquee with CSS Animations

Lecture 3: Populating our MP3 Data Using JSON and the ReactJS MAP Method

Lecture 4: Building our MP3 Button Component From Our JSON Object

Lecture 5: Styling Our MP3 Buttons with CSS3 and Further Organizing Our Code

Lecture 6: Connecting Our MP3 Button Component to the JSON Data With States and Props

Lecture 7: Building Our Audio Player Component

Lecture 8: Connecting Our MP3 Data To Our Audio Player Component With States and Props

Lecture 9: Building Our Next Component: The Animated Soundwave

Chapter 3: Building Our Custom Audio Player and All Of Its Buttons

Lecture 1: From the Instructor: Introduction To The Next 2 Components

Lecture 2: Building Our Custom Pause Button and Making It Stop The Player

Lecture 3: Building Our Custom Play Button

Lecture 4: Building Our Custom Mute Button (Part 1)

Lecture 5: Building Our Custom Mute Button (Part 2)

Lecture 6: Building Our Custom Volume Slider

Lecture 7: Programming our Custom Volume Slider to Control the Audio Player's Volume

Chapter 4: Cleaning Up Our Code and Fixing Minor Issues

Lecture 1: Making Our MP3 Player Responsive With CSS Media Queries

Lecture 2: Improving Performance With Lifecycle Method shouldComponentUpdate

Lecture 3: Fixing The Green Button After a MP3 Button Is Clicked

Lecture 4: From the Instructor: The Full Entire Application Including All React Files

Chapter 5: Enhancing Our MP3 Player and Making It Better By Adding More Features

Lecture 1: Loading a Random MP3 From The Beginning

Lecture 2: Creating Genre Buttons with ReactJS Routing Part 1

Lecture 3: Creating Genre Buttons with ReactJS Routing Part 2

Lecture 4: Creating Genre Buttons with ReactJS Routing Part 3

Instructors

Bruce Chamoff
Web Developer of 23 Years & the first Web Design Coach

Rating Distribution

1 stars: 2 votes
2 stars: 0 votes
3 stars: 1 votes
4 stars: 3 votes
5 stars: 3 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu