[React] Use the Fragment Short Syntax in Create React App 2.0

create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Babel Version 7, which enables the Short Syntax of React Fragments. Fragments have been a feature of React since version 16.2, but the Short Syntax hasn’t been available since Babel 7.0. Fragments let you wrap a group of children without adding an extra node to the DOM, which is helpful if you need a specific DOM structure.

 

import React, { Component, Fragment } from "react";
import "./App.css";

const Content = () => (
  <>
    <nav>Navigation</nav>
    <main>Main area</main>
  </>
);

class App extends Component {
  render() {
    return (
      <div className="App">
        <header>Header</header>
        <Content />
        <footer>Footer</footer>
      </div>
    );
  }
}

export default App;