How to use react-lightning-design-system - 4 common examples

import React, { Component } from 'react';
import moment from 'moment';
import {
  Button, Form, Input, Textarea, RadioGroup, Radio,
  CheckboxGroup, Checkbox, Select, Option,
  Picklist, PicklistItem, Icon,
  DateInput,
  Lookup,
  FieldSet,
} from 'react-lightning-design-system';

const Row = FieldSet.Row;


const LOOKUP_DATA = [
  { label: 'Account', value: '1', icon: 'standard:account' },
  { label: 'Contact', value: '2', icon: 'standard:contact' },
  { label: 'Opportunity', value: '3', icon: 'standard:opportunity' },
];

const TodayButtonExtensionRenderer = (props) => {
  const { onSelect } = props; // eslint-disable-line react/prop-types
  const today = moment().format('YYYY-MM-DD');
  return (
    <div style="{{">
      <button> onSelect(today) }</button></div>

import React from 'react';

import { Icon } from 'react-lightning-design-system';

const { STANDARD_ICONS, CUSTOM_ICONS, ACTION_ICONS, DOCTYPE_ICONS, UTILITY_ICONS } = Icon.ICONS;

export default () => {
  /* eslint-disable max-len */
  const styles = { padding: '12px' };
  const iconListStyles = { float: 'left', width: '10rem', height: '5rem', padding: '1.5rem', textAlign: 'center' };
  return (
    <div>
      <h2>Icon Sizes</h2>
      <div style="{">
        
        
        
        
      </div>
      <div style="{">
        </div></div>

import React from 'react';
import { Form, FieldSet, Lookup, Button } from 'react-lightning-design-system';

import COMPANIES from './data/COMPANIES';
import OPPORTUNITIES from './data/OPPORTUNITIES';
import CAMPAIGNS from './data/CAMPAIGNS';
import CASES from './data/CASES';
import SCOPES from './data/SCOPES';

const Row = FieldSet.Row;

const COMPANY_DATA = COMPANIES.map((label, i) => ({
  icon: 'standard:account',
  label,
  value: `10000${i}`,
  scope: 'Account',
}));

const OPP_DATA = COMPANIES.map((label, i) => ({
  icon: 'standard:opportunity',
  label: `${label} - ${OPPORTUNITIES[i % OPPORTUNITIES.length]}`,
  value: `20000${i}`,
  scope: 'Opportunity',
}));

const CAMPAIGN_DATA = CAMPAIGNS.map((label, i) => ({

import path from 'path';
import React from 'react';
import ReactDOM from 'react-dom';
import { util } from 'react-lightning-design-system';

import Root from './components/Root';

util.setAssetRoot(path.join(location.pathname, 'assets'));

ReactDOM.render(, document.getElementById('root'));