Getting There

Simon Knox
Frontend Foreman,

Not this


1. Add to head

<​script src="react.js">
<​script src="react-dom.js">
<​script src="babel-core.js">

2. Add to body

<​script type="text/babel">


    <​h1>Yay React!<​/h1>,


3. Your site is now Powered by React™

Your first component

  • small
  • lazy-loaded
  • self-contained
if (!goingWell)

killing off components is ok

DOM-y React is OK

const RelatedItem = item => (
  • <​img src={item.image_mini} />


  • );

    React-y React is better

    	const RelatedItem = item => (
    	<​ProductTile item={item} />

    Be careful around:

    • 3rd Party Components

      Can be hard to style, among other things

    • Crossover Libraries

      reactgularboneout.js causes more trouble than it solves.

    • Fires


    Where we are, using a scale of Peter Sellers' filmography
    Dr Strangelove1964
    Optimists of 9 Elms1973
    Return of the Pink Panther1975
    Pink Panther Strikes Again1976
    Being There1979
    ### Next - Fix your State. it is a mess - [Server render]( your components! - Multiple components (non-hierarchical)
    ### Unrelated but cool things - [Structor]( - [CSSX]( - [YAML]( - [ Dev Jobs](