3 Minute React Test Drive: Hello World the Easy Way

Trying to wrap your head around React, but haven’t written any code yet?

Maybe you’ve read some blogs, watched some videos, tried to understand how all the pieces fit together… You want to understand everything before you start building. And there are so many moving parts! React, Flux/Redux, Router, and on and on.

And at the same time, the basic React stuff almost seems too simple.

“React looks so simple on the surface… components are basically just functions that return the view based on the current state. Is this really manageable at scale?”

So let’s cut to the chase: it’s really hard to evaluate a library without writing any code, so we’re going to solve that right now :)

In this post, I’m going to show you how to write Hello World in 3 minutes, and then you can play around and go from there.

We’re going to do this in pure React – which means you don’t need to worry about Redux, routing, or even setting up a build or cloning a boilerplate project!

Step 0

Make sure you have Node.js and npm installed. If not, get it here. I’m assuming you’ve got this already. Does not count against the 3 minutes.

Step 1

Install react-heatpack. Open a terminal/command prompt and run:

npm install -g react-heatpack

React Heatpack is an awesome tool that will let you magically skip all of the build bullsh*t and get right down to writing an app. This is also the slowest step.

Step 2

Make a new directory. Call it anything you want. react-hello is a nice name.

Step 3

Create a file in that directory, name it index.js, and type this code in:

import React from 'react'

export default React.createClass({
  render: function() {
    return <div>Hello React!</div>
  }
})

There’s a little ES6 going on here: import and export default… if that looks foreign, just ignore it for now (React can be written quite well in ES5 or ES6).

Step 4

From inside that directory, run the dev server and pass it the name of your index.js file:

heatpack index.js

Step 5

Open a browser to <a href="http://localhost:3000" target="_blank">http://localhost:3000</a> (I even gave you a link!)

Step 6

There is no step 6. The app is working! You wrote a React app! Isn’t it tiny?

What Now?

First, I want to mention that I have a newsletter that receives posts like this every week or so. If that sounds cool, click the button below to sign up.

<button class="cta-button" data-remodal-target="signup-modal">Send me more posts like this!</button>

Now that we’ve got a scaffold in place, follow along with the exercises below and learn a little more!

Exercise 1: Massive Refactoring

The code is too bloated. Please create a Hello component that renders “Hello” and a World component that renders “world!”. Then render them both, side-by-side, in that main component at the bottom.

Hint: You can basically write 2 new components that look very much like the existing one, assign them to variables Hello and World, and then refer to the components as <Hello/> <World/> in that bottom render function…

Type that up, hit Refresh (or not! react-heatpack comes with hot reloading!), and make sure it still works.

import React from 'react'

var Hello = React.createClass({
  render: function() {
    return <span>Hello</span>
  }
})

var World = React.createClass({
  render: function() {
    return <span>world!</span>
  }
})

export default React.createClass({
  render: function() {
    return <div><Hello/> <World/></div>
  }
})

import React from 'react'

var Hello = React.createClass({
  render: function() {
    return <span>Hello</span>
  }
})

var World = React.createClass({
  render: function() {
    return <span>{this.props.who || 'world'}!</span>
  }
})

// Alternatively, use a ternary operator:
var World_v2 = React.createClass({
  render: function() {
    return <span>{this.props.who ? this.props.who : 'world'}!</span>
  }
})

// Or even split out the logic into its own function:
var World_v3 = React.createClass({
  getPerson: function() {
    return this.props.who || 'world';
  },

  render: function() {
    return <span>{this.getPerson()}!</span>
  }
})

export default React.createClass({
  render: function() {
    return <div><Hello/> <World who="Dave"/></div>
  }
})

React.createClass({
	propTypes: {
		name: React.PropTypes.string.isRequired,
		age: React.PropTypes.number, // optional
		parent: React.PropTypes.object.isRequired
	},
	render: function() {
		...
	}
})

import React from 'react'

var Hello = React.createClass({
  render: function() {
    return <span>Hello</span>
  }
})

var World = React.createClass({
  propTypes: {
    who: React.PropTypes.string
  },

  render: function() {
    return <span>{this.props.who || 'world'}!</span>
  }
})

export default React.createClass({
  render: function() {
    return <div><Hello/> <World who="Dave"/></div>
  }
})