React

Samuel Hudec

Základy a animácie

Čo je React

  • UI knižnica od Facebooku
  • Všetko je "Component"
  • Používa JSX miesto HMTL
  • Virtual DOM

Čo React nemá

  • Controllery
  • Modely
  • Templaty
  • Globálne event listenery
  • Directive

Component - state

import React, {Component} from 'react';

class DemoComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
            active: false
        }
    }

    handleOnClick(evt) {
        evt.preventDefault()
        this.setState({
            active: !this.state.active
        })
    }
    
    render() {
        return (
            <div style={{
                width: "250px",
                height: "100px",
                backgroundColor: this.state.active ? "green" : "grey"
            }}>
                <button className="button" 
                    onClick={evt => this.handleOnClick(evt)}>
                    Activate me!
                </button>
            </div>
        );
    }
}

export default DemoComponent;

JSX

Inicializuje sa state

Component - props

import React, {Component} from 'react';

class DemoComponent extends Component {

    render() {
        return (
            <div style={{
                width: "250px",
                height: "100px",
                backgroundColor: this.props.active ? "green" : "grey"
            }}>
                <button className="button" 
                    onClick={evt => this.props.clickHandler(evt)}>
                    Activate me!
                </button>
            </div>
        );
    }
}

export default DemoComponent;
<DemoComponent active={true} clickHandler={superCoolClickHandler} />

Použitie v inom komponente

Component - lifecycle

class DemoComponent extends Component {
    // -- Lifecycle Methods --

    // Invoked once before first render
    componentWillMount(){
        // Calling setState here does not cause a re-render
    }

    // Invoked once after the first render
    componentDidMount(){
        // You now have access to this.getDOMNode()
    }

    // Invoked whenever there is a prop change
    // Called BEFORE render
    componentWillReceiveProps(nextProps){
        // Not called for the initial render
        // Previous props can be accessed by this.props
        // Calling setState here does not trigger an an additional re-render
    }

    // Determines if the render method should run in the subsequent step
    // Called BEFORE a render
    // Not called for the initial render
    shouldComponentUpdate(nextProps, nextState){
        // If you want the render method to execute in the next step
        // return true, else return false
        return true;
    }

    // Called IMMEDIATELY BEFORE a render
    componentWillUpdate(nextProps, nextState){
        // You cannot use this.setState() in this method
    }

    // Called IMMEDIATELY AFTER a render
    componentDidUpdate(prevProps, prevState){
    }

    // Called IMMEDIATELY before a component is unmounted
    componentWillUnmount(){
    }

}

export default DemoComponent;

Animácie v Reacte


import TransitionGroup from "react-addons-transition-group"

...

<TransitionGroup>
    {items}
</TransitionGroup>

import ReactCSSTransitionGroup from "react-addons-css-transition-group"

...

<ReactCSSTransitionGroup 
    transitionName="animationExample"
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={300}>
  {items}
</ReactCSSTransitionGroup>
class DemoComponent extends Component {
    // -- ReactTransitionGroup methods --

    componentWillAppear(callback){

    }

    componentDidAppear(){
        
    }

    componentWillEnter(callback){

    }

    componentDidEnter(){
        
    }

    componentWillLeave(callback){
    }

    componentDidLeave(){
        
    }

    render() {
      return (
        <div ref="demo" >
        </div>
      )
    }

}

export default DemoComponent;
import * as d3 from "d3"

class DemoComponent extends Component {
    // -- ReactTransitionGroup methods --

    componentWillAppear(callback){
        const el = this.refs.demo

        // fade-in
        d3.select(el)
            .style("opacity","0")
            .transition()
            .duration(300)
            .style("opacity","1")
            .on("end", callback);
    }

    componentDidAppear(){
        //this is called after callback from componentWillAppear
    }

    render() {
      return (
        <div ref="demo" >
        </div>
      )
    }

}

export default DemoComponent;

Referencia