We have been writing our React with vanilla JavaScript up until now which frankly few people do. Most people take advantage of JSX which essentially adds HTML/XML-like syntax as a "primitive" type to JavaScript. In reality, what it does it takes the HTML you write for your components and translate them into the same calls we writing just using vanilla JavaScript.

So why JSX? People usually get pretty grossed out by the HTML in the JavaScript and say it looks like 1998 when we were still writing JavaScript in our HTML. However, I assert that markup in JS is a good thing while JS in markup is a bad thing! Here, we're keeping all the concerns of a component in one place: the markup structure, the event listeners, the state, the state mutators, everything. If the component breaks, we know it broke there. That's really valuable.

So try it. While the plain JS way isn't too bad, once you start writing JSX I almost guarantee you won't want to go back. Let's convert what we have to JSX.

Side note: good idea to install a JSX syntax highlighter. If you're using Sublime, I highly recommend the "Babel" package off of Package Control. If you're using VIM, try VimBox. I have no experience with it but I've heard it helps.

import React from 'react';

const MyTitle = props => {
  const style = { color: props.color };
  return (
    <div>
      <h1 style={style}>
        {props.title}
      </h1>
    </div>
  );
};

export default MyTitle;

We're using JSX finally! Make sure you're inserting those opening and closing parens around the component. It's just letting JS know you're going to put your expression on the next line (which we want to do for readability.)

Since we're using JSX now, we're going to rename our files to MyTitle.jsx and ClientApp.jsx. You could leave it as .js (I tend to in personal projects) but the Airbnb config of ESLint requires it. Make sure you change the entry in webpack.config.js to reflect JSX as the entry point.

Notice the curly braces surrounding props.title. They're there to let JSX know I want this to be a JS expression. If they weren't there, it would literally put the string 'props.title'. Notice the double curly braces surrounding the style value. The exterior set of curly braces are the same as the one as before: they're letting JSX know you want a JS expression. The interior set of curly braces represent a JavaScript object, meaning you're passing in a object to the style attribute. A little strange to get used to seeing that, but keep in mind that double curly braces themselves have no special meaning.

Lastly, you may notice that I switched to an ES6 style here. This is synonymous with the function syntax; just a bit more terse. Feel free to write it in any syntax that fits your fancy; this is very readable to me but may not be to you.

Let's rewrite ClientApp.jsx.

import React from 'react';
import ReactDOM from 'react-dom';
import MyTitle from './MyTitle';

const MyFirstComponent = () => {
  return (
    <div>
      <MyTitle title="Props are great!" color="rebeccapurple" />
      <MyTitle title="Use props everywhere!" color="mediumaquamarine" />
      <MyTitle title="Props are the best!" color="peru" />
    </div>
  );
};

ReactDOM.render(<MyFirstComponent />, document.getElementById('app'));

Notice how we use our own components as if they were normal HTML tags. Neat, right? We define our own components and then we can throw anywhere since they're self contained! We even pass them props as if they were normal attributes.

Also notice we're including React in both files but not directly manipulating it. This is okay since remember JSX is converting these tags to calls to React, so in reality it is using React (and thus we do have to include it.) Overall a simplification I think!

Something to make note of: the top level component has to be singular, or in other words, your top level component cannot be sibling to something else. This makes sense if you think about what JSX is transpiling to: function calls.


// won't compile
const InvalidComponent = () => (
  <h1>My Title</h1>
  <h2>My Title 2</h2>
);

// will compile
const ValidComponent = () => (
  <div>
    <h1>My Title</h1>
    <h2>My Title 2</h2>
  </div>
);

Hence why you'll see a lot of wrapping divs in JSX; it's so the whole thing will compile. This is fine if you need to do this; an extra wrapping div does nothing of harm unless you have structurally sensitive CSS. Also notice that if you have just raw text to put into JSX, you can enter it just as if was normal HTML. It's only when you have JS expressions when you need to use the curly braces.

Note this will change with React Fiber, which by the time you read this, may have been released. It's plan as shipping with React 16. Fiber is a total rewrite that's still API compatbile with React. With Fiber, you'll be able to render multiple top level components.