ReactJS 

@basarat

JavaScript Recap

var foo = {
    bar: 123
};

JavaScript Recap

var {bar} = foo;

// Again 
var {bar} = {
    bar: 123
};

JavaScript Recap

var foo = function () { return 123 };

var foo = () => 123;

Everything is a component

https://upload.wikimedia.org/wikipedia/commons/4/47/River_terrapin.jpg

What is a component?

Props

=>

Component Instances

Simples

const Body = ({body})=> <div>{body}</div>

Composition

const Headline = ({title}) => 
    <div style={{fontSize:"24px"}}>{title}</div>;

const News = ({title,body}) => 
    <div>
        <Headline title={title}/>
        <Body body={body}/>
    </div>;

Types!

const Headline = (props:{title:string}) =>
     <div style={{fontSize:"24px"}}>{props.title}</div>;

Display!

const Headline = (props:{title:string}) =>
     <div style={{fontSize:"24px"}}>{props.title}</div>;


// Render to DOM
ReactDOM.renderComponent(
    <Headline title="Hello World")/>,
    document.getElementById("app")
);


// Render on server
const str = ReactDOMServer.renderToString(
    <Headline title="Hello World")/>
);

Stateful components

Props =>

(state) => 

Component Instances

interface Props {
    text: string;
}

interface State {
}

export class FooFancy extends React.Component<Props, State>{
    render() {
        return <div>{this.props.text}</div>;
    }
}

interface Props {
    text: string;
}

interface State {
    count: number;
}

export class FooFancy extends React.Component<Props, State>{
    constructor(props:Props){
        super(props);
        this.state = {
            count: 0
        }
        setInterval(()=>{ this.setState({count: this.state.count + 1}) }, 1);
    }
    render() {
        return <div>{this.props.text} - {this.state.count}</div>;
    }
}

interface Props {
    text: string;
}

interface State {
    count: number;
}

export class FooFancy extends React.Component<Props, State>{
    constructor(props:Props){
        super(props);
        this.state = {
            count: 0
        }
    }

    interval:number;
    componentDidMount(){
        this.interval = 
            setInterval(() => this.setState({ count: this.state.count + 1 }));
    }
    componentWillUnmount(){
        clearInterval(this.interval);
    }

    render() {
        return <div>{this.props.text} - {this.state.count}</div>;
    }
}

Life Cycle

https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods

componentDidMount #

componentWillReceiveProps #

shouldComponentUpdate #

componentWillUpdate #

componentDidUpdate #

componentWillMount #

constructor

XHRs

propsToState

this. state == state

componentWillUnmount #

dispose()

JSX premier

TypeScript TSX

JavaScript Recap

// whole line == "Statement"
var foo = 123; 

// A sourcefile is just
// a bunch of *statements* ;)

var foo =  
    /*this is an expression */ 123;

JavaScript Recap

// Warning: Invalid JavaScript! 

var foo = { 
  bar : if (true) { 123 }
}

JavaScript Recap

// \o/

var foo = { 
  bar : true && 123
}

Escaping

render() {
        return <div>
            {true?"Asdf":undefined}

            {
                <div>asdf</div>
            }
        </div>;
    }

JS Keywords

<div className="foo"/>

<label htmlFor="foo"/>

These match the JavaScript access for these in browser DOM e.g.`node.className` 

var foo = document.createElement('div');
foo.

Comments

var content = (
  <Nav>
    {/* We need more Person */}
    <Person
      // Name only set if logged in
      name={window.isLoggedIn ? window.name : ''}
    />
  </Nav>
);

Render convention: ();

return (
  <Nav>
    {/* We need more Person */}
    <Person
      // Name only set if logged in
      name={window.isLoggedIn ? window.name : ''}
    />
  </Nav>
);

Angular Concepts in React

Just JavaScript

  • ng if
  • ng-repeat
  • ng-switch
  • ng-click (angular 2)
  • HTML reuse
  • Pipes
  • Transclusion
  • MultiSlot transclusion

JavaScript Emit

You don't call ... we call ... and reuse ... and optimize

Constructor Functions

return <Fancy ref="root"/>;
return React.createElement(Fancy,
    {"ref": "root"}
);

Constructor Functions

return <div ref="root"/>;
return React.createElement("div", 
    {"ref": "root"}
);

Dom

div

Component

Div

TIPS

Render

<noscript/>

Two Way DataBinding

Two Way DataBinding

Say no to cycles

Input

render() {
    return <input 
        type="text" 
        value={this.state.message} 
        onChange={(event)=>this.setState({message:event.target.value})} />;
}

Life

Code

ref

For when you need DOM

Dom Node

class FooFancy extends React.Component{
    componentDidMount() {
        this.refs["root"].style.color = 'red';
    }
    render() {
        return <div ref="root">Hello World</div>;
    }
}

https://jsfiddle.net/basarat/qhopmb8m/

Custom Components

class BarFancy extends React.Component{
   sayYouLoveMe(){
	alert('I love you!');
   }
   render(){
	return <div>I can say I love you</div>;
   }
}

class FooFancy extends React.Component{
    refs: {
        [key:string]:any;
        
        root: BarFancy;
    }

    componentDidMount() {
        this.refs.root.sayYouLoveMe();
    }
    render() {
        return <BarFancy ref="root"/>;
    }
}

https://jsfiddle.net/basarat/rudfeefp/

Key

Loopiness

https://jsfiddle.net/basarat/q0gm5b48/

class BarFancy extends React.Component {
  render() {
    return <div> Raise the bar! </div>;
  }
}

class FooFancy extends React.Component {
  render() {
      return <div>
    	 { [1, 2, 3].map((i)=> <BarFancy key={i}/>) } 
      </div>;
  }
}

Styleguide

https://github.com/Khan/style-guides/blob/master/style/react.md

Thank you

Made with Slides.com