Setup

stevenhicks.me/your-first-react-app-setup

About

Me

About

Me

Steven Hicks

About

Me

Steven Hicks

About

This Workshop

About

This Workshop

Me: Talk

You: Exercise

Me: Recap

About

This Workshop

Goal: Survey React Landscape

About

This Workshop

Instructions: README.md

About

This Workshop

👉: Specific Task

About

This Workshop

Answers: SOLUTIONS.md

About

This Workshop

Answers: SOLUTIONS.md

Answers: ./complete

About

This Workshop

"Done" Indicator

Post-it on the back of your laptop

About

This Workshop

Feedback

Green = Good; Yellow = Okay; Pink = Bad

About

This Workshop

Feedback

Green = Good; Yellow = Okay; Pink = Bad

Comments Welcome!

About

You

About

You

Meet your neighbors!

About

You

Meet your neighbors!

• Name
• Where you're from
• What you do
• What you're excited about

History

Plain JavaScript

History

Plain JavaScript

• 👎 Hard to write
• 👎 Hard to scale

History

jQuery

History

jQuery

• 👍 Easy to write
• 👎 Hard to scale

History

MVC/MVVM

History

MVC/MVVM

• 👍 Easy to scale
• 👎 Hard to write

History

MVC/MVVM

• 👍 Easy to write
• 👎 Hard to scale

History

React

History

React

• 👍 Easy to write
• 👍 Easy to scale

React Is

Simplicity

+

Scalability

React Is

Scalable

30,000

React Is

Scalable

30,000

The number of React components in Facebook's codebase

React Is

A JavaScript library for building user interfaces

React Is

The V in MVC

React Is

The V in MVC

Angular : monolith ::

React : microlibraries

React Is

The V in MVC

Choosing between Angular and React is like choosing between buying an off-the-shelf computer and building your own with off-the-shelf parts.

React Is

Declarative

React Is

Declarative

How do you get to my house?

React Is

Declarative

Imperative code is abstracted

so that we can call it declaratively

React Is

Declarative

var kittensComingToMyParty = [];
for (var i = 0; i < kittens.length; i++) {
  var kitten = kittens[i];
  if (kitten.rsvp === true) {
    kittensComingToMyParty.push(kitten);
  }
}

React Is

Declarative

var kittensComingToMyParty = [];
for (var i = 0; i < kittens.length; i++) {
  var kitten = kittens[i];
  if (kitten.rsvp === true) {
    kittensComingToMyParty.push(kitten);
  }
}

var kittensComingToMyParty = kittens.filter(
  kitten => kitten.rsvp === true);

React Is

Declarative

Declarative views make your code more predictable and easier to debug.

React Is

Component-Based

React Is

Component-Based

Build encapsulated components that manage their own state, then compose them to make complex UIs.

JavaScript

1. npm

Node Package Manager

JavaScript

npm

JavaScript

2. webpack

JavaScript

3. ES-modern

ES6+, ES2015+, ...

Components

The "Component" Mindset

Components

Exercise 2

Identify Components

Draw the boundaries of individual components on each page

Components

Suggestions

Components

Suggestions

Favor small components

Components

Suggestions

Components are more about isolation than reuse

Components + React

Components Are Functions

Components + React

Component Functions

import React from 'react';
function FriendsList {
  // ...Details about this component
}

Components + React

Pure Functions

function add(a, b) {
  return a + b;
}

Components + React

Pure Functions

function add(a, b) {
  return a + b;
}

Pure 😊

Components + React

Pure Functions

function now() {
  return new Date();
}

Components + React

Pure Functions

function now() {
  return new Date();
}

Impure 😟

Components + React

Pure Functions

function Friend() {
  this.x = this.x - 1;
}

Components + React

Pure Functions

function Friend() {
  this.x = this.x - 1;
}

Impure 😟

Components + React

Inputs

Components + React

Inputs

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Components + React

Inputs

props

function Friend(props) {
   console.log(props.name, props.url);
}

Components + React

Output

Components + React

Output

React.createElement()

Components + React

Output

createElement()

function Friend() {
  return React.createElement('div');
}

Components + React

Output

createElement()

function Friend() {
  return React.createElement('div');
}

<div />

Components + React

Output

createElement()

function Friend() {
  return React.createElement('button');
}

<button />

Components + React

Output

createElement()

function Friend() {
  return React.createElement('div', { id: 'friend-wrapper' });
}

<div id="friend-wrapper" />

Components + React

Output

