Component Composition - andrewkyllo-401-advanced-javascript/seattle-javascript-401d34 GitHub Wiki

Routing

  • Using react-router you can easily toggle the visibility of components based on the URL/Route that the user engages with
  • import { Route } from 'react-router-dom;
  • Using the Browser Router properly you replace the <a> tags with <Link> 
<Link to="/">Home</Link>
<Link to="/stuff">Stuff</Link>

Component Composition - Logical

  • In this setup, you are sending your child components the raw data and allowing them to render the outputs as they decide
// Dashboard Wrapper
//  - feeds the SearchForm some methods
//  - then feeds the results some data

<Dashboard>
  <SearchForm handler={this.doTheSearch} />
  <Results data={this.state.results} />
</Dashboard>

// .. Results Component
<ul>
  {this.props.data.map( (item,i) => <li key={i}>{item}</li> );
</ul>

Component Composition - Using Logic-less Children

  • This is typically used when your children are already in JSX forms and you need to display them as a whole
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

<Dashboard>
  render() {
    let listings = {this.state.results.map( (item,i) => <li key={i}>{item}</li> );
  }
  <SearchForm handler={this.doTheSearch} />
  <Results>
    { listings.map( listing => listing ) }
  </Results>
</Dashboard>

// Results Component

<ul>
  {this.props.children}
</ul>
⚠️ **GitHub.com Fallback** ⚠️