Getting Started With React

# Getting Started With React

.col.col-7.about.left.centered[
## Steven Hicks
### <i class="el el-twitter"></i>  [@pepopowitz](http://twitter.com/pepopowitz)
### <i class="el el-globe-alt"></i>  [stevenhicks.me](https://stevenhicks.me)
### <i class="el el-envelope"></i>  steven.hicks@centare.com
### <i class="el el-slideshare"></i>  [bit.ly/what-why-how-react](http://bit.ly/what-why-how-react)
]

???

**Thanks:**

* Chicago Code Camp
* Sponsors?
* You all for coming

**Contact Info**
* My name is Steve
* @pepopowitz
* slides online

---
class: middle

.col.col-6.profile[
![Me](images/steven-hicks.jpg)
]

.col.col-4[
# Steven Hicks
]

???

That's me according to my 6 year old daughter Olivia
---
class: middle

.col.col-6.profile[
![Me](images/steven-hicks.jpg)
]

.col.col-4[
# Steven Hicks

## Has wings instead of arms
]

???

...but more pertinent...

---

.col.col-6.profile[
![Me](images/steven-hicks.jpg)
]

.col.col-4[
# Steven Hicks

## Has wings instead of arms

]

???

I'm a full-stack developer at Centare

Based in Milwaukee

---

.col.col-6.profile[
![Me](images/steven-hicks.jpg)
]

.col.col-4[
# Steven Hicks

## Has wings instead of arms

## Web developer for nearly 20 years

]

???

And in that time, I have built the front-end of web apps in many styles.

---
class: content

## Ways that I have built front-ends

# Plain JavaScript

???

This was hard.

Lots of cross-browser issues

---
class: content

## Ways that I have built front-ends

# JQuery

???

Changed my life

But hard to maintain

---
class: content

## Ways that I have built front-ends

# Knockout

???

Introduced me to MVVM

& Templates

But I quickly moved to

---
class: content

## Ways that I have built front-ends

# Angular 1

???

Powerful

But Complicated

---
class: content

## Ways that I have built front-ends

# React

???

I'm currently doing almost all my development with React

and nothing has me as excited as building with React

I'm excited for all of you to come out here today to

hear my **sales pitch** on

why you should be excited about React too.
---
class: title

# What is React?

???

Before we talk about what React is,

(poll)

is anyone here using it?

---
class: content

## What is React?

# A library for building user interfaces

???

So this sounds completely stupid

Of course it is a library for building user interfaces

That's why we're using it

But there is **significance** in the **simplicity** of this statement

React is nothing more than a **UI framework**.

---
class: content

## What is React?

# The V in MVC (maybe VC)
## And nothing more

???

When you think about most modern JS frameworks,

the large majority implement an **MVC** type of pattern

Some are **MVVM**, some can't be labelled (**MV-star**)

But for the most part, you get **all three parts** - the M, the V, and the C (or whatever).

React is **unapologetic** about not being all three - **the V only**

Typically **bundled** with another framework for the M/state management

---
class: content
## What is React?

# React is Declarative

???

What does that mean?

Well, it means we write code that says **WHAT** to display

**not HOW** to display it

...

Obviously some code, at some point,

has to be written on HOW to display

---
class: content
## React is Declarative

# Imperative code is abstracted
## So we can call it declaratively

???

But we abstract the imperative code

So our app can call it declaratively.

**Example**: how to find my house.

**Imperative**: directions

**Declarative**: address

---
class: content
## React is Declarative

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

???

Why do we care?

---
class: content
## What is React?

# React is Component-Based

???

Components represent small pieces

And you assemble many small components into an app

---
class: content
## What does this look like?

.hero.centered.col.col-7[
![images/todomvc-1a.jpg](images/todomvc-1a.jpg)
]

???

It helps to look at an example of this.

---
class: content
## What does this look like?

.hero.centered.col.col-7[
![images/todomvc-2a.jpg](images/todomvc-2a.jpg)
]
---
class: content
## What does this look like?

.hero.centered.col.col-7[
![images/todomvc-3a.jpg](images/todomvc-3a.jpg)
]
---
class: content
## What does this look like?

.hero.centered.col.col-7[
![images/todomvc-4a.jpg](images/todomvc-4a.jpg)
]
---
class: content
## What does this look like?

.hero.centered.col.col-7[
![images/todomvc-5a.jpg](images/todomvc-5a.jpg)
]
---
class: content
## What does this look like?