createElement()

function Friend() {
  return React.createElement('div', { id: 'friend-wrapper' }, 'Hi!');
}

<div id="friend-wrapper">Hi!</div>

Components + React

Output

createElement()

function Friend(props) {
  return React.createElement(
    'div',
    { id: 'friend-wrapper'},
    props.name
  );
}

<div id="friend-wrapper">Potatoes</div>

Components + React

Output

createElement()

function Friend(props) {
  if (props.name === 'Potatoes') {
    return React.createElement('div', null, 'We`re best friends!');
  }
  return React.createElement('div', null, 'We`re not best friends.');
}

Components + React

Output

createElement()

function Friend(props) {
  if (props.name === 'Potatoes') {
    return React.createElement('div', null, 'We`re best friends!');
  }
  return React.createElement('div', null, 'We`re not best friends.');
}

<div>We`re best friends!</div>

Components + React

Output

createElement()

function Friend(props) {
  if (props.name === 'Potatoes') {
    return React.createElement('div', null, 'We`re best friends!');
  }
  return React.createElement('div', null, 'We`re not best friends.');
}

<div>We`re best friends!</div>

<div>We`re not best friends.</div>

Components + React

Output

createElement()

function Friend(props) {
  return React.createElement(
    'div',
    null,
    React.createElement('h1', null, 'Hello, ' + props.name)
  );
}

<div>
  <h1>Hello, Potatoes</h1>
</div>

Components + React

Output

createElement()

<div id="friend">
  <div id="title">
    <h1>Potatoes</h1>
    <h2>4 months</h2>
  </div>
  <div id="photo">
    <a href="/friends/potatoes">
      <img src="/friends/potatoes/image" alt="Potatoes" />
    </a>
  </div>
</div>

Components + React

Output

JSX

Components + React

Output

JSX

JSX is an XML-like syntax extension to ECMAScript without any defined semantics.

Components + React

Output

JSX

function Friend() {
  return React.createElement('div');
}

Components + React

Output

JSX

function Friend() {
  return React.createElement('div');
}

function Friend() {
  return <div />;
}

Components + React

Output

JSX

function Friend(props) {
  return React.createElement(
    'div',
    null,
    React.createElement('h1', null, 'Hello, ' + props.name)
  );
}

Components + React

Output

JSX

function Friend(props) {
  return React.createElement(
    'div',
    null,
    React.createElement('h1', null, 'Hello, ' + props.name)
  );
}

function Friend(props) {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
    </div>
  );
}

Components + React

Output

JSX

React.createElement Is Verbose

Components + React

Output

JSX

function Friend(props) {
  return (
    <div id="friend">
      <div id="title">
        <h1>{props.name}</h1>
        <h2>{props.age}</h2>
      </div>
      <div id="photo">
        <a href={'/friends/' + props.id}>
          <img src={props.profileImageUrl} alt={props.name} />
        </a>
      </div>
    </div>
  );
}

Components + React

Output

JSX

Optional

Components + React

Output

JSX

Separation Of Concerns

Components + React

Output

JSX

Browsers Just Don't Understand

Components + React

Output

JSX

function Friend(props) {
  return (
    <div id="friend">
      <div id="title">
        <h1>{props.name}</h1>
        <h2>{props.age}</h2>
      </div>
      <div id="photo">
        <a href={'/friends/' + props.id}>
          <img src={props.profileImageUrl} alt={props.name} />
        </a>
      </div>
    </div>
  );
}

Components + React + JSX

A component can return 5* things

Components + React + JSX

Can return

1. Element/React Component

Components + React + JSX

Can return

1. Element/React Component

function Friend(props) {
  return (
    <div>
      {props.name}
    </div>
  );
}

Components + React + JSX

Can return

1. Element/React Component

function Friend(props) {
  return (
    <FriendImage friend={props.friend} />
  );
}

Components + React + JSX

Can return

2. Array

Components + React + JSX

Can return

2. Array

function Friend(props) {
  return [
    <FriendImage friend={props.friendA} />,
    <FriendImage friend={props.friendB} />,
  ]
}

Components + React + JSX

Can return

2. Array

function Friend(props) {
  return props.friends.map(friend =>
    <Friend name={friend.name} />
  );
}

Components + React + JSX

Can return

3. Fragment

Components + React + JSX

Can return

3. Fragment

import React, { Fragment } from 'react';
function Friend(props) {
  return (
    <Fragment>
      <FriendImage friend={props.friendA} />
      <FriendImage friend={props.friendB} />
    </Fragment>
  );
}

