Getting There


Simon Knox
@psimyn
Frontend Foreman, kogan.com

Not this

yet

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">

  ReactDOM.render(

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

    document.querySelector('div')
	);
<​/script>
					

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} />

    {item.title}

  • );

    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

      http://www.wikihow.com/Be-Careful-Around-a-Campfire

    Now

    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](https://github.com/mic159/react-render) your components! - Multiple components (non-hierarchical)
    ### Unrelated but cool things - [Structor](https://github.com/ipselon/structor) - [CSSX](https://github.com/krasimir/babel-plugin-transform-cssx) - [YAML](https://www.yaml.org/spec/1.2/spec.html) - [Kogan.com Dev Jobs](http://careers.kogan.com/software-devs-engineering/)