8.08 Creating Layout Component

src/
│
├── assets/
│
├── components/
│     └── Layout/
│            └── Layout.js
│
├── containers/
│
├── App.js
├── App.css
├── App.test.js
├── index.js
├── index.css
│

index.css

index.css

body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

App.js

App.js

import React, { Component } from "react";
import Layout from "./components/Layout/Layout";

class App extends Component {
  render() {
    return (
      <div>
        <Layout>
          <p>Test</p>
        </Layout>
      </div>
    );
  }
}

export default App;

New Layout.js

Layout.js

import React, { Fragment } from "react";

const layout = (props) => (
  <Fragment>
    <div>Toolbar, SideDrawer, Backdrop</div>
    <main>{props.children}</main>
  </Fragment>
);
export default layout;