React.js

class: center, middle

.title[
Front-end training
# ReactJS
]

---

# About

- Not a framework ( js *library* for building user interfaces )
- Made by [Facebook's](https://facebook.github.io/react/support.html) teams
- ~60k stars on [github](https://github.com/facebook/react)
- HTML-like syntax ([JSX](https://facebook.github.io/react/docs/jsx-in-depth.html)) in javascript files
- Very easy to learn and understand the logic behind main approaches
- Lot of examples are available
- Learn Once, Write Anywhere

---
# Key Points

- UI components are the cohesive units
- UI description and UI logic are tightly coupled
- Re-render everything on every update
- Virtual DOM and Synthetic Events

---
# Virtual DOM

1. Create lightweight description of component UI
2. Diff it with the old one
3. Compute minimal set of changes to apply to the DOM
4. Batch execute all updates

---

# Hello World!

```html
...
<div id="app" />
...
```

```
import React from 'react';
import ReactDOM from 'react-dom';

class HelloWorldComponent extends React.Component {
  render() {
      return (
          <div>Hello world</div>
      );
  }
}

ReactDOM.render(
  <HelloWorldComponent />,
  document.getElementById('app')
);
```
---

# Component Composition

```
import Header from './Header';
import SearchBar from './SearchBar';
import BearList from './BearList';

class HomePageComponent extends React.Component {
    render() {
        return (
            <div>
                <Header />
                <SearchBar />
                <BearList />
            </div>
        );
    }
}

```

---
# Component Composition. Children

```
// App.jsx
class App extends React.Component {
    render() {
        const { children } = this.props;
        return (
            <div className="app-root">{children}</div>
        )
    }
}
// Client.jsx
import React from 'react';
import { render } from 'react-dom';
import App from './App';
import Header from './Header';
import SearchBar from './SearchBar';
import BearList from './BearList';

render(
    <App>
        <Header />
        <SearchBar />
        <BearList />
    </App>,
    document.getElementById('app')
);
```

---
# Handling Events

Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:

- React events are named using camelCase, rather than lowercase.
- With JSX you pass a function as the event handler, rather than a string.

For example, the HTML:

```
<button onclick="activateLasers()">
  Activate Lasers
</button>
```
is slightly different in React:

```
<button onClick={activateLasers}>
  Activate Lasers
</button>
``` 
[Supported events](https://facebook.github.io/react/docs/events.html#supported-events)
---
# Data Flow

- Parent-to-Child
  - Data can be passed to children as properties and available as `this.props`
  - Properties are immutable

- Child-to-Parent
  - Event handlers (callbacks) can be passed as properties

```
...
onSearch(keyword) {
  alert(keyword)
},

render() {
  return (
    <div>
      <Header title="Hello World" />
      <SearchBar onSearch={this.onSearch} />
    </div>
  );
}
...
```

---
# Data Flow cont.

```
// Header.js
import PropTypes from 'prop-types';
...

static get propTypes() {
    return {
        title: PropTypes.string
    };
},

static get defaultProps() {
    return {
        title: 'Some default title'
    }
}

render () {
  return <h1>{this.props.title}</h1>;
}
...
```
---

# Data Flow cont.
```
// SearchBar.js
...
onChange (e) {
  this.props.onSearch(e.target.value);
},
render () {
  return (
    <input type="text" onChange={this.onChange.bind(this)} />;
  );
}
...
```
---

# State

State is mutable and a [private](https://medium.com/react-tutorials/react-state-14a6d4f736f5#.6byg04o4r) data-set of a component.
Each time state is changed, UI will be changed.
```
...
constructor(props) {
  this.state.name = 'Michael';
}

render() {
  return (
    <h1>Hello {this.state.name}</h1>
  );
}
```

Do Not Modify State Directly
```
this.state.name = 'Petro'; //wrong
```
In order to update state use setState method
```
this.setState({name: 'Petro'})```

Thanks to the setState() call, React knows the state has changed, and calls render() method again to learn what should be on the screen
---

# State cont.
```
class HomePageComponent extends React.Component {
  constructor (props) {
    super(props);
    this.state.bears = [];
  }

onSearch (q) {
    this.props.service.findByKey(q)
      .then(items => this.setState({ bears: items }));
  }

render () {
    return (
      <div>
        <SearchBar onSearch={this.onSearch} />
        <BearList items={this.state.bears} />
      </div>
    );
  }

};
```

---
# The Component Lifecycle

## Mounting
These methods are called when an instance of a component is being created and inserted into the DOM:

- constructor()
- componentWillMount()
- render()
- componentDidMount()

## Updating
An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:

- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()
---
# The Component Lifecycle cont.
## Unmounting
This method is called when a component is being removed from the DOM:

- componentWillUnmount()

## Other APIs
Each component also provides some other APIs:

- setState()
- forceUpdate()

<a href="http://www.andreasreiterer.at/web-development/reactjs-lifecycle-methods/?utm_source=reactnl&utm_medium=email" target="_blank">How to use React Lifecycle Methods</a>

---

# Stateless Functional Component

```
// Link.jsx
...
const Link = ({ caption, url, newWindow }) => {
    return (
        <a href={url} target={newWindow ? '_blank' : null}>{caption}</a>
    )
};

export default Link;
```

---
# Stateless Functional Component. Cont.

```
// Footer.jsx
import React from 'react';
import Link from './Link';

Footer.defaultProps = {
    links: []
};

Footer.propTypes = {
    links: PropTypes.arrayOf(shape({}))
};
export default Footer;

```

---
# Resources
<br />
- https://facebook.github.io/react/
- https://facebook.github.io/flux/docs/overview.html
- https://medium.com/dailyjs/optimize-react-performance-c1a491ed9c36
- Best Practices
  - https://blog.risingstack.com/react-js-best-practices-for-2016/
  - https://www.toptal.com/react/tips-and-practices
  - https://github.com/planningcenter/react-patterns
- CheatSheets
  - http://ricostacruz.com/cheatsheets/react.html
  - http://reactcheatsheet.com/

---

class: center, middle

# Thank You!
### Questions?

---
# Practice

<a href="https://codesandbox.io" target="_blank">codesandbox.io</a>