How to React

... js

Kent C. Dodds

Utah

wife, 4 kids, & a dog

PayPal, Inc.

Please Stand...

if you are able ❤️ ♿️

What this talk is

  • About abstraction and React
  • Fundamental principles

Let's
Get
STARTED!

What is abstraction?

Let's take a look at an example...

// $(el).toggleClass(className);

function toggleClass(el, className) {
  if (el.classList) {
    el.classList.toggle(className);
  } else {
    var classes = el.className.split(' ');
    var existingIndex = -1;
    for (var i = classes.length; i--;) {
      if (classes[i] === className)
        existingIndex = i;
    }

    if (existingIndex >= 0) {
      classes.splice(existingIndex, 1);
    } else {
      classes.push(className);
    }

    el.className = classes.join(' ');
  }
}

2 questions

Before using an abstraction

  1. What is the benefit of this abstraction?
  2. What is the cost of this abstraction?

What if we use it before we know the answers?

// $(el).toggleClass(className)

function toggleClass(el, className) {
  el.classList.toggle(className);
}

What costs are there?

maintainability

performance

time investment

abstraction abandonment

Side note...

Want to just play around with stuff?

Want to just ship stuff?

That's totally cool.

Just recognize you don't know the all trade-offs...

So how do we start with React?

Start with JavaScript

And Modern JavaScript

Next, let's learn React

index.html

create-react-app

Dependencies and npm

Using npm...

Single Page App?

Let's learn routing with react-router!

State Management

Lifting State Up

- React Docs

this.setState -> this.props.onChange

this.state.value -> this.props.value

Unchanged state?

JavaScript module (singleton)

Simple state?

React's Official Context API!

Complex state?

VERY complex state?

Component Styling?

Let's do some CSS-in-JS!

Why CSS-in-JS?

  • Scoped styles
  • Critical CSS
  • Smarter optimisations
  • Package management
  • Non-browser styling
  • Colocation of concerns

From here...

Learn these in any order

  1. Relay/Apollo (GraphQL)
  2. Server Rendering
  3. Immutable.js

Thank you!

How to React

By Kent C. Dodds

How to React

Learning React can be confusing. React is a library, but even more than that, React is an ecosystem of tools that you piece together to create a program. This is a powerful property of the React community, however that ecosystem can be frustratingly distracting when you’re a newcomer trying to get your feet wet. The key to avoiding this frustration and confusion is to learn React (and its ecosystem) in the right order. In this talk, we’ll go over what that order is and give a roadmap so you can have a vision of where you’re going. Let’s learn how to React!

  • 875
Loading comments...

More from Kent C. Dodds