react-notes.md

React Notes

Overview

• Allows us to write declarative views that “react” to changes in data
• Allows us to abstract complex problems into smaller components
• Allows us to write simple code that is still performant

Imperative vs. Declarative

• How vs. what
• Imperative programming outlines a series of steps to get to what you want
• Declarative programming just declares what you want

React is Declarative

• React allows us to write what we want and the library will take care of the DOM manipulation

React is Easily Componentized

• Breaking a complex problem into discrete components
• Can reuse these components
  • Consistency
  • Iteration speed
• React’s declarative nature makes it easy to customize components

React is Performant

• We write what we want and React will do the hard work
• Reconciliation - the process by which React syncs changes in app state to the DOM
  • Reconstructs the virtual DOM
  • Diffs the virtual DOM against the DOM
  • Only makes the changes needed

Writing React

• JSX
  • XML-like syntax extension of JavaScript
  • Transpiles to JavaScript
  • Lowercase tags are treated as HTML/SVG tags while uppercase tags are treated as custom components
• Components are just functions
  • Returns a node (something React can render, e.g. a <div />)
  • Receives an object of the properties that are passed to the element

Todo App Example

import React from "react";
import { render } from "react-dom";

let id = 0;

const Todo = (props) => (
  <li>
    <input
      type="checkbox"
      checked={props.todo.checked}
      onChange={props.onToggle}
    />
    <button onClick={props.onDelete}>Delete</button>
    <span>{props.todo.text}</span>
  </li>
);

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: []
    };
  }

  addTodo() {
    const text = prompt("TODO text please!");
    this.setState({
      todos: [...this.state.todos, { id: id++, text: text, checked: false }]
    });
  }

  removeTodo(id) {
    this.setState({
      todos: this.state.todos.filter((todo) => todo.id !== id)
    });
  }

  toggleTodo(id) {
    this.setState({
      todos: this.state.todos.map((todo) => {
        if (todo.id !== id) return todo;
        return {
          id: todo.id,
          text: todo.text,
          checked: !todo.checked
        };
      })
    });
  }

  render() {
    return (
      <div>
        <div>Todo count: {this.state.todos.length}</div>
        <div>
          Unchecked todo count:{" "}
          {this.state.todos.filter((todo) => !todo.checked).length}
        </div>
        <button onClick={() => this.addTodo()}>Add Todo</button>
        <ul>
          {this.state.todos.map((todo) => (
            <Todo
              onToggle={() => this.toggleTodo(todo.id)}
              onDelete={() => this.removeTodo(todo.id)}
              todo={todo}
            />
          ))}
        </ul>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));