Components + React + JSX

Can return

3. Fragment

import React from 'react';
function Friend(props) {
  return (
    <>
      <FriendImage friend={props.friendA} />
      <FriendImage friend={props.friendB} />
    </>
  );
}

Components + React + JSX

Can return

4. String/Number

Components + React + JSX

Can return

4. String/Number

function Friend(props) {
  return props.name;
}

Components + React + JSX

Can return

5. null

Components + React + JSX

Can return

5. null

function Friend() {
  return null;
}

Components + React + JSX

Can return

5. null

function Friend(props) {
  if (props.isLoading) {
    return null;
  }
  return <div>{props.name}</div>
}

Components + React + JSX

Common Errors

Components + React + JSX

Common Errors

Component Names Must Be Capitalized

Components + React + JSX

Common Errors

Components Must Return Something

Components + React + JSX

Common Errors

Components Must Return Something

function Friend(props) {
  <div>{props.name}</div>;
}

Components + React + JSX

Common Errors

Components Must Return Something

function Friend(props) {
  return <div>{props.name}</div>;
}

Components + React + JSX

Common Errors

Components Must Return Something

export default function(props) {
  return
    <div>
      {props.name}
    </div>;
}

Components + React + JSX

Common Errors

Components Must Return Something

export default function(props) {
  return (
    <div>
      {props.name}
    </div>
  );
}

Props

Should Never Be Modified

Props

Should Never Be Modified

function Friend(props) {
  props.name = 'Mr. Cat The Mystery Cat';
  return <div>{props.name}</div>
}

Props

Syntax

Props

Syntax

function Friend(props) {
  if (props.isLoading) {
    return null;
  }
  return <div>{props.name}</div>;
}

Props

Syntax

function Friend(props) {
  const { isLoading, name } = props;
  if (isLoading) {
    return null;
  }
  return <div>{name}</div>
}

Props

Syntax

function Friend({ isLoading, name }) {
  if (isLoading) {
    return null;
  }
  return <div>{name}</div>
}

Props

Default Props

Props

Default Props

function FriendProfile({ name, image }) {
  return <img alt={name} src={image} />
}
FriendProfile.defaultProps = {
  image: 'http://placekitten.com/200'
}

Props

Default Props

function FriendProfile(
  {
    name,
    image = 'http://placekitten.com/200'
  }
) {
  return <img alt={name} src={image} />
}

Props

Children

Props

Children

function Title({ children }) {
  return <h1 id="title">{children}</h1>;
}

Props

Children

function Title({ children }) {
  return <h1 id="title">{children}</h1>;
}

<Title>Hello, friends!</Title>

Props

Children

function Title({ children }) {
  return <h1 id="title">{children}</h1>;
}

<Title>Hello, friends!</Title>

<h1 id="title">Hello, friends!</h1>

Props

Children

Composition

Props

Prop Validation

Props

PropTypes

Props

PropTypes

Optional

Props

PropTypes

npm install --save prop-types

Props

PropTypes

import propTypes from 'prop-types';
function FriendProfile({ name, image }) {
  return <img alt={name} src={image} />;
}
FriendProfile.propTypes = {
  name: propTypes.string.isRequired,
  image: propTypes.string.isRequired,
}

Props

PropTypes

Friends.propTypes = {
  friends: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      name: PropTypes.string.isRequired,
    })
  ).isRequired,
};

Props

PropTypes

Validate At Run-Time

Props

PropTypes

index.js:1446 Warning: Failed prop type: The prop `age` is
  marked as required in `FriendProfile`, but its value is `undefined`.
    in FriendProfile (at Exercise.js:10)
    in Friends (at Exercise.js:5)
    in Exercise (at App.js:13)
    in div (at App.js:12)
    in div (at App.js:7)
    in App (at exercise-6/index.js:6)

Props

Suggestions

Props

Suggestions

Turn off propType validation in production

Props

Deeper Learning

Props

Deeper Learning

TypeScript

interface FriendProfileProps {
  name: string;
  image: string;
}
function FriendProfile(props: FriendProfileProps) {
  const { name, image } = props;
  return <img alt={name} src={image} />;
}

Props

Deeper Learning

Flow

type FriendProfileProps = {
  name: string;
  image: string;
}
function FriendProfile(props: FriendProfileProps) {
  const { name, image } = props;
  return <img alt={name} src={image} />;
}

CSS

