Read: Class 29 - 401-advanced-javascript-dania/amman-javascript-401d1 GitHub Wiki

Routing Using react-router, you can easily toggle the visibility of components (or even pages) based on the URL/Route that the user engages with.

import { Route } from 'react-router-dom';

To use Browser Router properly, you eliminate your use of tags and instead use it’s built-in component.

Home Stuff In practice, then, use the router component to look at either / or /stuff and based on that, displaying either the Home or the List component… {items}} /> Component Composition - Logical In this setup, you are sending your child components the raw data and allowing them to render the output as they decide.

// Dashboard Wrapper // - feeds the SearchForm some methods // - then feeds the results some data

// .. Results Component

{this.props.data.map( (item,i) =>
• {item}
);

Component Composition - Using Logic-less Children This is typically used when your children are already in JSX form (pre-rendered) and you need to display them as a whole. A good example might be a gallery of images

render() { let listings = {this.state.results.map( (item,i) =>

{item}

); } { listings.map( listing => listing ) }

// Results Component

{this.props.children}