Using React stateless components for quick prototyping

When you’re building a new app using React it’s nice to start laying out all the components you’ll want to use inside the components that you’re building. Unfortunately this can be a little slow because for each new component you have to:

  1. Create a new file
  2. Import that file
  3. Include React in the file
  4. Export a Component from the file
  5. Add a simple render method to the Component

Step 5 is really the core of what you want to do here, and I realized today that I can quickly skip the other four steps by just using React Stateless Components, which are just functions. When using ES2015 fat-arrow syntax, they can be one-liners!

import React from 'react';
const Header = () => <div className="header"><img className="header__logo" src="/assets/logo.png" /><h1 className="header__title">My App</h1></div>;
const ToDoList = () => <div className="to-do-list"><h2 className="to-do-list__title">To Do</h2></div>;
const Controls = () => <div className="controls"><h2 className="controls__title">Controls</h2></div>;
const Footer = () => <div className="footer">Made by Me</div>;
export default React.createClass( {
render() {
return (
<div className="app">
<Header />
<ToDoList />
<Controls />
<Footer />
} );

view raw
hosted with ❤ by GitHub

Using these you can mock up your Component layout very quickly, then move them over to your new Component files one at a time as you are ready. And you may even have some of your render methods there for you!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s