Styles Go With Components

CSS

Method 1: Component CSS Files

CSS

Component CSS Files

.friend {
  color: blueviolet;
  border-bottom: 1px solid blueviolet;
}

import './friend.css';
function Friend({ name }) {
  return <div className="friend">{name}</div>
});

CSS

Method 2: CSS Modules

https://github.com/css-modules/css-modules

CSS

CSS Modules

.friend {
  color: blueviolet;
  border-bottom: 1px solid blueviolet;
}

import styles from './friend.css';
function Friend({ name }) {
  return <div className={styles.friend}>{name}</div>
}

CSS

CSS Modules

.Friend__friend__31BtE {
  color: blueviolet;
  border-bottom: 1px solid blueviolet;
}

<div class="Friend__friend__31BtE">Mr. Turtle</div>

CSS

Method 3: Styled Components

styled-components.com

CSS

Styled Components

import styled from 'styled-components';
const brandColor = 'blueviolet';
const StyledFriend = styled.div`
  color: ${brandColor};
  border-bottom: 1px solid ${brandColor};
`;
function Friend({ name }) {
  return <StyledFriend>{name}</StyledFriend>;
}

CSS

Styled Components

.31bte {
  color: blueviolet;
  border-bottom: 1px solid blueviolet;
}

<div class="31BtE">Mr. Turtle</div>

CSS

Deeper Learning

CSS

Suggestions

CSS

Suggestions

Find the way that works for you, and do it unapologetically

CSS

Suggestions

Separation Of Concerns

CSS

Suggestions

Styling Belongs To Your Components

Routing

React Router

https://reacttraining.com/react-router/

Routing

React Router

Declarative

Routing

React Router

Declarative

import { BrowserRouter, Route } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Route exact path="/" component={FriendsList} />
        <Route path="/lists/:id" component={ListDetail} />
        <Route path="/friends/:id" component={FriendDetail} />
      </div>
    </BrowserRouter>
  );
}

Routing

React Router

Routes Are Components

Routing

React Router

Routes Are Components

import { BrowserRouter, Route } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Route exact path="/" component={FriendsList} />
        <Route path="/lists/:id" component={ListDetail} />
        <Route path="/friends/:id" component={FriendDetail} />
      </div>
    </BrowserRouter>
  );
}

Routing

React Router

Routes Are Rendered Dynamically

Routing

React Router

Routes Are Rendered Dynamically

import { BrowserRouter, Route } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Route exact path="/" component={FriendsList} />
        <Route path="/lists/:id" component={ListDetail} />
        <Route path="/friends/:id" component={FriendDetail} />
      </div>
    </BrowserRouter>
  );
}

Routing

React Router

<BrowserRouter>

import { BrowserRouter, Route } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Route exact path="/" component={FriendsList} />
        <Route path="/lists/:id" component={ListDetail} />
        <Route path="/friends/:id" component={FriendDetail} />
      </div>
    </BrowserRouter>
  );
}

Routing

React Router

<Route>

import { BrowserRouter, Route } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Route exact path="/" component={FriendsList} />
        <Route path="/lists/:id" component={ListDetail} />
        <Route path="/friends/:id" component={FriendDetail} />
      </div>
    </BrowserRouter>
  );
}

Routing

React Router

<Route>

path

<Route
  path="/"
  component={FriendsList}
  exact
  />

Routing

React Router

<Route>

path

<Route
  path="/"
  component={FriendsList}
  exact
  />

<Route
  path="/lists/:id"
  component={ListDetail}
  />

Routing

React Router

<Route>

component

<Route
  path="/lists/:id"
  component={ListDetail}
  />

Routing

React Router

<Route>

exact

<Route
  path="/"
  component={FriendsList}
  exact
  />

Routing

React Router

<Link>

import { Link } from 'react-router-dom';
function FriendInList({ friend }) {
  return <Link to={'/friends/' + friend.id}>{friend.name}</Link>;
}

Routing

React Router

<NavLink>

import { NavLink } from 'react-router-dom';
function FriendInList({ friend }) {
  return (
    <header>
      <NavLink to={'/'}>Home</NavLink>
      <NavLink to={'/friends'}>Friends</NavLink>
      <NavLink to={'/lists'}>Lists</NavLink>
    </header>
  );
}

Routing

Suggestions

Routing

Deeper Learning

Routing

Deeper Learning

Transitions

Routing

Deeper Learning

Reach Router

https://reach.tech/router

State

State Is Passed Into Child Components As Props

