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:

Let's examine the code you just wrote.

In the HTML, you're loading two libraries, React and ReactDOM. There actually used to be just one library, and the distinction between the two isn't actually completely obvious. You're welcome to read an explanation on StackOverflow, but it's totally fine if you skip it.

In the JS, you're doing a number of things:

  1. You're calling a function called React.createClass() and assigning its return value to a variable called Sketch. Here you're creating something called a React component, and it's the fundamental building block of React-powered programs. Components are nicely self-contained chunks of functionality that you can hook together to build awesome things.

  2. You're calling a function called ReactDOM.render() and passing a DOM node as its second argument. This basically "injects" your React program into the web page.

The Sketch component has only one method called render(), and it's actually a little bit like the draw() method of a p5 sketch, with a few notable exceptions:

  • It's not called 60 times per second. In fact, it's only called whenever the state of the component changes. State is just data which uniquely determines how the component should display itself--more on that later.

  • It generally doesn't call many functions itself, but rather returns a React Element which represents what the DOM controlled by React should look like.

Our render() function is calling React.createElement(), which is the primary mechanism through which React Elements are created. In our case, we're creating an <svg> element with width and height attributes; the single child of this element is an SVG <circle> element with cx, cy, r, stroke, and fill attributes. Its HTML representation looks like this:

<svg width="640" height="480">
  <circle cx="50" cy="50" r="40" stroke="black" fill="white" />
</svg>
Clone this wiki locally