sample.jsx

const transportationList = (
  <ul>
    <li>Armored Car</li>
    <li className="active">Hyperloop</li>
  </ul>
);

ReactDOM.render(
  transportationList, 
  document.getElementById(‘app’)
);

var transportationList = React.createElement(
  "ul",
  null,
  React.createElement(
    "li",
    { className: "active" },
    "Armored Car"
  ),
  React.createElement(
    "li",
    null,
    "Hyperloop"
  )
);

const transportationTypes = [
  'armored car',
  'fire engine',
  'golf cart',
  'hyperloop'
];

const transportationList = (
  <ul>
    {transportationTypes.map((type, i) => (
      <li 
        key={`type_${i}`} 
        className={type === 'hyperloop' ? 'active' : ''}
      >
        {type}
      </li>
    ))}
  </ul>
);

var transportationList = React.createElement(
  'ul',
  null,
  transportationTypes.map(function (type, i) {
    return React.createElement(
      'li',
      {
        key: 'type_' + i,
        className: type === 'hyperloop' ? 'active' : ''
      },
      type
    );
  })
);

import TransportationList from './components/TransportationList.js';

ReactDOM.render(
  <TransportationList />, 
  document.getElementById(‘app’)
);

import React, {Component} from 'react';
import {render} from 'react-dom';

class TransportationList extends Component {
  render() {
    return (
      <ul>
        <li>Armored Car</li>
        <li className="active">Hyperloop</li>
      </ul>
    );
  }
}

const transportationTypes = [
  'armored car',
  'fire engine',
  'golf cart',
  'hyperloop'
];

ReactDOM.render(
  <TransportationList types={transportationTypes} />, 
  document.getElementById(‘app’)
);

class TransportationList extends Component {
  makeType(type, i) {
    const key = `type_${i}`;
    const className = type === 'hyperloop' ? 'active' : '';

    return (
      <li
        key={key}
        className={className}
      >
        {type}
      </li>
    );
  }

  render() {
    const {types} = this.props;

    return (
      <ul>
        {types.map(this.makeType)}
      </ul>
    );
  }
}

// Stateless vs. Statefull Components
import React, {Component} from 'react';
import TypeListItem from './TypeListItem';

export default class TransportationList extends Component {
  render() {
    const {types} = this.props;

    return (
      <ul>
        {types.map((type, i) => (
          <TypeListItem
            key={`type_${i}`}
            type={type}
          />
        ))}
      </ul>
    );
  }
}

import React from 'react';

export default (props) => {
  const {type} = props;
  const className = type === 'hyperloop' ? 'active' : '';

  return (
    <li
      className={className}
    >
      {type}
    </li>
  );
};

// using `props.children`

import React from 'react';
import {render} from 'react-dom';
import TypeList from './components/TypeList';
import TypeListItem from './components/TypeListItem';

const transportationTypes = [
  'armored car',
  'fire engine',
  'golf cart',
  'hyperloop'
];
const listItems = transportationTypes.map((type, i) => (
  <TypeListItem
    key={`type_${i}`}
    type={type}
   />
));

const elm = document.getElementById('app');
const App = <TypeList>{listItems}</TypeList>);

render(App, elm);


export default class TransportationList extends Component {
  render() {
    const {children} = this.props;

    return <ul>{children}</ul>;
  }
}

// prop-types
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import TypeListItem from './TypeListItem';

class TransportationList extends Component {
  render() {
    const {types} = this.props;

    return (
      <ul>
        {types.map((type, i) => (
          <TypeListItem
            key={`type_${i}`}
            type={type}
          />
        ))}
      </ul>
    );
  }
}

TransportationList.propTypes = {
  types: PropTypes.array.isRequired
};

export default TransportationList;



import React from 'react';
import PropTypes from 'prop-types';

const TypeListItem = (props) => {
  const {type} = props;
  const className = type === 'hyperloop' ? 'active' : '';

  return <li className={className}>{type}</li>;
};

TypeListItem.propTypes = {
  type: PropTypes.number.isRequired
};

export default TypeListItem;

// context

import FormFilter from './FormFilter';
import ListWrapper from './ListWrapper';

class App extends Component {
  getChildContext() {
    return {types: this.props.types};
  }

  render() {
    return (
      <div className="container">
        <div className="row">
          <FormFilter />
          <ListWrapper />
        </div>
      </div>
    );
  }
}

App.propTypes = {
  types: PropTypes.array.isRequired
};

App.childContextTypes = {
  types: PropTypes.array
};

export default App;


import TypeListItem from './TypeListItem';

class TransportationList extends Component {
  render() {
    const {types} = this.context;

    return (
      <ul>
        {types.map((type, i) => (
          <TypeListItem
            key={`type_${i}`}
            type={type}
          />
        ))}
      </ul>
    );
  }
}

TransportationList.contextTypes = {
  types: PropTypes.array.isRequired
};

export default TransportationList;