State

Hooks

State

Hooks

Hooks are functions you can use in a Component to perform impure actions from a pure function.

State

Hooks

useState

useEffect

useReducer

useMemo

...

State

useState

useState

function FriendCounter() {
  const state = useState(99);
  const count = state[0];
  const setCount = state[1];
  return (
    <div>
      <h1>{count}</h1>
    </div>
  );
}

useState

function FriendCounter() {
  const [count, setCount] = useState(99);
  return (
    <div>
      <h1>{count}</h1>
    </div>
  );
}

useState

function FriendCounter() {
  const [count, setCount] = useState(99);
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)} />
    </div>
  );
}

State

Suggestions

State

Suggestions

Only call hooks at the top level

State

Suggestions

Elevate State

State

Suggestions

Managing Many State Properties

State

Suggestions

Many State Properties

function FriendForm() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  // ...
}

State

Suggestions

Many State Properties

function FriendForm() {
  const [firstName, setFirstName] = useState('');
  const [middleInitial, setMiddleInitial] = useState('');
  const [lastName, setLastName] = useState('');
  const [nickname, setNickname] = useState('');
  const [age, setAge] = useState(0);
  // ...
}

State

Suggestions

Many State Properties

Custom Hook

function useFriendForm() {
  const [firstName, setFirstName] = useState('');
  // ...
  return { firstName, middleInitial, ... }
}
function FriendForm() {
  const form = useFriendForm();
  // ...
}

State

Suggestions

Many State Properties

External Library

Formik

Side Effects

useEffect

Side Effects

useEffect

function Component(props) {
  useEffect(
    // arg 1: a function
    () => {
      A; // what to do when effect fires
      return () => {
        B; // what to do to clean up effect
      }
    },
    // arg 2: an array
    [ C ] // variables which should prompt effect to re-fire when changed
  );
  return ...
}

Side Effects

useEffect

Loading Data

import callApi from './callApi';
function DetailItem(props) {
  const [item, setItem] = useState({});
  useEffect(() => {
    async function load() {
      const item = await callApi(props.id);
      setItem(item);
    }
    load();
  }, []);
  return ( ... )
}

Side Effects

useEffect

Charting

function FriendsChart(props) {
  useEffect(() => {
    const graph = graphingLibrary.init(props.data);
    return () => {
      graph.destroy();
    };
  }, []);
  return ( ... )
}

Side Effects

useEffect

WebSockets

function Chat(props) {
  useEffect(() => {
    socket.emit('join', { id: props.friendId });
    return () => {
      socket.emit('leave', { id: props.friendId });
    }
  }, [ props.friendId ])
  return ( ... )
}

Side Effects

Suggestions

Side Effects

Suggestions

You Can Run Multiple Effects

Side Effects

Suggestions

Multiple Effects

function Component() {
  useEffect(() => {
    // Load Data
  });
  useEffect(() => {
    // Charting
  });
  useEffect(() => {
    // Websockets
  });
}

Application State

Prop Drilling

Application State

Context

Application State

Context

createContext()

const UserContext = React.createContext();

Application State

Context

Provider

import UserContext from './user-context.js';
function UserProvider({ children }) {
  const user = useUser(); // however you get the logged in user
  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
}

Application State

Context

Provider

import UserContext from "./user-context.js"
function UserProvider({children}) {
  const user = ... // however you get the logged in user
  const handleUserChanged = ... // however you change the logged in user
  return (
    <UserContext.Provider
      value={{
        user: user,
        onUserChanged: handleUserChanged,
      }}
    >
      {children}
    </UserContext.Provider>
  );
}

Application State

Context

The Top Of Your Tree

import UserProvider from './user-provider.jsx';
function App() {
  return (
    <UserProvider>
      <MyComponentTree />
    </UserProvider>
  );
}

Application State

Context

Consumer

import React, { useContext } from 'react';
function UserName() {
  const value = useContext(UserContext);
  return <div>{value.user.name}</div>;
}

Application State

Context

Consumer

function CurrentUser() {
  const value = useContext(UserContext);
  return (
    <div>
      Current User: {value.userName}
      <button onClick={value.onUserChanged}>Change User</button>
    </div>
  );
}

Application State

Deeper Learning

Application State

Deeper Learning

Redux

Redux is a predictable state container for JavaScript apps.

Application State

Deeper Learning

Mobx

Simple, scalable state management

Application State

Suggestions

Application State

Suggestions

Use The Right Tool