.hero.centered.col.col-7[
![images/todomvc-6a.jpg](images/todomvc-6a.jpg)
]
---
class: content
## What does this look like?

.hero.centered.col.col-7[
![images/todomvc-7a.jpg](images/todomvc-7a.jpg)
]
---
class: content
## What does this look like?

.hero.centered.col.col-7[
![images/todomvc-8a.jpg](images/todomvc-8a.jpg)
]

???

The **deconstruction** of UI's into small components is crucial to successful React development.

---
class: content
## React is Component-Based

# Components implement a **render()** method

???

And this **render** method just **describes** what gets displayed

---
class: content
## Components implement a **render()** method

.dim-1.dim-10[
```javascript
class HelloMessage extends React.Component {
*    render() {
        return React.createElement(
            "div",
            null,
            "Hello ",
            this.props.name
            );
*    }
}
```
]

???

(Describe code)

React provides a React.createElement function

to allow us to compose our components.

We can build an entire app this way.

But there is a **better way**...

---
class: content

## React is Component-Based

# Components can be written with **JSX**

???

About here is where people who have heard a little bit about React

get turned off.

Poll: has anyone heard about JSX?

---
class: content

## JSX

# Is optional

???

**Not required**

But most people use it

And there are some **signficant advantages** to using it.

So what is it?

---
class: content

## JSX

> JSX is a faster, safer, easier JavaScript

???

Not very helpful

Main takeaway: JSX is a **superset** of JS

---
class: content, double-wide

## JSX

# What does it look like?

.leftest[
```javascript
return React.createElement(
    "div",
    null,
    "Hello ",
    this.props.name
);
```
]

???

Anyone want to describe what they see?

It looks like you got HTML in your JS

**Detour**

---
class: content

## JSX

# Separation of Concerns

???

What is SOC?

---
class: content

## Separation of Concerns

> A design principle for separating a computer program into distinct sections, such that each section addresses a separate concern

This is the definition of SOC

Defines the term using the term

So I'll rewrite it

---
class: content

## Separation of Concerns

> Different pieces of your app should mind their own business.

???

My definition

...

And many people who build web apps often define it as this...

---
class: content

## Separation of Concerns

> Keep your JS separate from your HTML

???

---
class: content

## Separation of Concerns

```javascript
class HelloMessage extends React.Component {
    render() {
        return (
            <div>
                Hello {this.props.name}
            </div>
        );
    }
}
```

???
So looking back at our example

We definitely have some HTML in our JS

But the **JS and HTML** are very much the **same concern**

They're displaying a hello message

At first glance, JSX looks like it violates SOC but it absolutely does not.

If anything, it **embraces** it.

Because now we can put everything about this component in one place.

---
class: content

## Separation of Concerns

> Keeping your HTML out of your JS is a separation of **technologies**.

???

My argument to you is that ...

...

It may go without saying, but JSX,

---
class: content
## JSX

# Browsers don't understand it

???

So it is **transpiled**

from JSX to plain-old JS

Transpilation seems like a **hassle**

But it comes with several **benefits**

---
class: content
## Benefits Of Transpiling JSX

# Universal support of newer versions of JavaScript/ECMAScript

???

i.e. Class syntax from ES2015

We don't care which browsers can understand it

because we're transpiling down to plain old JavaScript

---
class: content
## Benefits Of Transpiling JSX

# Ability to enforce linting

???

Which improves **code quality**

If you care strongly about **semicolons or no semicolons**

or **tabs vs spaces**

you can enforce that everyone on your team is following the rules

---
class: content
## Benefits Of Transpiling JSX

# Compile-time validation of our source

???

Which is really great for catching **spelling errors**

and places where you **double-declared** variables

or **didn't declare**

---
class: content

## JSX

# Is optional
## But awesome

???

JSX can be **weird** at first

But it **significantly simplifies** your code.

I'm going to use JSX in this talk,

and I think you should try it too.

---
class: content
## What is React?

# React is Component-Based

???

**Back on track**

We were talking about React components

---
class: content
## React is Component-Based

# Components receive input data (**props**) describing the current state

???

And your component decides what is shown based on the input data

If we look back at our previous example,

---

.dim-1.dim-2.dim-3.dim-4.dim-6.dim-7.dim-8.dim-9[
```javascript
class HelloMessage extends React.Component {
    render() {
        return (
            <div>
                Hello {this.props.name}
            </div>
        );
    }
}
```
]

???

