Design & UX
Giannis Konstantinidis, Sep 13

Introducing Microsoft's Fluent Design System

Giannis introduces us to Microsoft's new design language — Fluent Design System — and explains how to implement its design concepts into Windows UWP apps.
JavaScript
Michael Wanyoike, Sep 12

Getting Started with React: A Beginner's Guide

Michael Wanyoike introduces the fundamentals of React, providing a step-by-step tutorial on how to create a simple message app.
JavaScript
Adam Roberts, Sep 12

How to Learn React: Everything You Need to Get Started

No matter where you are on your journey, the best React content you need is here - take a look and dive in!
JavaScript
Sophia Shoemaker, Sep 12

What's New in React 16?

In this post, we're going to learn how to create a music player using some of the new features in React 16.

In implementing this music player, we’re going to learn about some of the changes in React 16. There are quite a few changes, so we won't cover all of them, but we’ll cover the ones that are important and that you can implement today. The album art comes from an album by a band called the Glass Animals. Since we can't legally stream the "Glass Animals" soundtrack, we've picked some royalty-free music to play in its place so we can get the full effect of the music player.

See the Pen React DailyUI - 009 - Music Player by Jack Oliver (@jackoliver) on CodePen.

The complete source for this post is also available on GitHub here.

To start the app, download the code, cd into the project directory and type:

npm install
npm start

State in a React Application

All React applications include a property called state that determines how and what components (and any data associated with those components) should be displayed.

Our music player has a state property that contains two important pieces of information: one variable that specifies whether the player is playing music --- the playing boolean --- and one variable that tracks the state of the current track --- the currentTrackIndex variable.

this.state = {
  playing: false,
  currentTrackIndex: 0
};

What is State?

When we refer to a component's state, we mean a snapshot of the instance of the component on the page.

React's components can define their own state, which we'll use in this post. When we use state in a React component, the component is said to be stateful. A React component can define its own state using a state property for handling stateful components, such as our music player.

As the user clicks the play, pause, next, and previous buttons, and the tracks in the player, our component will update its current state.

Props vs State

For React applications, it's important to understand the distinction between props and state. Our music player has two state variables that determine the way our application is displayed at a given point in time. The App component is our main component that drives the display of our child components --- the Controls component and the TrackList component. In order for these two components to receive information about the state of our application, the App component will pass information down as props to the children components. These props can then be used in the child component to display their pieces of the application correctly. Another important thing to understand is that every time our App component updates, our Controls component and TrackList component will be updated as well, because they rely on information from the App component.

Controls

Our Controls component is the first child of our App component. The Controls component is given two props: onClick and playing. The onClick prop allows us to pass down our handleClick function we've defined in the App component to the Controls component. When the user clicks one of the buttons in our Controls component, the handleClick function will get called. The playing prop allows the Controls component to know what the current state of the player is so we can properly render the play icon or the pause icon.

Let's explore how we render our buttons and handle clicks in our Controls component.

In our Controls component we have three important buttons:

  1. The << (previous) button --- an arrow icon pointing to the left --- which selects the previous track in the list
  2. The play/pause button which plays and pauses the music
  3. The >> (next) button --- an arrow icon pointing to the right --- which selects the next track in the list.

When each of these buttons is clicked, we call the click handler function that we passed in from the App component. Each of the buttons in our music player application has an id which will aid us in determining how a particular click should be handled.

In the internals of the handleClick function, we use a switch statement that uses the id of the button that was clicked --- e.target.id to determine how to handle the action from the button. In the next section, we'll take a look at what happens in each case of the switch statement.

The play button

When the play button is clicked, we'll need to update a few parts of our application. We'll need to switch the play icon to the pause icon. We'll also need to update the currentTrackIndex if it’s currently set to 0. In order to change these two parts of our application, we'll call setState, a function available to every React component.

The setState function is available to all React components, and it's how we update the state of our music player. The first argument in the setState function can either be an object or a function. If we're not relying on the current state of an application to calculate the next state, using an object as the first argument is a perfectly fine approach and looks like this: this.setState({currentState:'newState'}). In our case, we're relying on the current state of the application to determine the next state of our application, so we'll want to use a function. The React documentation indicates why this is important:

