Elvenware

JavaScriptReact

Welcome to JavaScriptReact

Overview

Information on React.

Create React Application

Here is a simple way to create a React Application.

We want create-react-app to open Chrome or Chromium, not FireFox. (Unless you really prefer FireFox. But I tend to use Chrome or Chromium.)

Click the Gear icon (Menu) at the top right of Lubuntu. Choose System Settings. Open up Details. Select Default Applications. Pick Chrome or Chromium, as you prefer. More details are here

npm install -g create-react-app
mkdir ~/Source
cd ~/Source
create-react-app test
cd test
npm start

ENOSPC Error

While testing, If you get an ENOSPC error, do this:

More watches

Props Singe Node Error

Here is the error: Method “props” is only meant to be run on a single node. 0 found instead.

I got this when I had a mismatch between what I thought a button click method was called and what it was really called. For instance, here is my test:

wrapper.find('button#foo').simulate('click');

And here is my JSX:

<button id="bar" onClick={this.getBar}>Get User</button>

Note that the ID of the button is bar, but I'm trying to find something with an ID of foo. To fix the proplem, bring them into sync:

wrapper.find('button#bar').simulate('click');

React in WebStorm

NOTE: Assuming you are working with ES6, JSX and React, from the menu select File | Settings | Languages and Frameworks | JavaScript and set the language version to React JSX

Enzyme mount vs shallow

Suppose one component nests another. For instance, suppose that your custom component MyComponent renders a second component called MyOtherComponent. Here is MyComponent's render method :

class MyComponent extends Component {
  render() {
      return (
          <div>
              <MyOtherComponent />
          </div>
      );
  }
}

Here MyComponent does nothing but ask MyOtherComponent to render itself.

In cases like this, if you use Enzyme's shallow, you will only see the output from MyComponent. During the test, it will seem as though MyOtherComponent does not exist, or at least does not render anthing. Indeed, that is often what you want. But sometimes, it is best to see the output from both MyComponent and MyOtherComponent. To do that, you use mount rather than shallow. We usually do this:

import { shallow } from 'enzyme';

If you want to see output from both components, then do this:

import { mount } from 'enzyme';

React Links

Enzym Debug Class

We have several debug functions that we often append to the top of our test files. This violates our DRY principle. As a result, I've created the following simple class which we can reuse in multiple tests:

We could also, at least in theory, add to this class over time as we discover more useful tests.