The React Single Page App

React

What is React?

React

An OSS view library built and maintained by Facebook

React

The ‘view’ is built out of components that are nestable and re-usable

React

React

React

React

React

React

React calls ‘render’ every time state or props is changed.But it’s only making DOM updates for whatever needs to

change.It does the diff for this via the vDOM – virtual DOM.

React

React

React

React

React

Complex components without composition are unwieldy.Use composition.

React

In fact, the whole Single Page App architecture is one component that composes the rest of the

app.

React

So what happens when things become really complex?

React

What happens when components need to talk to each other?

Or when the actions of Component A affect component B?

React

Direct inter-component communication is messy and hard to manage.

Let’s take advantage of the fact that our components are declarative.

React

Basic Solution Shared data should belong to the common ancestor of

two or more components. The ancestor controls the data and defines functions which can modify the data.

Whenever the data updates, the ancestor re-renders itself, in turn re-rendering its children, which will now have new

props passed to them.

React

How do our components access the modifier functions? Remember that in Javascript functions are first-class

citizens.

We simply pass the modifier functions down as props for the children to call as needed.

React

React

React

In a nutshell, this is the pattern for the Single Page App.There’s a whole tree of components, and, in general, they all inherit their state and whatever actions are

needed to change state from the root level.

We call that top level the store. And there’s just one for the whole app.

Redux

Redux – Atomic State Management

Redux

Redux is a Flux-inspired library for creating and managing our global app state.

At a basic level it provides access to the global state as well asa dispatcher that accepts actions.

Redux, or Flux

Redux

We’ll come back to how this ties together in the code soon.There’s a couple other concepts to cover first.

React-Router

First, React Router. It’s a small library that gives us client-side routing with pretty URLs. It works by matching routes to

determine which components should be displayed.

React-Router

ES2015/ES2016

Also on the detour: New Javascript!

ES2015/ES2016

You’ll see this interchangeably as ES2015/2016 or ES6/ES7. Either way, it refers to new additions to Javascript.

ES2015/ES2016

ES2015/ES2016

ES2015/ES2016

ES2015/ES2016

ES2015/ES2016

Using const and let provides useful signals to the dev and the interpreter about the intended use of the variable.

There’s no instance where ‘var’ is preferable to either.

ES2015/ES2016

ES2015/ES2016

ES2015/ES2016

ES2015/ES2016

ES2015/ES2016

ES2015/ES2016

ES2015/ES2016

ES2015/ES2016

We can use all this today!Browser Compatibility solved with Babel

Walkthrough

Here there was a walkthrough of the specific app architecture / structure used in the project… skipping.

Post Walkthrough

Some important notes:

• Component render functions should be pure functions and simple.• The Redux store must be immutable. We can enforce this with

libraries.• Reducers and action creators should be pure (no side effects).• Not everything needs to live in the global redux store – just data

that is important to the application flow or to multiple components. UI state for a single component does not need to live in the global store.

• Ctrl-H for dev tooling (in dev builds)• Write unit tests for components, action creators, and reducers!

Post Walkthrough

Thank you!Questions?