Why Style Guides
Consistent branding for all platforms.
Reduces confusion internally.
Reduces confusion externally.
Single source of truth.
Slide 11
Slide 11 text
..but…but…but…
Hard to maintain!
Too much work up front!
Boss doesn’t care!
Slide 12
Slide 12 text
How does ReactJS help
with the but..but..but…
ReactJS brings consistency
in the style guide and in the
production application!
Slide 13
Slide 13 text
What do you mean
consistency?
The style guide and
your application use
the same React
components!
Slide 14
Slide 14 text
The same components?!
Yes! The same
components.
Slide 15
Slide 15 text
Um.. what are components?!
A snippet of code
which stands alone yet
is a part of a larger
whole. ⛓
Slide 16
Slide 16 text
Branding components…
Logo
Logo with slogan ⚒
Branded Nav ⚒
Slide 17
Slide 17 text
Branding component…Logo
Slide 18
Slide 18 text
Logo With Slogan
Slide 19
Slide 19 text
Nav Branding
Slide 20
Slide 20 text
Nav Branding Alternative Slogan
Slide 21
Slide 21 text
What are props?
Information passed into a
component is called a prop —
short for "property".
Multiple bits of information are
passed as attributes in JSX
syntax.
Slide 22
Slide 22 text
Example of passing props to component
Slide 23
Slide 23 text
Ok, we know what props are
…but what is state?
An object containing data that
determines how a component
renders/behaves.
The state allows you to create
components that are dynamic.
Slide 24
Slide 24 text
Cool story bro…
but how is the state managed?
`this.state` can exist at
different levels of your
application. Each level is
managed by it’s own
container component.
Slide 25
Slide 25 text
Container Components
React
which pass their internal
state down as props to
other stateless
components.
Slide 26
Slide 26 text
Dynamic Nav Links (part 1)
Slide 27
Slide 27 text
Dynamic Nav Links (part 2)
Slide 28
Slide 28 text
Dynamic Nav In Use
Slide 29
Slide 29 text
What have we learned?
React Applications are
built upon a nested
cascading set of
components.
Slide 30
Slide 30 text
State vs Stateless
Certain components
contain stateful information
which is passed through to
other components via
props={data}
Slide 31
Slide 31 text
Reusable Components
Components which don’t
require active state
information are reusable
and more developer
friendly.
Slide 32
Slide 32 text
Style Guides are reusable
Components
A style guide is a set of
reusable components
which can be altered
via their props.