DotForce & ReactJS

React Overview

• Terminology
• The Virtual DOM
• React Components
• JSX
• Props and State
• React lifecycle methods

React Terminology

Babel: transforms ES* and JSX into ES5 code

Component Life Cycle Methods: a subgroup of component events that are executed at specific points

JSX: XML-like syntax used to define HTML-like tree in a JS file

npm: the package manager for Javascript

React Component: an abstraction containing one or more React nodes/components

React Nodes: the primary object type in React (ie. <div />)

Virtual DOM: in-memory JavaScript tree of React elements/components that is used for efficient re-rendering of the browser DOM

Webpack: a module loader and bundler that takes all UI files into one static file

Big Picture: What does React do?

The Virtual DOM

The DOM (Document Object Model)

What is the Virtual DOM?

It is a light-weight abstraction of the DOM. React takes a snapshot of the virtual DOM before any updates, then uses a diffing algorithm to see what needs to be updated.

The Virtual DOM Updating

React Components

What are components?

Components let you split the UI into independent, reusable pieces.

There are two kinds of components:

1. Stateless components

2. Stateful components

Stateless or "dumb" components

var Welcome = (props) =>
    <div>
        <h1>Hello</h1>
    </div>

you can write a stateless component as a function that returns JSX

the function takes the props that are passed from the parent component

the function must return JSX or null to be a valid component

Note: unless you need local state for some reason, keep your components dumb. It is easier to maintain this way.

Stateful or "smart" components

class Welcome extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "Sarah"
        }
        this.logPersonName = this.logPersonName.bind(this);
    }

    logPersonsName() {
        console.log(this.state.name);
    }

    render() {
        this.logPersonsName();
        return (
            <div>
                <h1>Welcome {this.state.name}</h1>
            </div>
        )
    }
}

if you have a constructor in your component, you need to call super(props)

whatever render returns will be what is placed in the virtual DOM

components can have their own methods

JSX

What is JSX?

It is a syntax extension to JavaScript.

JSX is what each component returns.

JSX produces React "elements", that are used while making the virtual DOM.

class Welcome extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "Sarah"
        }
    }

    render() {
        return (
            <div>
                <h1>Welcome {this.state.name}</h1>
            </div>
        )
    }
}

What is JSX?

Props and State

What are props?

Props is a way to pass information from a parent component to a child component.

// Parent component
var Greeting = (props) =>
    <div>
        <Welcome name="Joey" />
        <Welcome name="Chandler" />
        <Welcome name="Rachel" />
    </div>

// Child component
var Welcome = (props) => 
    <p>Hello {props.name}</p>

What is state?

class Greeting extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            names: ["Joey", "Chandler", "Rachel"]
        }
    }

    render() {
        return (
            <div>
                {
                    this.state.names.map(name =>
                        <Welcome name={name} />
                }
            </div>
        )
    }
}

you can do JS stuff in the return statement, but it must return JSX

called "local state" because Greetings "owns" that state

Similar to props, but is private and fully controlled by the component

State

class Greeting extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            names: []
        }   
        this.fetchNames = this.fetchNames.bind(this);
    }

    fetchNames() {
        fetch("/api/names")
        .then(names => this.setState({ names: names }))
        .catch(err => console.log(err))
    }

    render() {
        return (
            <div>
                {
                    this.state.names.map(name =>
                        <Welcome name={name} />
                }
            </div>
        )
    }
}

using the this.setState method to assign values to the state

initializing state in the constructor

Note: state is generally reserved for interactivity or data that changes over time

state updates are asynchonous

Lifecycle Methods

componentWillUnmount

The Component Lifecycle

Each component has several methods that you can override to run code at particular times in the process. 

If the method starts with "will" it is called right before something happens. If it starts with "did" it is called right after something happens.

1.constructor()

2.componentWillMount()

3.render()

4.componentDidMount()

Lifecycle Hooks: Mounting

When adding a component to the DOM

1. componentWillReceiveProps()

2. shouldComponentUpdate()

3. componentWillUpdate()

4. render()

5. componentDidUpdate()

When there is a change to the props or state, causing a re-render of the component

Lifecycle Hooks: Updating

1. componentWillUnmount()

When the component is being removed from the DOM

Lifecycle Hooks: Unmounting

Lifecycle Hooks

JSFiddle Demo

Adding to DotForce

Sources

• https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf
• https://medium.com/@hidace/understanding-reacts-virtual-dom-vs-the-real-dom-68ae29039951
• https://medium.com/learning-new-stuff/learn-react-js-in-7-min-92a1ef023003
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super
• React Docs:
  • https://reactjs.org/docs/introducing-jsx.html
  • https://reactjs.org/docs/react-component.html
  • https://reactjs.org/docs/state-and-lifecycle.html

• https://reactjs.org/docs/thinking-in-react.html
• https://reactjs.org/docs/jsx-in-depth.html
• https://reactjs.org/docs/higher-order-components.html

Further Reading