Debug a React Component Faster with routine-design

Photo by rawpixel on Unsplash

When you create a React component, you put HTML in the render method. How do you know that HTML will render the way you want it to render?

And what about the Sass file you bundled with the React component. Does it style the HTML in the way you intended?

I created routine-design so developers can check how browsers render their React components. Routine-design is easy to install in your Node.js repository. Once it is set up, it is easy to debug individual React components.

(This story is building off Three Techniques for Quickly Rendering a Component. I basically automated all the code parts.)

High Quality HTML/CSS

Create React App (CRA) creates a very simple React application you run on localhost:3000. It only has one component: App.js. But if you look at App.js and App.scss source code, you’ll see that the logo can be a component in and of itself.

Proposed logo/index.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './index.scss';
class Logo extends Component {
render() {
  return (<img src={logo} className="App-logo" alt="logo" />);
}}
export default Logo;

Proposed logo/index.scss:

.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

You need to check that logo/index.js and logo/index.scss render properly in a real browser, because there are plenty of places in the code you could have written something unintentional:

• Maybe the className in logo/index.js doesn’t match the CSS selector in logo/index.scss.
• Maybe you mistyped the import path to logo.svg.
• Maybe you mistyped the keyframe name, App-logo-spin
• Maybe 40vmin is way too big. Or way too small!

Now browsers only care about HTML and CSS. Browsers don’t care about the React code that made the HTML. Or the Sass code that made the CSS. So you need to check the full pipeline:

• First: React+Sass becomes HTML+CSS code
• Then: the browser renders HTML+CSS into pixels

Routine-design sets up this full pipeline.

Getting Started with routine-design

Create a test/render directory. I recommend keeping your test/render directory as a “mirror” of the src directory. In the CRA example, src directory has

• src/App.js
• src/logo/index.js

So create

• test/render/App.js
• test/render/logo/index.js

Proposed test/render/App.js:

import React, { Component } from 'react';
import App from '../../src/App.js';
class AppTest extends Component {
render() {return (<App/>);}
}
export default AppTest;

Proposed test/render/logo/index.js:

import React, { Component } from 'react';
import Logo from '../../../src/logo/index.js';
class LogoTest extends Component {
render() {return (<Logo/>);}
}
export default LogoTest;

Now we are going to use routine-design to scrape the test/render directory, and render each component in the browser. First, install routine-design through NPM

npm install --save-dev routine-design

Update your package.json with a new script that points to the test/render directory

"scripts": {
  "render": "routine-design render ./test/render",
  // other scripts like
  // "start": "react-scripts start"
},

Now run npm run render. In the browser, open localhost:8080/#/logo. Congratulations, you’ve made a server for rendering individual components! This URL renders the Logo component, from src/logo/index.js, including the styling in src/logo/index.scss.

Leave the server running and edit either src/logo/index.js or src/logo/index.scss. Your changes will be reflected immediately in the browser (unless you break something and it can’t compile, then you’ll see an error in the terminal).

Routine-design writes files to the routine-design-output directory. I recommend you add routine-design-output to your .gitignore.

If you have any problems with routine-design, be sure to file bugs in the GitHub repository.

Source of Truth

Routine-design generates URLs based on the directory structure of test/render. If you open localhost:8080/#/app you’ll see the App component.

However, the App component you see on localhost:8080/#/app is not exactly the same as the App component you see on localhost:3000. This is because CRA doesn’t put 100% of the App component styling in App.scss. CRA puts some global styles, like font-family, in index.css. Since App.js never imports index.css, the styles do not show up in routine-design’s render server.

Routine-design’s render server is a source of truth for what is and is not included in a given component. This kind of guarantee is useful when you want to share components, especially across multiple React applications.

So if you are trying to build a component library, routine-design can help keep you honest, and ensure high quality React+Sass code.