A Gentle Introduction to ReactJS

Linus Falck-Ytter

Vermont Code Camp

Linus Falck-Ytter

Software Developer @ Liberty Mutual

@lifayt

github.com/lifayt

lifayt@gmail.com

Thanks to our Sponsors!

In the beginning, there was nothing.

In the beginning, there was nothing.*

*Except a lot of ways to make websites that generally worked pretty good, most of the time.

Programmers said, 'Let there be JavaScript Libraries!'

And there were JavaScript Libraries. There was still nothing* but you could write a whole lot more code.

*Except a lot of ways to make websites that generally worked pretty good, most of the time.

ReactJS

Latest: v16.5.0

Initial Release: 3/2015

Rationalization, History, and Benefits:

  • Addresses syncing Client UI with Client State.
  • Plays nice with existing systems for keeping track of and managing Scope and Namespaces.
  • Provides a laundry list of beneficial features like a unified way of interacting with the DOM, componentizing UI, performance, etc.

0: Miscellany

1: Design
2: Components

3: JSX

4: Reactivity
5: Think React

0: ES6, Pipelines & Miscellany

import/export

class (super, class-field)

arrow functions ( () => {} )

0: ES6, Pipelines & Miscellany

React is it's own separate skill from setting up react

Use create-react-app

Everyone benefits from learning webpack/parcel

Familiarize yourself with the wider JS ecosystem

Don't sweat the weird stuff

1: Design

A paradigm:

  • State is stored in the DOM
  • Namespace & scope tied to common lib (jQuery)
  • New modules exposed as plugins

​A different paradigm:

  • State stored in-memory in JS Objects
  • Namespace & scope tied to ES Modules
  • New modules exposed on npm registry                

1: Design

Why do JS 'frameworks' exist?

  • Code organization?
  • State management?
  • Scoping changes lead to changes in architecture? 
  • Components?

React is an
opinionated
library for doing web stuff

2: Components

Like most JS frameworks/libraries, React is built around the idea of reusable components.

All components are similar to JavaScript functions (although they can be both JavaScript functions and JavaScript classes)

Components represent independent, reusable slices of your UI and application

2: Components

Sandbox!

2: Components

  • Components as Functions
  • Components as Classes
  • Components as HTML
  • Components as User Components
  • Component Properties
  • Component Naming

3: JSX

  • Not HTML
  • Not a string
  • Not even React (although included in React by default)             
  • JSX is a syntax extension to JavaScript
  • JSX supports all of JavaScript                  
React embraces the fact that rendering logic is inherently coupled with other UI 
logic: how events are handled, how the state changes over time, and how the data 
is prepared for display.

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.

https://reactjs.org/docs/introducing-jsx.html

3: JSX

  • Not required to write React
  • Elements are not Components - they are trees that can contain either elements or Components.
  • Any valid JavaScript expression can be embedded inside of JSX
  • JSX turns into valid JavaScript expressions, so can be used inside statements
  • The browser does not see JSX - it sees the compiled version rendered as React.CreateElement calls.

4: Structure

  • Classes extends the React provided class Component              
  • Classes have props as instance properties
  • Classes can be customized and configured
  • Events are wrapped by React for performance
  • Events are passed in as function references       
  • Events are instance properties on a class

4: Structure

  • Events:
  • One-way data binding vs Two-way data binding
  • One way:
  • Field update -> Event fires -> State update -> Field displays value
  • Two way:
  • Event updates <-> Event listeners <-> State updates
  • The value of an input element is controlled by the render function - the only way to update the value is by updating the state

5: Reactivity

  • Lifecycle
  • Component Story                                                                              
  • React 'reacts'!
  • Really it 'schedules'...
  • DOM Interpreter

5: Reactivity

https://medium.com/@baphemot/understanding-react-react-16-3-component-life-cycle-23129bc7a705

5: Reactivity - Mounting

constructor

​Default State, maybe some calculation to initialize state

static getDerivedStateFromProps

Derive state from props. rare.

render

Initial render of component. Remember to have default cases set up if you're waiting for data!

componentDidMount

Side effects: Fetch data, interact with DOM that was rendered, etc.

5: Reactivity - Updating

static getDerivedStateFromProps

Derive state from props. rare.

shouldComponentUpdate

Performance optimization - should I re-render?

render

Batched for optimization

getSnapshotBeforeUpdate

Capture some information about the DOM (scroll position, screen size). Useful for animations.

componentDidUpdate

​Operate on DOM, fetch data, set state. rare.

5: Reactivity - Unmounting

componentWillUnmount

Clean up DOM, component. rare.

5: Reactivity - Deprecated

componentWillMount

Prep stuff for mounting - use constructor.

componentWillUpdate

Just avoid.

​componentWillReceiveProps

Derive new state from props - use a combination of getDerivedStateFromProps and componentDidUpdate.

 

These methods are DEPRECATED and marked as UNSAFE__ - avoid them in new code, refactor in old code.

6: Think React

Thinking in React

ex: https://nytimes.com

6: Think React

6: Think React - Demo Site

Questions?

Made with Slides.com