Skip to content

A React Tutorial for p5 Programmers

Jump to bottom
Atul Varma edited this page Apr 14, 2016 · 20 revisions

This is a React tutorial for people who are already familiar with p5.js. A basic conceptual familiarity with the Document Object Model is also highly recommended: if you're unfamiliar with it, consider reading p5's Beyond the canvas tutorial.

This tutorial is a riff on p5's Get Started tutorial, because it's both familiar and fun.

Your First (React) Sketch

Start out with the following HTML file:

<!DOCTYPE html>
<meta charset="utf-8">
<title>React Sketch</title>
<div id="sketch"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="react-sketch.js"></script>

And the following JS file:

// react-sketch.js

var Sketch = React.createClass({
  render: function() {
    return React.createElement('svg', {
      width: 640,
      height: 480
    }, React.createElement('circle', {
      cx: 50,
      cy: 50,
      r: 40,
      stroke: 'black',
      fill: 'white'
    }));
  }
});

ReactDOM.render(
  React.createElement(Sketch),
  document.getElementById('sketch')
);

Loading this page should give you a stationary circle:

Clone this wiki locally