Adding mp3 files to a Create React App app

If you’re looking for the steps to include static files, like an mp3, to a create-react-app project — and use es6 import statements to use them in a component, here are the steps. This process will involve “ejecting” from create-react-app, so think about the implications of that before proceeding.

1) Eject from the create-react-app by running npm run eject. The create-react-app documentation describes the eject command

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

2) Include the files you want to use somewhere in the src folder. Probably with the component which will be consuming them.

3) We need to modify our dev and prod webpack configs to allow the files to be import-ed by through webpack and included in the build folder. Add an entry to the exclude list which will test for the file. The exclude list should look like this:

Add a loader to the list of loaders for the file type you want to use:

Do this for both the dev and prod webpack files in the config folder.

3) Within the component file, you can now import the file you with to use, specifying the relative path to the file

4) Then you can use the file within your component. For the example of a mp3 file, you can create a new Audio element in the constructor, and play or pause it using some event handler and function

 

Simple React Examples

I ❤️  react, and have spent a bit of time teaching react concepts to others through bootcamp trainings, and university courses.

Here are a few examples of concepts and code I’ve written for students that might be useful for you too:

Simple Composable Drawer Component

Illustrates simple props.children composition, as well as composition with stateful components.

  • Smart component
  • composition
  • children

TODO app

Stateful component composition with user generated data. Illustrates animating-out changes to state when todos are removed from state.

  • Smart components
  • component lifecycle
  • event binding

Search with debounced input

Search-preview of the Google Books api. Illustrates a very simple debounce implementation for network request performance.

  • fetch
  • composition
  • debounce
  • performance

Higher Order Components

Use a higher order component to generalize a common task of fetching and loading data into a component.

  • composition
  • fetch
  • promises

props.children composition

Very simple composition example.

  • containers
  • composition

 

Getting Started with Data Visualization in React

A primary goal of data visualization is to communicate information clearly and efficiently via statistical graphics, plots and information graphics. Numerical data may be encoded using dots, lines, or bars, to visually communicate a quantitative message.Effective visualization helps users analyze and reason about data and evidence. It makes complex data more accessible, understandable and usable.

-https://en.wikipedia.org/wiki/Data_visualization

TL;DR: Use data visualization too:

  1. Communicate information clearly
  2. Visual communicate a quantitative message
  3. Help users analyze and reason about data and evidence
  4. It makes complex data more usable

Good and Bad Examples

A pie chart that shows the 100 most active “tweeters” of a particular hashtag? Terrible visualization. Measuring it against our criteria, it doesn’t effectively communicate a message, or enable any type of reasoning about the data — other than to reason that 100 is far to many data points for a pie chart.

Almost never use a pie chart -everyones stats teacher

A tree chart with shows the worlds defense budgets? Great visualization. It is clear and understandable, and illustrates a message to the viewer.

A map of the 2012 Electoral College results by state? I believe this is an excellent visualization. It shows not only the states votes, but shows the weight each state has in the electoral college. It is accessible to the viewer.

A chart of the 100 most popular websites per month? At a quick glance, which is most popular? Is it the largest, or closest to the center? Which is the largest anyway? This is an ineffective visualization.

Technologies to visualize data on the web

There are three ways the data can be presented/visualized on the web

  1. Images: Visualization is designed in a tool like photoshop, illustrator, or tableu
  2. CSS: Css properties, such as width or height determine the shape and size of objects which can represent data points.
  3. Javascript: Using a javascript library that will create SVG or Canvas elements, and add interactive behavior to them

Javascript visualization libraries

There are many popular visualization and charting libraries. Three very popular and robust are:

D3

http://d3js.org

https://www.npmjs.com/package/react-vis

Vis

http://visjs.org/

https://www.npmjs.com/package/react-graph-vis

Highcharts

https://www.highcharts.com/

https://www.npmjs.com/package/react-highcharts

Building a data driven chart in React step-by-step

We’re going to use Facebook’s excellent Create-react-app starter kit, so first, let’s create a clean install of CRA:

Then install dependancies

Let’s use d3 with the React-vis wrapper. First install the react-vis package into our project

At this time, there is an unmet dependency problem with will prevent the app from compiling, so also install the peer dependency

Finally, run the project

Now the project is running, we can consume the react-vis package in our app. In the “App.js” file (the main component rendered by the app at this time), import the react-vis components and css.

We are now ready to use the components from the react-vis package in our App. Somewhere in your app insert a element:

We can now look at the page in our browser and see the chart rendered:

Creating an API for our chart to consume