React.js

The V in MVC

React is a library, not a framework which basically means that you'll need to use it in conjunction with other libraries or, at least, vanilla JS to make it work for complex applications.

Declarative code

• More readable
• Code is less prone to bugs
• Side effects are reduced

Composition

• We should be able to compose components the same way we compose functions.

Explicit Mutations

• If you want to change the state you need to do it by yourself.
• There's no magic to do so, even if you're using it in conjunction with a flux implementation or any other state management library.

Virtual DOM

The virtual DOM is used for efficient re-rendering of the DOM. 

Virtual DOM terminology

• Element
• Node
• Component

React Element

• An element is a plain object describing a component instance or DOM node and its desired properties.
• It has four properties: type, props, key and ref. It has no methods and nothing on the prototype.
• A React Element is a light, stateless, immutable, virtual representation of a DOM Element.
• To create elements, use React.createElement(), JSX, or an element factory helper. 

{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}

<button class='button button-blue'>
  <b>
    OK!
  </b>
</button>

is a plain object representation of

React Node

• A ReactNode can be either:

  • ReactElement
  • string (aka ReactText)
  • number (aka ReactText)
  • Array of ReactNodes (aka ReactFragment)

• These are used as properties of other ReactElements to represent children. Effectively they create a tree of ReactElements.

An element describing a component is also an element, just like an element describing the DOM node. They can be nested and mixed with each other.

const DeleteAccount = () => ({
  type: 'div',
  props: {
    children: [{
      type: 'p',
      props: {
        children: 'Are you sure?'
      }
    }, {
      type: DangerButton,
      props: {
        children: 'Yep'
      }
    }, {
      type: Button,
      props: {
        color: 'blue',
        children: 'Cancel'
      }
   }]
});

React Component

• Components encapsulate elements trees.
• They can be classes or functions.

However, whether functions or classes, fundamentally they are all components to React. They take the props as their input, and return the elements as their output.

const Form = ({ isSubmitted, buttonText }) => {
  if (isSubmitted) {
    // Form submitted! Return a message element.
    return {
      type: Message,
      props: {
        text: 'Success!'
      }
    };
  }

  // Form is still visible! Return a button element.
  return {
    type: Button,
    props: {
      children: buttonText,
      color: 'blue'
    }
  };
};

We could define a "Form" component as follows

ReactDOM.render({
  type: Form,
  props: {
    isSubmitted: false,
    buttonText: 'OK!'
  }
}, document.getElementById('root'));

// React: You told me this...
{
  type: Form,
  props: {
    isSubmitted: false,
    buttonText: 'OK!'
  }
}

// React: ...And Form told me this...
{
  type: Button,
  props: {
    children: 'OK!',
    color: 'blue'
  }
}

// React: ...and Button told me this! 
// I guess I'm done.
{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}

Show me the code!!

React without React

https://github.com/alterx/no-react-react​

Basic ES6 Hello World

https://github.com/alterx/reactjs-intro​