React gives us the power to create complex user interfaces that are easy to maintain and highly composable. What if we took things a little further than just rendering views? There’s more to React than meets the eye!

1. React Beyond Markup
There’s more to it than meets the eye
Peter Önneby - @poenneby

2. “learn once, write anywhere”

3. I React

4. I Music

5. Hihat
Snare
Kick

7. <Kick /> <Rest /> <Snare /><Rest /> <Kick /> <Kick /><Snare /><Rest />
<Hihat /><Hihat /><Hihat /><Hihat /><Hihat /><Hihat /><Hihat /><Hihat />
JSX

8. React + Music

9. React Beyond Markup
React Tunes
Compose music with React
render() {
return (
<div>
<Song tempo={100} notesPerQuarter={4}>
<Track>
<Bar>
<Kick />
<Rest />
<Rest />
<Rest />
<Clap />
...

10. React Beyond Markup
Web Audio API
The Sound API of your browser
const AudioContext = window.AudioContext ||
window.webkitAudioContext;
const audioCtx = new AudioContext();

11. React Beyond Markup
AudioNodes
AnalyserNode
AudioBufferSourceNode
AudioDestinationNode
BiquadFilterNode
ChannelMergerNode
ChannelSplitterNode
ConstantSourceNode
ConvolverNode
DelayNode
DynamicsCompressorNode
GainNode
MediaElementAudioSourceNode
MediaStreamAudioDestinationNode
MediaStreamAudioSourceNode
OscillatorNode
PannerNode
ScriptProcessorNode
StereoPannerNode
WaveShaperNode

12. React Beyond Markup
Oscillator
Think synthesizers
const oscillator = audioCtx.createOscillator();

13. React Beyond Markup
AudioBuffer
Load raw waveforms into a buffer
fetch(url)
.then(res => res.arrayBuffer())
.then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
.then(audioData => {
const bufferSource = audioContext.createBufferSource();
bufferSource.buffer = audioData;
bufferSource.connect(audioContext.destination);
bufferSource.start();
});

14. Audio Routing
Putting it all together
AudioBufferSourceNode
OscillatorNode
GainNode
AudioNode.connect()
BiquadFilterNode
AudioDestinationNode

15. Let’s make some music!