Application State

Suggestions

Read The Hooks Docs

reactjs.org/docs/hooks-intro.html

Application State

Suggestions

react-use

streamich.github.io/react-use

Legacy Components

React.Component

Legacy Components

React.Component

import React from 'react';
class FriendDetail extends React.Component {
  // ...Details about this component
}

Legacy Components

render()

Legacy Components

render()

class FriendDetail extends React.Component {
  render() {
    return <div>...</div>;
  }
}

Legacy Components

Props

Legacy Components

Props

class FriendDetail extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.name}</h1>
      </div>
    );
  }
}

Legacy Components

Suggestions

Legacy Components

Suggestions

Don't Rewrite Everything

Testing

Jest

Complete and ready to set-up JavaScript testing solution. Works out of the box for any React project.

Testing

Jest

import aFunctionUnderTest from './a-function-under-test.js';
describe('A set of tests', () => {
  it('does a certain thing', () => {
    const result = aFunctionUnderTest();
    expect(result).toEqual('a value');
  });
});

Testing

Jest

Matchers (Assertions)

expect(a).toEqual(b);
expect(a).not.toEqual(b);
expect(a).toBeGreaterThan(b);
expect(a).toBeNull();
expect(a).toBeUndefined();

Testing

react-testing-library

Simple and complete React DOM testing utilities that encourage good testing practices.

Testing

react-testing-library

2. Find Elements

Testing

react-testing-library

2. Find Elements

    const context = render(<FriendDetail ... />);
    const loadingText = context.queryByText('Loading...');

Testing

react-testing-library

2. Find Elements

    const context = render(<FriendDetail ... />);
    const loadingText = context.queryByText('Loading...');

    const context = render(<FriendDetail ... />);
    const friendImage = context.queryByAlt('Mr. Cat The Mystery Cat');

Testing

react-testing-library

2. Find Elements

    const context = render(<FriendDetail ... />);
    const loadingText = context.queryByText('Loading...');

    const context = render(<FriendDetail ... />);
    const friendImage = context.queryByAlt('Mr. Cat The Mystery Cat');

    const context = render(<FriendDetail ... />);
    const loadingText = context.queryByTestId('friend-container');

Testing

react-testing-library

3. Fire Events

import { render, fireEvent } from 'react-testing-library';
describe('...', () => {
  it('...', () => {
    const context = render(<FriendDetail ... />);
    const button = context.queryByText('Details >');
    fireEvent.click(button);
  });
});

Testing

Deeper Learning

Testing

Deeper Learning

Enzyme

http://airbnb.io/enzyme/

Testing

Deeper Learning

Jest-DOM

https://github.com/gnapse/jest-dom

Testing

Suggestions

Testing

Suggestions

Async Helpers

  it('shows details after clicking button', async () => {
    const context = render(<FriendDetail />);
    const button = context.getByText('Details');
    fireEvent.click(button);
    const details = await waitForElement(() =>
      context.getByText('snuggles like a champion'));
    // ...
  });

Testing

Suggestions

Async Helpers

  async wait
  async waitForElement
  async waitForDomChange

Testing

Suggestions

Extract Complexity & Logic

Testing

Suggestions

Test What The User Experiences

Not Implementation

Testing

Suggestions

Write Tests For Future You

Good Practices

create-react-app

bit.ly/create-react-app

Good Practices

Thinking In React

reactjs.org/docs/thinking-in-react.html

Good Practices

Thinking In React

Step 1: Break The UI Into A Component Hierarchy

Good Practices

Thinking In React

Step 1: Break The UI Into A Component Hierarchy

Step 2: Build A Static Version in React

Good Practices

Thinking In React

Step 1: Break The UI Into A Component Hierarchy

Step 2: Build A Static Version in React

Step 3: Identify The Minimal (but complete) Representation Of UI State

Good Practices

Thinking In React

Step 1: Break The UI Into A Component Hierarchy

Step 2: Build A Static Version in React

Step 3: Identify The Minimal (but complete) Representation Of UI State

Step 4: Identify Where Your State Should Live

Good Practices

Thinking In React

Step 1: Break The UI Into A Component Hierarchy

Step 2: Build A Static Version in React

Step 3: Identify The Minimal (but complete) Representation Of UI State

Step 4: Identify Where Your State Should Live

Step 5: Add Inverse Data Flow

Good Practices

Isolate Complexity

Good Practices

Break Into Pieces

Good Practices

Code That Changes Together Should Live Together