Featured image - Crossword puzzle

Creating a Crossword Puzzle game with React.JS – Part 1

In this tutorial, I will show you how to create a crossword puzzle app, using React.js.

React is a high-performance, open-source, reactive Javascript UI library for client-side web applications. At first, you may find working with React confusing, but I will try to make this tutorial as simple as possible by taking it step by step.

For a beginner intro to React.JS, you may go over Kristen Dyrr’s React tutorial here.

Don't miss out! Offer ends in
  • Access all 200+ courses
  • New courses added monthly
  • Cancel anytime
  • Certificates of completion

Download the source code

You can download all the files associated with this tutorial here

Tutorial requirements

  • A good understanding of HTML, CSS and most importantly JavaScript.
  • Download the React library or you can use the CDN.
  • A text editor, Notepad++ or Sublime.

Intro to JSFiddle

Before we start, this tutorial will be a two-phase tutorial. In the first phase, we will test the components we are to use in this crossword puzzle app using jsfiddle. The second phase, we will be progressively developing our crossword puzzle app.

JSFiddle allows us to test our code right inside the browser. Start by going to facebook.github.io/react/ and click on the “Get Started” link, then click on “React JSFiddle” link there. This will take you to the Hello World example done with React (https://jsfiddle.net/reactjs/69z2wepo/).

Looking at this simple Hello World example, you will notice two major pieces of the React library. The first being the React.createClass function that is used to define components. The component being defined here, is “Hello World” and is assigned a variable called Hello. To define the Hello World component, we provide a function called render, and within this render function we return something that looks like HTML code with some kind of variable interpolation.

Further down, we see a call to another React function, ReactDOM.render, and within this call, there is also HTML looking snippet with an element name that refers to the component that is defined in the above React.createClass function, along with an attribute that matches the interpolation within the render function.

The second argument of the ReactDOM.render function, document.body, tells React where to render the Hello component.

Downloading React

Back on the React website, this time click on “Download React version number”, then the “Download Starter Kit” link. This download link includes the React and some simple example apps. The current version I am using is React 0.14.5.

In your text editor, we will create a skeleton of our Crossword Puzzle game, by starting with an empty HTML page with some boilerplate. We also reference the React script, the first one is the React library itself, including the ReactDOM and the second is the Babel CDN. You will notice there is a div with an id of game, this is to be the container for our application. We also add the Bootstrap CDN. Should you wish to download Bootstrap for yourself, have a look at my tutorial on Bootstrap (https://html5hive.org/create-a-fully-functional-mobile-website-with-bootstrap/)

We have just added the non-interactive part of the game.

Within the game div, we will define our very first React application. We’ll start with a new ScriptBlock, with the type of text/babel named puzzle.js. This is where all our React code for the crossword puzzle will reside.

Crossword screenshot 1
Crossword screenshot 1

Why Babel? Babel replaced JSX Transformer with the release of React 0.14.0. As the JavaScript language evolved, the React creators believed that it was time to deprecate JSX and start implementing the new features of Babel. So, what is Babel? It is a next generation JavaScript compiler.

Defining Components

The top-level namespace for React is React with the uppercase R. New components are defined by calling the createClass function. createClass function has one argument, which is an object, and defines the new components and the minimum requirement for that object is to define a render function. Within that render function, we return a single React component. Here, we return some HTML, this is the JSX. In this case, we returning a div with some text. Currently this div is where we will fill it with more content. To transform this JSX to JavaScript, we use the Babel compiler to transform the HTML syntax into plain JavaScript.

Rendering Components

The above is the definition of the React component, now to render that component. The rendering process is triggered to link the top-level component to an existing DOM node, and populate that DOM node. Rendering is triggered via the ReactDOM.render function. Render requires two arguments, the first being the JSX expression that defines the react component to render, and the second argument is the existing DOM element to bond the component to.

Crossword screenshot 2
Crossword screenshot 2

So far, we have created and rendered our Puzzle component. The “Code to go in here” should appear in your browser along with the Jumbotron header and credits.

Populating Props

Props, or properties, are the constant immutable model values that React component uses to render. They are supplied as XML attributes within the JSX syntax.

Looking at that Hello World program in JSFiddle, let’s change it to the following:

Here, we have passed a string representing the current date to the Hello component as a property called today. The today attribute is a JavaScript expression, therefore it is enclosed in curly braces. The value assigned to num attribute is a string literal, so it is enclosed in double quotes.

this.props.today and this.props.num are used to access the today and the num value as a property on the props object.

When you click on Update on JSFiddle to save the changes you made, then click Run to run the code you edited, the output should be something like this:

Hello World example - edited with Date
Hello World example – edited with Date

One more thing to remember, JSX (prior to version 0.14.0) did not own a white space, so to get a space between the today prop and the num prop, another JSX expression containing a string literal with a space was added, like this.

Because <h1> is a block-level element, you would not have noticed the white space. The example in Figure 9 shows the num attribute moved inside the <h1> element to demonstrate the purpose of the empty string literal.

However, since we are using Babel and not JSX Transformer, this white space is not a problem. You can easily implement that line of code like so:

So far, we have understood how to define components, render the components to be viewed on the browser, and populating properties.

Before we continue, let’s add some data as JSON. I’ll create a JavaScript object called data and this is to be an array.

Populating Properties in the Game

We will change our code to make Game the top-level component. This component will also render the JSON data. Also, added Bootstrap for mobile view.

You will notice there is what looks like an HTML element named Clues, but it is just a React component we will be creating next.

In the statements variable, you will notice map, which takes each item from the data array, performs transformation and returns a new array containing the transformed elements. Here, we rendered the statements dynamically and returned it.  Here, we finally render the population of the props.

Once we have this props, we are ready to complete the layout of the crossword. This is a very basic layout in table form.

I used input boxes for the letters. These input boxes has a maximum length of 1, to allow only one letter. For the other cells, I added a style to change the background color black.

Finally, those input textboxes will not work unless you handle those changes. You will notice that in each input box, there is a ref attribute. Refs provide a way to get reference to owned components. In the above Puzzle class, we added refs to each input element, so we can access that component instantly via this.refs in the following code.

The findDOMNode is an escape hatch used to access the underlying DOM node from the React component instance. Here, each input component is accessed via its ref and then the findDOMNode method is used to get the underlying DOM node, which is a text input. This allows us to type in the textbox, causing a change in its value.

So, we have added components, populated props, add refs to our input components, and accessed those refs with findDOMNode method. We have completed a visual of the crossword puzzle.

In the next part of this tutorial, we will complete the game, by introducing events to ensure the correct answer is being inputted.

Are there any questions or comments you have relating to this tutorial?  Can you create similar games or more with React?