We see that there is a name passed in through the props.

Now, the nice thing about props is that

there is **support** for **prop validation** through

...

---
class: content
## React is Component-Based

# Props can be validated through **PropTypes**

???

And propTypes allow you to **define a contract** for your component

---
class: content
## Props can be validated through **PropTypes**

.dim-1.dim-2.dim-3.dim-4.dim-5.dim-6.dim-7.dim-8.dim-9[
```javascript
class HelloMessage extends React.Component {
    render() {
        return (
            <div>
                Hello {this.props.name}
            </div>
        );
    }
}

HelloMessage.propTypes = {
    name: PropTypes.string.isRequired
};
```
]

???

Here's an example.

...

These PropTypes are **validated** for you **by the framework**,

and you will get an **explicit error** when you are in **violation** of the contract.

---
class: content

## React is Component-Based

# Components can manage their own state, instead of taking it via props

???

It is up to you to decide which state belongs to the **component**, and which to the **app**

---
class: content
## Components can manage their own state

.medium.dim-1.dim-6.dim-7.dim-8.dim-9.dim-10.dim-11.dim-12[
```javascript
class Counter extends React.Component {
    // 1. initialize state
    constructor(props) {
        this.state = {count: 0};
    }

// 2. render state

// 3. update state
}
```
]

---
class: content
## Components can manage their own state

.medium.dim-1.dim-2.dim-3.dim-13.dim-14.dim-15.dim-16.dim-17[
```javascript
class Counter extends React.Component {
    // 1. initialize state

// 2. render state
    render() {
        return (
            <div>
                <div>Total: {this.state.count}</div>
                <div><button onClick={this.increment}>Increment</button></div>
            </div>
        );
    }

// 3. update state
}
```
]

---
class: content
## Components can manage their own state

.medium.dim-1.dim-2.dim-3.dim-4.dim-5.dim-14[
```javascript
class Counter extends React.Component {
    // 1. initialize state

// 2. render state

// 3. update state
    increment() {
        this.setState((prevState) => {
            return {
                count: prevState.count + 1
            }
        });
    }
}
```
]

---
class: content

## React is Component-Based

# Components work best as pure functions

???

In other words, given the **same inputs**, you'd get the **same outputs**.

They make your code **easier to follow**.

When a component is managing state, it's not pure

This doesn't mean you shouldn't manage state

It means you should **isolate the state management**

So that you can write **more pure functional components**

---
class: title

# What isn't React?

---
class: content
## What Isn't React?

# Application-level state management

???

Typically handled by another framework

---
class: content
## State Management

# Flux, Redux, Mobx, etc

???

And I don't want to get too much into this conversation

Because it is a talk of its own

But there is one important thing about the state management options for React

---
class: content
## State Management

# Unidirectional flow

???

I don't have a definition

But you can guess how ridiculous it would be

---
class: content
## Unidirectional flow

![Unidirectional flow](images/unidirectionalflow.jpg)

]

???

Blue = React. Green = state mgmt

This is decidedly different from an approach like Angular,

where there is two-way binding.

...

Why do we care?

---
class: content
## Unidirectional flow

# Leads to a more predictable system

???

The **simplicity** and **predictability** of one-way data flow makes it much easier to figure out what's going on.

---
class: title

# Why would I use React?

---
class: content

## Why React?

# It is fast!

???

And you can say that for most modern javascript frameworks

What makes React fast?

---
class: content
## React is fast!

# Updating the DOM is slow

???

It is often the bottleneck in your UI

React updates the DOM efficiently

---
class: content
## React is fast!

# Virtual DOM

???

by using a Virtual DOM

A lightweight representation of the actual browser's DOM.

When a React component receives new props,

React re-renders it to the virtual DOM

---
class: content
## React is fast!

# Reconciliation (Virtual DOM diffing)

???

And then React uses a process called Virtual DOM diffing

To **identify the differences** between the DOM and the virtual DOM

And it is able to update only the DOM elements **that have changed.**

This process makes React fast!

---
class: content
## Why React?

# Compile-time checking & props validation

???

When I think about how many hours of my life I've spent thanks to a property in my view

being named differently than a property in my controller...

It makes me pretty happy.

---
class: content
## Why React?

# It's easy to understand

---
class: content
## It's easy to understand

> Components work best as pure functions

> State is managed with unidirectional flow

???

It's easy to look at a component and understand what it is doing.

There are many little things about React

that are like **little nuggets of functional programming**