React may batch multiple setState() calls into a single update for performance. Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

As React 16 turns on more of its features (including asynchronous rendering), this distinction will become more important to understand.

When the play button is clicked and we call setState, we pass in a function, because we're relying on the current value of the currentTrackIndex state variable. The first argument that's passed into the function is the previous state of our application, and the second argument is the current props. In our case, we just need the previous state of the application to determine the next state:

case "play":
  this.setState((state, props) => {
    let currentTrackIndex = state.currentTrackIndex;
    if (currentTrackIndex === 0) {
      currentTrackIndex = 1;
    }

Once we've set the currentTrackIndex properly based on the previous value of the currentTrackIndex, we then return an object of the values we want to update. In the case of the play button being clicked, we update our playing boolean to true and set the value of the currentTrackIndex:

return {
  playing: true,
  currentTrackIndex: currentTrackIndex
};

The second argument that's passed into the setState function is a callback function that's called after the setState function is completed. When the play button is clicked, and the state of our application is updated, we want to start playing the music. We pass in the this.playAudio function as the second argument to our setState function.

},this.playAudio);

When the playAudio button is called, we reference the audio tag and call the load and play functions available to us via the Web Audio API.

playAudio(){
  this.audioElement.load();
  this.audioElement.play();
}

ref to a DOM element

In order to reference the actual audio DOM element to play the audio, we'll need to use a special attribute available to all React components, the ref attribute. From the React documentation:

When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument.

In our situation, we add the ref attribute to our audio DOM element, and that allows us to play the audio for each track:

<audio ref={(audio)=>{this.audioElement = audio}} src={"/songs/"+this.state.currentTrackIndex+".mp3"}/>

The pause button

When the pause button is clicked, we call this.setState and set our playing boolean to false.

case "pause":
  this.setState({ playing: false },this.pauseAudio);
  break;

The second argument for our setState function call is our this.pauseAudio function, which references the audio element and calls the pause() function.

pauseAudio(){
  this.audioElement.pause();
}

The << (previous) button

When the << icon is clicked, the id of the previous button matches the "prev" case of the switch statement, so the code associated with the "prev" case is executed. In the "prev" case, we call this.setState() again with a function like we did for playing and pausing our application. This time, we use the previous value of currentTrackIndex to decrement the value and return an object to set currentTrackIndex to the new value.

case "prev":
  this.setState((state, props) => {
    let currentIndex = state.currentTrackIndex - 1;
    if (currentIndex <= 0) {
      return null;
    } else {
      return { playing:true,currentTrackIndex: currentIndex };
    }
  },this.playAudio);

Returning null from setState

One of the new changes in React 16 is that when we return null from a setState function, our application will not be re-rendered. Our track listing has 11 tracks available. If the user continues to click the << button, the currentTrackIndex will decrement until it gets to 0. Once it gets to 0, we no longer want to decrement the currentTrackIndex and we no longer need to re-render our application. We also do the same when our >> icon is clicked. If the currentTrackIndex is equal (or greater than) the number of tracks in our list (11), we return null from setState.

The >> (next) button

When the >> button is called, we have a similar functionality in place as the << button. Each time the user clicks >>, we increment the currentTrackIndex and we check that the currentTrackIndex is not greater than the length of the track list. If it is, we return null in our setState function call.

case "next":
  this.setState((state, props) => {
    let currentIndex = state.currentTrackIndex + 1;
    if (currentIndex > data.tracks.length) {
      return null;
    } else {
      return { playing:true,currentTrackIndex: currentIndex };
    }
  },this.playAudio);
  break;
14 COMMENTs
JavaScript
Jack Franklin, Sep 11

How to Organize a Large React Application and Make It Scale

Jack Franklin describes a set of tips and best practices for creating and organizing React applications in a scalable way.
2 COMMENTs
JavaScript
Azat Mardan, Sep 11

React Quickly: How to Work with Forms in React

An excerpt from Azat Mardan's "React Quickly" book, which explains how to work with forms in React and the concept of controlled components.
6 COMMENTs
JavaScript
Mark Brown, Sep 08

React for Angular Developers

