of Star Wars and Legos. • Self-taught. That just means I pestered lots of people until I learned how to do this stuff. Yet, I still doubt myself daily. • I build the "legacy" software of tomorrow. • I generally have a "get off my lawn" attitude towards emerging technology. Nathan Smith Principal Front-End Architect Introduction
is actually possible to know less % overall, even if you were to never forget anything. There are always new things to learn, because the total surface area is continuously expanding.
showing you today is simply "a" way to do React. It is not necessarily "the" (right, only) way. This is simply the approach we have settled on, after trial and error with various projects.
is the oft-repeated phrase… "Everything is a component." A component is essentially anything that looks like this: <UppercaseTag> (Components may contain other components.)
content </UppercaseTag> …that is usually a React "class," which may or may not be an actual JavaScript (ECMAScript 6) class. For the purpose of this talk, let's assume they all are.
^ Here, the parent of <UppercaseTag> is passing down a prop called foo, with the value of 'bar'. Within the UppercaseTag class, that is usable via… this.props.foo // "bar"
parent, the parent component passes a callback function prop to the child. Here's an example of how we use our <Input /> component. <Input handleChange={ function (e, value) { // `e` is the event. // `value` is the *.value of the input. } } />
grandparent or the child, other than the fact that they are nested within one another? – grandparent <—> "parent" props –– parent <—> "grandparent" and "child" props ––– child <—> "parent" props
component to get and/or set changes to a shared object store, aka "app state." – grandparent <—> Redux –– parent ––– child <—> Redux ^ If the parent has no inherent reason to care about the shared state, it need not be involved as an unnecessary middleman.
to each individual React component. That is correct. Components can have... this.state.batmanIdentity // "Bruce Wayne" this.state.checked // boolean this.state.hasPlaceholder // boolean this.state.value // string …data that is internal. That self-contained state can be shared with child components via props, and can be passed to parents via callback functions. Redux "app state" makes things like this.props.foo available to multiple components, from a source other than their parents. Redux is a "parent to all."
JS like this: Using jQuery or Angular is like decorating trees in a forest. Using React is like planting a magic seed, from which a decorated forest grows.
to keep track of the "virtual DOM" and do precise updates accordingly. This means you rarely, if ever, actually make any of your HTML changes directly. No more typing… $('#foo').addClass('bar')
example. You would not normally use internal state, when something is just directly set via props anyway. However, this illustrates the relationship between state and props. State is internal, whereas props come from a component that resides a "level above."
you can safely leave out the constructor. It is called implicitly, if absent. This example also shows how you might use defaultProps, to provide a fallback placeholder for this.props.name. This is handy when awaiting an Ajax request.
React starter project. First, we will look at the initial index.js file, and then progress further into the "nested" JS components from there. Lastly, we will fire it up in the browser.
is the fallback for when a route is not found. We are pulling in a Markdown file, with a basic "404" message. It utilizes the <App> layout component, wrapping the content.
– index.js – routes.js – various "page" and "layout" components Next, let's take a look at <Accordion>. It is a component that maintains internal state, but can also be overridden by its parent.
passed in from the parent component. If it does not exist, then the accordion starts out completely collapsed. We also ensure a unique id, to map ARIA roles to various elements.
is, obviating the manual assignment of a unique id to each header and panel, in order to ensure ARIA accessibility hooks are properly associated to their peer elements.
the internal component state. For each section of accordion content, a child component <AccordionHeader> is created. Also note, an accordion is technically a role="tablist"
of how an accessible component works. Let's now delve into how we can persist component state across <Router> changes, and potentially even across page reloads. We will take a look at how a <Page> level component is hooked up to Redux.
<Page>. You could think of <Page> as Tony Stark, and the result of the connect call as wrapping him in an Iron Man suit. <Page> then has all the additional props and functions applied to it from Redux.
a component level. But what is all this talk of mapping state, mapping dispatch… Where does that come from? Glad you asked. Next, let's look at these Redux concepts: actions, action types, and reducers.
object reminds me of the SNL skit "Taco Town" where they wrap a hard-shell taco in a soft-shell taco, in a crepe, in a pizza, in a pancake, that is deep fried…
rootReducer, which aggregates the various child reducers. A common mistake is to forget to add a new reducer here. That can lead to frustration when debugging.
have been assigned to constants. While this may seem silly, because they are just strings, it enforces unique action names. This is helpful as your project grows larger.
pivots based on what type of action it is. In this case, we are saving changes to the selected state of the accordion. Notice that the state is being get/set by utils.storage, which allows the state change to persist across page loads, saved in window.localStorage
our <UppercaseTag>. Then, we render it into the testing concept of a "document," and assign a parent reference. Then we can use vanilla DOM methods: querySelectorAll, etc.
have a set of utility methods, which we use by attaching them to a parent object, utils. Allow me to explain a few of the cool and/or more frequently used methods: — utils.ajax — utils.save
— which is the new HTML5 replacement for the quirkiness of XMLHttpRequest. You can specify a host, url, method, params — sent as query or body based on method — and callbacks for success/error. This file is not presently used in the React starter project, but we do make use of it in real projects that require us to do Ajax.
need to view an API response that is too cumbersome to read as JSON in the browser's developer tools. Instead, it causes the browser to download a nicely formatted *.json file, so I can scroll through it using a text editor instead.
nathansmith
tasshi
mackey0225
kno3a87
uskey512
tnagao7
ivargrimstad
riofujimon
zsmb
konokenj
masuda220
ysk8hori
eitanlees
lara
tammyeverts
sferik
jeffersonlam
smashingmag
maggiecrowley
eileencodes
mclloyd
chriscoyier
holman