---
class: content
## Why React?

# It's easy to test

???

Like previous point -

I can write a **test** that passes specific props into my component

and **reliably** see what happens.

There are also some really great **testing tools** that

make testing in React not only easy, but enjoyable.

---
class: content
## Why React?

# It's easy to collaborate

???

because you're **breaking up** your UI into **tiny components**

**devs and ux designers**/"front-end" developers

can easily **work around each other**

it is similar to how "design by contract" allows you to define how pieces will work together

then individuals can run off and build the pieces.

---
class: content
## Why React?

# It's mostly just JavaScript

---
class: content, double-stack
## It's mostly just JavaScript

```html
<ul>
    <li *ngFor="#thing of things">
        <span class="badge">{{thing.name}}</span>
    </li>
</ul>
```

???

Here's some Angular code

First off - React is hardly the first framework to ask you to put HTML & JS together

But with Angular, there's more than just HTML and JS

There's Angular syntax too

```html
<ul>
    {
        things.map(thing => (
            <li key={thing.id}>{thing.name}</li>
        ))
    }
</ul>
```
???

...

When I write this with React,

I'm using actual JS.

things.map is just a JS function on an array.

...

As a result of this....

---
class: content
## Why React?

# It has a lower learning curve

???

If you're writing components in Angular 1 and you're going to Angular 2,

that may not be true.

---
class: title

# Why wouldn't I use React?

???

Two sides to every story

---
class: content
## Why not React?

# You aren't building a SPA

???

If you're not building a full Single Page App

React isn't going to be the best option.

If you want to do "buckets of SPAs", where pages are rendered by server and hook in SP functionality

Or "sprinkles of JavaScript", where it's even less JavaScript functionality

There are better options for you.

---
class: content
## Why not React?

# ~~React changes quickly~~

???

**Funny story** - a week ago, I modified this slide to have a strikethrough

In the past year, React has **stabilized** quite a bit

Then **Friday**, they announced they were moving PropTypes to a **standalone package**

But for the most part React is **no more volatile** at this point than anything else.

---
class: content
## Why not React?

# JavaScript Fatigue

???

(poll)

JS Fatigue is a real thing

But we are feeling it because there is so much **innovation**

However - React requires you to **make many decisions** about your app

---
class: content
## JavaScript Fatigue

# Angular : Monolith :: React : Microlibraries

???

When you build with React

You are saying "yes" to the microlibrary approach to development.

If you have trouble getting libraries approved for your use, this could be a challenge.

I have seen it done in a larger, more traditional organization

---
class: content
## JavaScript Fatigue

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

.footnote[
    [Cory House](https://medium.freecodecamp.com/angular-2-versus-react-there-will-be-blood-66595faafd51)
]

???

look at screen & pause
---
class: title

# How do I learn React?

???

The short answer is...it depends

Different strokes for different folks

---
class: content, top
## How do I learn React?

# Choose your own adventure

---
class: content, top
## How do I learn React?

# Choose your own adventure

.col.col-4.left.centered[
## Tutorials
]

???

Cory House's pluralsight course

---
class: content, top
## How do I learn React?

# Choose your own adventure

.col.col-4.left.centered[
## Tutorials
## Read the source
]

???

Heard it on a podcast

These people are robots

---
class: content, top
## How do I learn React?

# Choose your own adventure

.col.col-4.left.centered[
## Tutorials
## Read the source
## **Start building stuff**
]

???

And for my money, the easiest way to get from zero to "building stuff"

is with a boilerplate or starter kit.

...

When I learned, I had to search for a starter kit.

But I have great news if you want to learn from a starter kit -

---
class: content
## Getting Started

# Create-react-app

As of about 9 months ago, there is an official one, put out by Facebook

Create-react-app is a **CLI** that gets you from

**0 to "functioning React app" in one command**.

---
class: content
## Create-react-app

# 0. Install Node

There is one requirement for using Create-react-app.

You must install Node.

---
class: content
## Create-react-app

# 1. Install!

---
class: content
## Create-react-app

# 2. Create!

---
class: content
## Create-react-app

# 3. Run!

---
class: content
## Create-react-app

# 4. Test!

---
class: content
## Create-react-app

# 5. Build!

???

This is going to build an optimized version of your app, ready for deployment.

---
class: content
## Create-react-app

# Demo!

???

1. Browse the app
2. Run the app
3. Make changes (show site updating)
    a. Change style
    b. Change component
    c. Add "footer"