React & ES6 Intro
-
Upload
yair-aviner -
Category
Engineering
-
view
179 -
download
1
Transcript of React & ES6 Intro
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?