My talk.

react-talk.md

Hello everyone,

My name is Clay Murray I am a developer at Unicity International This talk is to teach you about using react specifically building Isomorphic websites using react.

The problem. In frameworks like Angular you build your HTML completely on the client side. While there are many upsides to this technique there are a few downsides Time between page download and render Because it is all being constructed client side, it can take a moment to create the page for the user. SEO, because indexers, at least in the past, didn't run javascript on the page, you missed out on important SEO information

A solution: server side rendering. Wait? isn't this exactly what we were doing 5 years ago? Why did we stop? Different code for rendering on the server vs updating the page on the client.

THE solution: What if we could use the same view code on the server and on the client?

Enter react and isomorphic code.

What is isomorphic? simple dictionary definition

corresponding or similar in form and relations.

Hey look at that

What if we could use the same view code on the server and on the client?

How?

Nodejs and Reactjs

What is Reactjs From https://facebook.github.io/react/

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

React is a Model View Whatever. It handles our model and view but not the controller. That is left completely up to us.

Fist step:

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

ReactDOM.render(<Timer />, mountNode);

Hold up! Stop! That's not valid Javascript. You have HTML in there!

Yes. But it's not pure javascript it's Facebook's own intermediary language JSX. It just makes it easy to include Your HTML in the same place as your javascript without all the messy string concatenations etc.

Here is what it looks like after it gets compiled to vanilla javascript

"use strict";

var Timer = React.createClass({
  displayName: "Timer",

  getInitialState: function getInitialState() {
    return { secondsElapsed: 0 };
  },
  tick: function tick() {
    this.setState({ secondsElapsed: this.state.secondsElapsed + 1 });
  },
  componentDidMount: function componentDidMount() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function componentWillUnmount() {
    clearInterval(this.interval);
  },
  render: function render() {
    return React.createElement(
      "div",
      null,
      "Seconds Elapsed: ",
      this.state.secondsElapsed
    );
  }
});

ReactDOM.render(React.createElement(Timer, null), mountNode);

What are we doing here?

Creating a react class that encapsulates the view and it's logic. It binds all event listeners creates the HTML appends it to DOM node mountNode

Okay let's do server side rendering now! No need to change our view

var HTML = ReactDOM.renderToStaticMarkup(<Timer />);

Now this is obviously a simplification, but real world examples still have this exact same flow to them.

1. write your view once
2. generate on server
3. generate on client

React will automatically detect the markup from the server is react based and attach event listeners for us. No need to re-render after it gets to the client. After the inital load, we can treat this as if it were a single page app. Route, change the view update UI, Append, Delete etc.

Now we have a fast page load that you can instatly see from the server, with all the benefits we can gain from doing a single page app.

Thanks goodnight.

Talk about react classes in depth.

The most basic React class

//The first letter of the classname should always be uppercase
var SomeClass = React.createClass({
  render: function(){
    //All DOM nodes must have a parent
    return <div> Hello World!</div>
    //This won't work
    //<p>Hello</p><p>World</p>
    //React Hates Orphans and so should you.
  }
})