React & ES6 Intro

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 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
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
anddefines 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
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 as
a dispatcher that accepts actions.

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
routingwith pretty URLs. It works by matching routes to
determine which components should be displayed.

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
Using const and let provides useful signals to the dev and the
interpreterabout the intended use of the variable.
There’s no instance where ‘var’ is preferable to either.

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?

React & ES6 Intro

More Related Content

What's hot (6)

Viewers also liked (20)

Similar to React & ES6 Intro (20)

Recently uploaded (20)

React & ES6 Intro