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
ReactJS

This is the roadmap

READY?!

this.letsDoIt()

What is it?

It's not a framework

JavaScript Library

With a rich community

Handling the View(MVC)
User Interface

HTML in JavaScript

1st doing it this way

JSX Support

JSX produces React “elements”

"Allows you to use
variables within
HTML code"

All files are getting
compiled into one bundle
that is getting served
to the client

The client renders the
JavaScript and puts out HTML

Used to build complex and modern UIs

Component Based Structure

App with
simple component

Stateful Component

Component

with external

plugins

Foundation

Consists of pages, components
and containers

Page,
Component,
Container

Page

A page contains
containers and components

Component

It represents a small visual
block within a page.

Breaks up dependencies

Re-usable

Stateless

(Dumb Component)

Container

A stateful component

What does
that mean?

Concerned
how things
work

Provide data
to the
behaviour

Detailed Comparison

Folder Structure

Props

Allows you to pass data from parent
(wrapping) component

Triggers UI to

re-render

when changed

State

State is used to change the component
from within rather than by parent

Also triggers re-rendering

Manipulating the state

What is this
re-rendering all about?

Here's your
new ...

Wallpaper

What's going on???

Let me show you

Component Lifeycle

React is a
Single Page Application

But ... ?

React can

also be a

Multi Page Application

React Router

Client-Side Routing

Multiple Options

Per usual

Flux

The default library by Facebook

But then
there is ...

Redux

Pretty much the final enemy

Architecture

Redux vs Flux

Context API

The new kid on the block
to avoid props drilling

Create
React
App

Worry-free starter pack

Easy installation

Structure

You are lucky
Version 2 just
got released

Newest Additions

CSS and SASS Modules

Really excited about this one

Some other additions

• Babel 7
• Webpack 4
• Jest 23
• Import SVG as React Component

Why worry-free?

No webpack
configuration needed

Let me explain what webpack is

Webpack

Personally, love everything they do

Compiles your
JavaScript code

Serves those bundles to the clients

You want
more?

Especially needed for bigger projects

Eject

WARNING! Can not be un-done

• In charge of dependencies
• Opens up webpack configuration

Learning by doing

Start typing already

Udemy
Course

ReactJS

Wes Bos Courses

React Router Training

Advanced
React
Workshop

Finished!

Quote by Wes Bos

React is Evolving

but..

Most of these are
additions, not changes

They make our applications better!

I hope this
was useful!

Any questions?