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

reactjs.org

Isolation of components leads to reusability

The most important contribution from React is thinking in terms of components

Conceptually, components are like JavaScript functions. They accept arbitrary inputs... and return React elements describing what should appear on the screen.

reactjs.org

[a component function...] should be pure, meaning that it does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.

reactjs.org

A pure function:

• is deterministic

• does not have side-effects

Pure 👍🏽

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

Impure 👎

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

Impure 👎🏽

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

import React from 'react';

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

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

<div />

function Artist(props) {
  return React.createElement(
    'div',
    { id: 'artist-wrapper' },
    'Hi!'
  );
}

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

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

<div id="artist-wrapper">Andy Warhol</div>

function Artist(props) {
  return React.createElement(
    'div',
    null,
    React.createElement('h1', null, 'Artworks by ' + props.name)
  );
}

<div>
  <h1>Artworks by Andy Warhol</h1>
</div>

<div id="artist">
  <div id="bio">
    <h1>Andy Warhol</h1>
    <h2>American, 1928 - 1987</h2>
  </div>
  <div id="photo">
    <a href="/artists/andy-warhol">
      <img src="/artists/andy-warhol/image" alt="Andy Warhol" />
    </a>
  </div>
</div>

function Artist(props) {
  return React.createElement(
    'div',
    { id: 'artist' },
    React.createElement(
      'div',
      { id: 'bio' },
      React.createElement('h1', null, props.name),
      React.createElement('h2', null, props.origin + ', ' + props.lifespan)
    ),
    React.createElement(
      'div',
      { id: 'photo' },
      React.createElement(
        'a',
        {
          href: '/artists/' + props.id,
        },
        React.createElement('img', {
          src: props.profileImageUrl,
          alt: props.name,
        })
      )
    )
  )
}

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

facebook.github.io/jsx/

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

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

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

function Artist(props) {
  return (
    <div id="artist-wrapper">
      {props.name}
    </div>
  )
}

function Artist(props) {
  return React.createElement(
    'div',
    { id: 'artist' },
    React.createElement(
      'div',
      { id: 'bio' },
      React.createElement('h1', null, props.name),
      React.createElement('h2', null, props.origin + ', ' + props.lifespan)
    ),
    React.createElement(
      'div',
      { id: 'photo' },
      React.createElement(
        'a',
        {
          href: '/artists/' + props.id,
        },
        React.createElement('img', {
          src: props.profileImageUrl,
          alt: props.name,
        })
      )
    )
  )
}

function Artist(props) {
  return (
    <div id="artist">
      <div id="bio">
        <h1>{props.name}</h1>
        <h2>{props.origin}, {props.lifespan}</h2>
      </div>
      <div id="photo">
        <a href={'/artists/' + props.id}>
          <img src={props.profileImageUrl} alt={props.name} />
        </a>
      </div>
    </div>
  )
}

Separation Of Concerns

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both.

reactjs.org

function Artist(props) {
  if (props.name === 'Andy Warhol') {
    return <div>I like your soup cans!</div>;
  }
  return <div>You make nice art.</div>;
}

Components in JSX lead to declarative code

Q: How do you get to my house?

var artistsComingToMyParty = [];
for (var i = 0; i < artists.length; i++) {
  var artist = artists[i];
  if (artist.rsvp === true) {
    artistsComingToMyParty.push(artist);
  }
}

var artistsComingToMyParty = artists.filter(
  artist => artist.rsvp === true);

Imperative code is abstracted so that we can call it declaratively

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

reactjs.org

Hooks

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

useState

useState

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

useState

useReducer

useContext

useEffect

function ArtistDetails(props) {
  const [artist, setArtist] = useState(null)

  useEffect(() => {
    const apiArtist = loadArtistFromApi(props.artistId)
    setArtist(apiArtist)
  }, [])

  return ( ... )
}

useEffect

function Chat(props) {
  useEffect(() => {

    socket.emit('join', { id: props.friendId });

    return () => {
      socket.emit('leave', { id: props.friendId });
    }

  }, [ props.friendId ])

  return ( ... )
}

Closures

A closure is the combination of a function and the lexical environment within which that function was declared.

developer.mozilla.org

useEffect

function Chat(props) {
  useEffect(() => {

    socket.emit('join', { id: props.friendId });

    return () => {
      socket.emit('leave', { id: props.friendId });
    }

  }, [ props.friendId ])

  return ( ... )
}

Suspense

Suspense lets components “wait” for something before rendering.

reactjs.org

const ArtistGraphs = React.lazy(() => import('./ArtistGraphs'));

function Artist() {
  return (
    <React.Suspense fallback={<Loading />}>
      <ArtistGraphs />
    </React.Suspense>
  );
}

Backwards compatible

Hot-reloading

webpack

babel

function Artists({ artists }) {
  return artists.map(artist => <ArtistDetail {...artist} />);
}

TypeScript

TypeScript

interface ArtistProps {
  name: string,
  origin: string,
  url: string
}

function Artist(props: ArtistProps) {
  return (
    <div id="artist">
      <h1>
        <a href={props.url}>{props.name}</a>
      </h1>
      <h2>{props.origin}</h2>
    </div>
  )
}

TypeScript

Prettier

React Dev Tools

Performance

Reconciliation

Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

jestjs.io

Easy setup

Interactive watch mode

Great error messages

describe('findSimilarArtists', () => {
  it('finds similar artists for Andy Warhol', () => {
    const result = findSimilarArtists('Andy Warhol');

    expect(result[0]).toEqual('Robert Indiana');
  });
});

expect(a).toEqual(b);

expect(a).not.toEqual(b);

expect(a).toBeGreaterThan(b);

expect(a).toBeNull();

expect(a).toBeUndefined();

react-testing-library

describe('ArtistDetail', () => {
  it('renders something', () => {

    const context = render(
      <ArtistDetail artist={...} />
    );
​
​
​
​
​
​
​
  });
});

describe('ArtistDetail', () => {
  it('renders something', () => {

    const context = render(
      <ArtistDetail artist={...} />
    );

    const button = context.queryByText('Details');
    fireEvent.click(button);
​
​
​
​
  });
});

describe('ArtistDetail', () => {
  it('renders something', () => {

    const context = render(
      <ArtistDetail artist={...} />
    );

    const button = context.queryByText('Details');
    fireEvent.click(button);

    expect(context.getByTestId('artist-details'))
      .toHaveTextContent('Andy Warhol')

  });
});

create-react-app

Set up a modern web app by running one command

facebook.github.io/create-react-app/

> create-react-app my-app

Thinking In React

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