title: Trying to get a basic search bar up on my first react site
body: <p>I am trying to get my first react site up -- eventually it will be a parametric search of a product database, but for now I'm trying to just get a simple search bar up.  I am running into an error I don't understand.</p>
  
  <p>I think I am nesting the styles incorrectly somehow, but I'm not sure how to resolve it.</p>
  
  <p>My code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; // add
  import RaisedButton from 'material-ui/RaisedButton'; // add
  import logo from './logo.svg';
  import './App.css';
  
  import InputBase from '@material-ui/core/InputBase';
  import SearchIcon from '@material-ui/icons/Search';
  
  const useStyles = makeStyles(theme =&gt; ({
  
        search: {
      position: 'relative',
      borderRadius: theme.shape.borderRadius,
      backgroundColor: fade(theme.palette.common.white, 0.15),
      '&amp;:hover': {
        backgroundColor: fade(theme.palette.common.white, 0.25),
      },
      marginLeft: 0,
      width: '100%',
      [theme.breakpoints.up('sm')]: {
        marginLeft: theme.spacing(1),
        width: 'auto',
      },
    },
    searchIcon: {
      padding: theme.spacing(0, 2),
      height: '100%',
      position: 'absolute',
      pointerEvents: 'none',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }
  }),
  
  export default function SearchAppBar() {
    const classes = useStyles();
  
  class App extends Component {
    render() {
      return (
  
        &lt;MuiThemeProvider&gt;
  
        &lt;div className="App"&gt;
          &lt;div className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h2&gt;Welcome to React&lt;/h2&gt;
          &lt;/div&gt;
          &lt;p className="App-intro"&gt;
            To get started, edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
          &lt;/p&gt;
  
        &lt;div className={classes.search}&gt;
              &lt;div className={classes.searchIcon}&gt;
                &lt;SearchIcon /&gt;
              &lt;/div&gt;
              &lt;InputBase
                placeholder="Search…"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'search' }}
              /&gt;
            &lt;/div&gt;
  
          &lt;RaisedButton label="Material UI" /&gt;
  
        &lt;/div&gt;
  
        &lt;/MuiThemeProvider&gt;
  
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>I get this error in the console when I run npm start.</p>
  
  <pre><code>  Line 39:1:  Parsing error: Unexpected token
  
    37 | }),
    38 | 
  &gt; 39 | export default function SearchAppBar() {
       | ^
    40 |   const classes = useStyles();
    41 | 
    42 | class App extends Component {
  </code></pre>