4.1: Challenge Answer

We wanted to throw this at you as a review of what we've covered. There is no new information in this challenge. Here's what you should have done:

import React from 'react';

const JSXRules = () => {
    return(
        <div className="main">
            <div className="mainDiv">
                <h1 className="section-title">JSX</h1> 
                <dl>
                    <dt>Resembles HTML</dt>
                    <dd>It's not. It's actually closer to JavaScript.</dd>
                    <dt>"React elements"</dt>
                    <dd>These are used to construct and update the DOM, or what you see on the screen.</dd>
                    <dt>JSX is not required</dt>
                    <dd>You can write your return in vanilla JS, but most sane people use JSX.</dd>
                </dl>
            </div>
        </div>
    );
}

export default JSXRules;

You'll need to import the component add the Link & Route to the Sidebar.js file:

+ import JSXRules from '../concepts/JSXRules';

  <div className="sidebar">
    <div className="sidebar-list-styling">
      <ul className="sidebar-list list-unstyled">
        <li><Link to="/">Home</Link></li>
        <li><Link to="/rationale">Rationale</Link></li>
        <li><Link to="/functionalcomponent">Functional Component</Link></li>
+       <li><Link to="/jsxrules">JSX Rules</Link></li>
        <li><Link to="/resources">Resources</Link></li>

  <Route exact path="/jsxrules"><JSXRules /></Route>
</Switch>