eddyw

eddyw

Notes:
  Git doesn't track empty files.
  To keep a directory, create inside it a .gitkeep file with
    touch /emptyFolder/.gitkeep

  Referencing to commits.
    using SHA, or HEAD, HEAD^ (One previous), HEAD^^ (2 back), master^
    
  HEAD points to the very last commit
    

eddyw

<Switch>
  <Route exact path="/section1" component={Section1} />
  <Route exact path="/section2" component={Section2} />
  <Route exact path="/section3" component={Section3} />
  <Route component={NotFound} />
</Switch>

eddyw

<section>
{
  this.props.section === 1
    ? <Section1 /> :
  this.props.section === 2
    ? <Section2 />
  this.props.section === 3
    ? <Section3 /> 
    : null
}

eddyw

<section>
{
  this.props.section === 1 &&
  this.props.isUserLogged
    ? <SectionUserLogged /> :
  this.props.section === 1
    ? <SectionUserNotLogged />
  this.props.section === 2 &&
  this.props.isUserLogged &&
  this.props.isUserAdmin

eddyw

import React from 'react'
import propTypes from 'prop-types'
import SwitchWhen from './SwitchWhen'

class SwitchIf extends React.PureComponent {
  static propTypes = {
    test: propTypes.any.isRequired,
    equals: propTypes.any,
    children: props => (
      React.Children

eddyw

<section>
  <SwitchIf test={this.props.section}>
    <SwitchWhen equals={1} render={<Section1 />} />
    <SwitchWhen equals={2} render={<Section2 />} />
    <SwitchWhen equals={3} render={<Section3 />} />
  </SwitchIf>
</section>

eddyw

<section>
  <SwitchIf test={this.props.section}>
    <SwitchIf equals={1} test={this.props.isUserLogged}>
      <SwitchWhen equals={true} render={<SectionUserLogged />} />
      <SwitchWhen equals={false} render={<SectionUserNotLogged />} />
    </SwitchIf>
    <SwitchIf equals={2} test={this.props.isUserAdmin}>
      <SwitchWhen equals={true} render={<SectionDashboard />} />
    </SwitchIf>
    <SwitchWhen equals={3} render={<SectionAbout />} />

eddyw

import React from 'react'
import propTypes from 'prop-types'
import { render } from 'react-dom'

class Span extends React.Component {
  static propTypes = {
    children: propTypes.node.isRequired,
  }
  render() {
    return <span>{this.props.children}</span>

eddyw

import React from 'react'
import propTypes from 'prop-types'
import { render } from 'react-dom'

class Form extends React.Component {
  static propTypes = {
    onSubmit: propTypes.func.isRequired,
  }
  render() {
    return (