A quick introduction to React

Will Little

Although it's easy to roll your eyes at the JavaScript frontier — especially when the next great thing is introduced every week — be careful not to lump React in with “all the other JS frameworks.”

For starters, React is not a framework (at least not in the way you probably think about them). Unlike Angular, Ember, Meteor, etc... React is only the “view layer”; i.e. it's not intended to encompass the full set of tools to build a web application. You still need to figure out and decide on routing, data flow, architecture, patterns/conventions, etc…

Don't get me wrong, I'm personally a fan of opinionated frameworks that provide “all the things” for me. I'm not a computer scientist, so I'd rather trust a smart community to figure out best-practices so I can focus on quickly shipping products and features.

That being said, the React community is maturing to the point where there are solid “leading options” with regard to routing, data flow, etc… including amazing communities behind them. I'll talk more about what these are in later articles, but for now let's focus on the core of React itself.

Components, FTW

You probably played with Legos growing up (!). Think of React as a set of Legos (components) that you define and use as many times as you like.

class Brick extends Component {
  render() {
    return (
      <div>I'm a {this.props.color} brick!</div>
    )
  } 
} 

We can pass in a color property to the component when we actually use it, like so:

<Brick color="red" />
<Brick color="green" />
<Brick color="blue" />

You can make as many components as you'd like, each with as many properties as you'd like, nest them inside other components, and boom, you can build the Millennium Falcon.

I'm obviously skipping over a bunch of stuff that you'll learn when you dive in (e.g. why I chose to use ES2015 (aka ES6) and JSX syntax above, how we actually mount the component into the DOM, etc…), but the above is sufficient to give you a “quick” introduction to React. :)

Why would I use React vs. other JavaScript options?

If you know Ember, Angular, etc… go ahead and use those. At the end of the day, each community is solving similar problems, and for 99% of applications you'll be fine either way.

Personally, what tipped me over to go all-in with React was React Native. That is, we can use the essentially same “container” components to manage the state of an application and data flow (i.e. that logic you built in your mobile-friendly web app can apply directly to your iOS and Android apps). BIG WIN.

In addition to using standard iOS and Android platform components, React Native allows you and your developer team to follow the same basic conventions (not to mention the same language) as you build your apps. In the real world, being able to ship early and often is often the difference between life and death of a startup.

Author's note: this post is part of an article series, Introduction to web and mobile development for startup founders, which I'm in the process of updating from Backbone.js/Eco to Redux/React. Feel free to subscribe to my newsletter and I'll let you know when I get new content up. Thanks!