Missed
Part #1?

Introduction to ReactJS

Hi, I'm JP Wallhorn

These slides will be available shortly
after this talk
I'll tweet the link out.

@Jaypi_

I have my own company

Worked with

Blue Bottle Coffee
U.S. GOV
Mobile Apps Backends

Before that I worked for ServiceLink Auction as Engineering Director

Implemented React.JS
E-Commerce Platform
(With focus on SEO)

Let us talk about
changes in ReactJS 16

These are not all changes
Just some highlights

Check out their blog
for the full changelog

This is the roadmap

READY?!

this.letsDoIt()

What is it?

It doesn't replace Redux

Share data between components

Without explicitly passing it

What does
that mean?

It's a global object

To your React Components

Why do we
need it?

So we avoid props drilling

Music Player Example

Normally you would
pass props to each
component

It's painful

This is the

Context API

in action

That's
fantastic

But how do we implement this?

Is the implementation complicated?

It's easy!

You will need
3 things

Context

Provider

Consumer

Context

FYI - You can create

Multiple Contexts

Provider

Needs to be higher in the tree than consumers

Consumer

Requires function as a child that returns JSX

Make sure you import the Context

All in One

ReactJS Official Example

That's it!

Should you implement it right away
for everything?

No!

It's good for medium sized applications

Good Use Cases:

Multi Theme Projects

Multi Language Projects

You are creating outside dependencies with this

Just make sure to keep that in mind

Simple Component

This is not a problem and straight forward

Return multiple elements
from a component

Now this happens ...

What just happened?

As you know,
you have to
wrap it into a div

Just like this

DIV, DIV, DIV

This is not ideal

Welcome to

Fragments

Previously, runtime errors during rendering

Broke your
App

You had to refresh
the whole application

By default, React 16 will
just unmount the tree
and doesn't display
the code

That's not
ideal either but...

New Lifecycle Method

Kind of like Try, Catch

ComponentDidCatch

(error, info)

Catch Block

for

Components

Error Component

Recommended way to implement this

Then you can use that
within your app

Catch Errors
in Product

Not every website uses React

Now parts of
it can be
React

For example: usage within CMS applications

Portals let you render a
bit of React-controlled
DOM outside of the parent
component

Render DOM outside of parent

Hot stuff!

Just got released!

similar to

React.PureComponent

But for
classes

Remind me. What does it do again?

Performance Boost

If the function component renders the
same result it will skip rendering

Wrap your class

export default React.memo

It will save
the results

For shallow comparison

You can control the comparison

Code
Splitting

with suspense

Previously
done with
Webpack

Now it's
built in

Before

After

This will automatically load
the bundle containing the
OtherComponent when this
component gets rendered

Cover your
base

In case OtherComponent renders first

Fallback
Component

Fallback props accepts
any React Element

You can wrap multiple components

Error Boundaries

In combination with lazy loading

Lazy with
React Router

Warning

Not supported with Server-Side-Rendering yet

Addition to Context API

Convenience API For Classes

Be warned

Only works with single context currently

Finished!

Looks like
a lot of changes?

Don't worry

Quote by Wes Bos

React is Evolving

but..

Most of these are
additions, not changes

They make our applications better!

Want more?

Read the ReactJS Blog. It contains all changes

Especially for v16.6 - Released 10/23/18

I hope this
was useful!

Feel free to ask questions