Reactris, part I : Getting Started

I’m trying to learn how React.js works.  I have a website project that I want to apply it to, but that’s already wrapped up with too many other different technologies and I want to understand how React works better before trying to fit it in to a larger project.

So I thought I would tackle something simpler with React, but something that’s a little outside of the box, something that would hopefully be interesting and require some thought rather than just verbatim copying of existing samples.

I thought I would try to make a Tetris clone using React.

Getting the samples set up

First things first, I needed to be able to run the react.js samples.

I went to their getting started page (http://facebook.github.io/react/docs/getting-started.html) and downloaded the starter package (Version 0.12.1 is what is up on their site at the time of this writing)

I found that the simpler of these samples worked by browsing directly to the file, but the ones which have a separate .js and .html file do not work.  You’ll see something like this in the chrome dev tools console:

XMLHttpRequest cannot load file:///Users/mike/Downloads/react-0.12.1%202/examples/basic-jsx-external/example.js. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. VM166 JSXTransformer.js:219load

Fortunately, the React developers added a helpful message to the page:

If you can see this, React is not working right. This is probably because you’re viewing this on your file system instead of a web server. Try running

python -m SimpleHTTPServer

It’s worth noting that you should do this inside the ‘examples’ directory of their samples package (as opposed to running it inside a subdirectory for  a specific sample).   The samples reference a ‘shared’ folder which contains css and other resources which are shared between different samples.

I also found, somewhat annoyingly, that most of the samples get error 404’s when they request some .map files like es5-shim.map, which it is looking for under the shared/thirdparty directory but is not present.  Failure to find these doesn’t prevent the samples from working though.

 Choosing a sample to extend

For the purpose of this example, I thought it would be cleanest to use JSX and use the ‘external’ sample (with the .js in a separate file rather than embedded in the HTML).

In case you haven’t read up on JSX yet, the basic idea is that it’s an HTML-like syntax that’s embedded in the javascript code in lieu of using either (A) An HTML templating engine or (B) a more javascripty API for manipulating the DOM.

To that end, I made a copy of the ‘basic-jsx-external’ sample directory and started to modify the javascript in the copied directory.

Setting up an SVG Canvas inside of the React sample

I wanted to use SVG as my rendering technology for displaying my tetris game.  I haven’t seen an React sample code using SVG but since SVG is just another HTML-like syntax, and part of the DOM, I saw no reason why this should not work.

I’m not an expert on SVG either, so Baby steps… first thing is how do we draw a rectangle.  Here are the docs for the ‘rect’ SVG element from Mozilla:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect

inside of there I found this nice little snippet

<?xml version="1.0"?>
<svg width="120" height="120"
     viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="100" height="100"/>
</svg>

Fortunately this translates over into JSX without any trouble, so I simply modified the return value of the ExampleApplication from the basic-jsx-external sample:

var ExampleApplication = React.createClass({
  render: function() {

  return <svg width="120" height="120"
       viewBox="0 0 120 120"
       xmlns="http://www.w3.org/2000/svg">

    <rect x="10" y="10" width="100" height="100"/>
  </svg>
  }
});

and there we have it, our sample now has on SVG canvas with a rectangle on it.

Data driven Rectangle

so far this is not very interesting, I’ve just gotten React to spit out some static HTML.

Lets take the next step and put the svg canvas dimensions and the rectangle dimensions into local variables, so that the HTML is data driven

var ExampleApplication = React.createClass({
  render: function() {

  var svgWidth = 300
  var svgHeight = 300

  var x=10
  var y=10
  var width=100
  var height=50

  return <svg width={svgWidth} height={svgHeight}
       viewBox="0 0 {svgWidth} {svgHeight}"
       xmlns="http://www.w3.org/2000/svg">

    <rect x={x} y={y} width={width} height={height}/>
  </svg>
  }
});

 

While I was at it, I shuffled around the HTML a bit from the sample, got rid of some of the extra stuff in there and added some styles for the SVG and Rect elements to make them stand out a bit more from the page:

  <style>

    svg
    {
        background-color: #EEEEEE;
    }

    rect
    {
        fill : gray;
        border: 1px;
        stroke: black;
    }

  </style>

Here’s what it looks like after that:

hey, it’s starting to look like something. Time to take a rest.

In the next posting, I’ll start hooking this in to React in a more interesting way. It seems to be the ethos of React to break everything up into separate components with their own createClass and render functions, so my plan next time is to make the rectangle a component, so that it’s easy to instantiate and control a bunch of individual rectangles.

Follow this link to the Part II of this blog.