Introduction to JSX

Inside the src directory create a new subdirectory called pages, and in there please create the file Detail.js. When working with React some developers like to use the file extension .jsx and others like to use plain old .js – honestly it really doesn't matter, so use whichever makes you happy. That being said, if this is your first time using React I would suggest you stick with .js so you can follow this tutorial more easily.

In Detail.js we're going to make React render something really simple so you can see why we needed to jump through all those Webpack and NPM hoops earlier. Modify Detail.js so it has this content:

src/pages/Detail.js

import React from 'react';

class Detail extends React.Component {
    render() {
        return <p>This is React rendering HTML!</p>;
    }
}

export default Detail;

That's seven lines of ES6 code, of which one is empty and two are just closing braces by themselves, so hopefully nothing too challenging for you. But what's interesting is the use of HTML, because it's right in the middle there and not surrounded by quotes. And yet it works, which is one of the marvellous things about React: this is called JSX, and when your code gets built by Webpack that JSX automatically gets converted into JavaScript.

If you were wondering, a "brace" is the name for the { and } symbol, with { being an opening brace and } being a closing brace. You'll be using these a lot!

Anyway, as you can see JSX looks pretty much like HTML, although there are a few exceptions you'll learn as you progress. Let's take a look at each of the important lines of code:

• import React from 'react' loads the React library, which is pretty central to our whole application and thus is required.

• class Detail extends React.Component { defines a new React component. React components can be big (like pages) or small (like a custom component to render breadcrumbs) and they are very flexible.

• render() { starts the render() method of our component. This is called by React when the component needs to be drawn to the screen, and needs to return something that can be drawn in the browser.

• What's left in this class is just the closing brace } that ends the render() method and the second closing brace that ends the class we're creating.

• export default Detail; The "export" keyword means this component is being exposed to the rest of our app to use, and "default" means it's the only thing this class will expose.

This example has all the JSX on one line, but we'll soon move to writing multi-line JSX. Multi-line JSX introduces one important quirk you should be aware of now, which is that JSX automatically trims whitespace between lines. So, if you're following the code examples in this book and find some missing whitespace between two lines, try putting them on one line and you'll find it works.

Now, after all that code I'm sorry to say it won't do anything just yet. Fortunately, that's easily fixed…

Copyright ©2016 Paul Hudson. Follow me: @twostraws.