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