Are you an Angular dev looking to get started with React? If so, then join Mark Brown for a guided tour of the differences and similarities between the two.
13 COMMENTs
JavaScript
Jack Franklin, Sep 08

Higher Order Components: A React Application Design Pattern

Jack Franklin takes a look at Higher Order Components, a design pattern that helps keep your React applications tidy, well structured and easy to maintain.
6 COMMENTs
JavaScript
Chris Laughlin, Sep 07

Styling in React: From External CSS to Styled Components

Chris Laughlin takes a look at some of the options for applying CSS styles to React components, and introduces the styled-components library.
4 COMMENTs
JavaScript
Eric Greene, Sep 07

Working with Data in React: Properties & State

Eric Greene of the Microsoft Developer Network teaches the fundamentals of working with data in React apps.
HTML & CSS
Nicole Saidy, Sep 07

Putting the "App" in Progressive Web Apps

Nicole Saidy offers an overview of Progressive Web Apps (PWAs), what they are, which problems they solve, and what makes them apps or app-like.
Web
Parth Misra, Sep 07

11 Productivity Tools to Help Web Developers Beat Deadlines

Parth Misra presents 11 productivity tools, explaining how they can help organize your day and increase your productivity.
1 COMMENT
JavaScript
Pavels Jelisejevs, Sep 06

Getting React Projects Ready Fast with Pre-configured Builds

Pavels Jelisejevs shows how to start new React projects quickly, easily, and with zero configuration using Facebook's official create-react-app starter kit.
Design & UX
Aja Frost, Sep 05

10 Unexpected Sources of Design Inspiration

Aja Frost lists the bold and beautiful sources of design inspiration that you probably don't know about. You'll definitely want to bookmark these secrets!
35 COMMENTs
JavaScript
Pavels Jelisejevs, Sep 05

React vs Angular: An In-depth Comparison

Should you pick Angular or React? Pavels Jelisjevs looks in detail at what both frameworks have to offer, and gives some practical advice on how to choose.
Web
Rova Rindrata, Sep 05

A Guide to Setting Up Let's Encrypt SSL on Shared Hosting

Rova Rindrata demonstrates the steps required to set up a free Let's Encrypt SSL certificate on a shared hosting account, using SSL for Free.
HTML & CSS
Giulio Mainardi, Sep 05

Building a Trello Layout with CSS Grid and Flexbox

Giulio Mainardi shows you how to build a Trello layout using CSS's new Grid Layout Module features and Flexbox, along with some Sass for efficiency.
3 COMMENTs
JavaScript
Maria Antonietta Perna, Sep 04

How to Tell if React is the Best Fit for Your Next Project

Maria Antonietta Perna discusses what makes React a great fit for building fast UIs and introduces the concept of the Virtual DOM and how React uses it.
PHP
Kirk Madera, Sep 04

Rapid Development of Zend Expressive Modules

Kirk Madera goes through the process of creating the R side of a blog module CRUD in this quick, 10-minute Zend Expressive tutorial, demonstrating its power
Web
Lucero del Alba, Sep 04

Why Developers Should Consider WordPress.com Hosting

Lucero del Alba looks at the pros and cons of WordPress.com hosting, explaining why it's a good option for web developers.
JavaScript
Yaphi Berhanu, Aug 31

Learning JavaScript: 9 Common Mistakes That Are Holding You Back

Many people try learning JavaScript and then give up. Yaphi Berhanu looks at 9 common mistakes and gives you tips to overcome them and master JavaScript!
HTML & CSS
Gajendar Singh, Aug 30

How to Create CSS Conic Gradients for Pie Charts and More

Gajendar Singh shows how to create conic gradients in CSS, a new standard championed by Lea Verou which lets you build pie charts and more without images.
9 COMMENTs
JavaScript
James Hibbard, Aug 30

6 jQuery Form Wizard Plugins

jQuery Form Wizard is a jQuery plugin for creating form wizard or form flow without refreshing your page or webpage. We have listed 6 of them in this post.
WordPress
Larry Alton, Aug 30

Debunking 3 Common WordPress Myths

Are you considering using WordPress, and have some worries about it based on things you've heard? Larry debunks some common WordPress myths in this post.