ReactJS

Lecture # 3

ReactJS course for Gomel .NET department  

Speaker: Ales Tsvil  

12/16/2016

Today

• Conditional Rendering 
• Forms 
• Styling Components
• Lifting State Up
• Reconciliation 
• Devtools
• Demo

Key features

- Virtual DOM

- Сomponent approach

- JSX

- Unidirectional Data Flow

- Declarativiness

ReactElement and ReactComponent

var root = React.createElement('div'); //Element
ReactDOM.render(root, document.getElementById('example'));

var Timer = React.createClass({        //Component
  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>
    );
  }
});

Component

import React from 'react';

const MyReactComponent = React.createClass({
  // Configuration
  propTypes: {},
  mixins: [],
  statics: {
    aStaticFunction() {}
  },
  // State and Props setup
  getInitialState() { return {}; },
  getDefaultProps() { return {}; },
  // Lifecycle hooks
  componentWillMount() {},
  render() { return (<div></div>); },
  componentDidMount() {},
  componentWillReceiveProps(nextProps) {},
  shouldComponentUpdate(nextProps, nextState) { return true; },
  componentWillUpdate(nextProps, nextState) {},
  componentDidUpdate(prevProps, prevState) {},
  componentWillUnmount() {}
});

export default MyReactComponent

Lifecycle

class Basket extends Component {
  constructor(props) {
    super(props);
    this.state = { isBasketVisible: false };
  }
  render() {
    if (!this.props.showCredentials) {
      return (<div />);
    }
    return (
      <div className="x-shopping-cart-content" onClick={(e) => this.onClick(e)}>
        <div className="x-shopping-cart-icon">
          <Icon type="basket" />
        </div>
        <div className="x-shopping-cart-orders-count">
          {this.state.basketRequests ? this.state.basketRequests.items.length : 0}
        </div>
        <div className="x-shopping-cart-title">
          <div className="x-bartitle">
            <span>BASKET</span>
          </div>
        </div>
        {
          this.state.isBasketVisible ?
            <div className="x-basket-widget-wrapper">
              <BasketWidget />
            </div> : null
        }
      </div>
    );
  }
}

Props

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

State

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

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

ReactDOM.render( <Timer/>, document.getElementById('root'));

Event Handling

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

Demo App

Any questions?

Thank for your attention!