ReactJS Workshop

These are the notes from my ReactJS workshop at Open Source Kerala 2017.

Javascript Ecosystem: How it all started.

• Server side multi page websites
• Browers and JS engines became better
• Google and AJAX
• JQuery
• MVCs in client side
• Backbone and Underscore / Angular

React

• Open Source Javascript library for building dynamic user interfaces.
• From Facebook
• Virtual DOM
• Updates only what is necessary
• Simple declarative views for each state of the application
• Can render in client and server

TODO App in Vanilla JS

https://j15h.nu/downloads/todo.html

ES6

• Arrow functions
• Class
• import, export
• const
• spread operator
• removes whitespace at the beginning and ending of a line, blank lines, new lines adjacent to tags.
• new lines that occur in the middle of string literals are condensed into a single space
• booleans, null, and undefined are ignored

JSX

• Javascript Syntax Extension
• Looks like XML/HTML
• Not required, but helps a lot.

    const element = (
      <h1 className="greeting">
        Hello, 
      </h1>
    );
  

  to

    const element = React.createElement(
      'h1',
      {className: 'greeting'},
      'Hello, world!'
    );
  

• variables
  • <h1>{title}</h1>
• Prevents Injection Attacks
• User-defined components must be capitalized
• no value for props will default to true

Setup

• install create-react-app
  npm install -g create-react-app
• create a new project
  create-react-app my-app
• start the server
  cd my-app && npm start

Code walkthrough

• walkthrough
• move out header module
• passing props: props are Read-Only
• lets create a todo app

Thinking in React

• Break UI into component hierarchy
• Build a static version
• Identify where state should live

React Basics

• Lifecycle Method
  componentDidMount, componentWillMount
• Do not modify state directly, use setState()
• State updates may be async

    // Incorrect
    this.setState({
      counter: this.state.counter + this.props.increment,
    });
  

    // Correct
    this.setState((prevState, props) => ({
      counter: prevState.counter + props.increment
    }));
  

• Handling events
  • onClick
  • e.preventDefault() is needed
  • Make sure to bind or use experimental public class field syntax
• Conditional Rendering
  • Element variables
  • Inline-if and logical && operators
  • Inline-if-else
  • Prevent from rendering
    return null
• Lists and keys
  • Introduce .map()
  • Use map to covert an array of items for JSX
  • Keys help React identify which items have changed
  • Don't use index if order of item changes
  • Keys only make sense in the context of the surrounding array.
  • keys must be unique among their sibling
  • Where to specify key

      function ListItem(value) {
        return (
          // Wrong! There is no need to specify the key here:
          <li key={value}>
            {value}
          </li>
        );
      }
    
      function NumberList(numbers) {
        const listItems = numbers.map((number) =>
          // Wrong! The key should have been specified here:
          <ListItem value={number} />
        );
        return (
          <ul>
            {listItems}
          </ul>
        );
      }
    

• Forms
  • Controlled component

      this.state = {value: ''};
      handleChange(event) {
        this.setState({value: event.target.value});
      }
    
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    

  • Uncontrolled component

      handleSubmit(event) {
        alert('A name was submitted: ' + this.input.value);
        event.preventDefault();
      }
    
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={(input) => this.input = input} />
        <input type="submit" value="Submit" />
      </form>
    

• Composition vs Inheritance
  {props.children}

Further Improvements

• Redux
• Webpack
• React-Router