►
Description
This module will introduce you to extending leveraging React and Fabric React controls in the SharePoint Framework solutions.
The module is presented by Andrew Connell (Voitanos). Associated training materials are available from GitHub for easy reuse as needed: https://github.com/SharePoint/sp-dev-training-spfx-react-fabric.
More details on the complete SharePoint Framework training package can be found from http://aka.ms/spfx-training.
You can use these training materials any way you want in new training deliveries or in other presentations. Sharing is caring!
A
In
this
screencast
we're
going
to
look
at
using
react
in
the
office.
Ui
fabric
react
components,
but
in
this
first
section
we're
going
to
look
at
fabric,
react
to
or
react
as
a
101
type
overview
and
the
basic
react
web
part
structure,
so
we're
gonna
start
with
react,
101
how
to
create
a
react
based
web
part
and
then
the
structure
of
the
basic
template.
Now,
when
you
build
and
design
react
based
web
parts,
there's
a
couple
different
things
you
want
to
think
about.
You
want
to
think
about
the
component
design.
A
A
The
key
feature
of
react
is
composition
of
components
and
components
are
written
by
very
different
people,
and
they
should
work
very
well
together,
you're,
going
to
add
functionality
to
a
component
without
causing
rippling
changes
throughout
the
entire
code
base.
For
example,
it
should
be
possible
to
introduce
some
local
state
into
a
component
without
changing
any
of
the
other
components
that
use
it
and
similarity
or
similarly,
it
should
be
possible
to
add
some
initialization
and
teardown
code
to
any
component
whenever
necessary.
A
A
Now,
let's
talk
about
breaking
the
UI
into
component
hierarchy.
The
first
thing
that
you're
going
to
want
to
do
is
draw
boxes
around
every
component
and
sub
component
in
your
design
and
give
them
all
names
if
you're
working
with
a
designer,
they
may
already
have
done
this
so
go
talk
with
them.
Their
Photoshop
layer
names
may
end
up
being
the
names
of
your
react
components,
but
how
do
you
know
what
you
should,
what
should
be
its
own
component
and
just
use
the
same
techniques
for
deciding
if
you
should
create
a
new
function
or
new
object?
A
One
such
technique
we
were
is
going
to
be
where
a
component
should.
Ideally
only
one
thing:
that's
called
single
responsibility
and
if
it
ends
up
growing,
it
should
be
decomposed
into
smaller
sub
components.
Since
you're,
often
displaying
a
JSON
data
model
to
a
user,
you're
gonna
find
that
if
your
model
was
built
correctly,
your
UI
and
therefore
your
component
structure
is
gonna
map
quite
nicely.
A
That's
because
the
UI
and
data
models
tend
to
adhere
to
the
same
information,
architecture
or
IA,
which
means
that
the
work
of
separating
your
UI
into
components
is
often
very
trivial,
just
break
it
up
into
components
that
represent
exactly
one
piece
of
your
data
model.
So
you're
gonna,
see
here
in
this
little
diagram,
I
have
off
to
the
left.
A
You're
gonna
see
I've,
got
five
different
components
in
my
sample
application
and
I've
italicized
each
of
the
different
data
components
they're
gonna
represent
so
the
filter
product
data
table,
which
is
showing
up
here
in
orange,
is
going
to
be
containing
the
entirety
of
the
entire
example.
That's
my
top
level
component
I've
got
a
search
bar
which
receives
all
user
input
a
product
table,
that's
going
to
display
and
filter
the
data
collection
based
on
the
user
input
a
product
category
row
which
is
going
to
display
a
heading
for
each
category.
A
I've
got
a
product
row
which
is
also
going
to
display
a
row
for
each
one
of
the
different
products.
Now,
if
you
look
at
this
product
table,
you're
gonna
see
that
the
table
header
that
contains
the
name
and
the
price
labels
isn't
in
its
own
component.
This
is
just
a
matter
of
preference.
There's
an
argument
to
be
made
either
way,
but
in
this
example,
we
left
it
as
a
part
of
the
product
table
because
is
part
of
the
rendering
of
the
data
collection,
which
is
the
product
tables
responsibility.
A
However,
this
header
grows
to
be
complex,
so
if
we
did
things
like
sorting
or
filtering,
it
may
make
sense
to
make
this
its
own
product
table
header
component.
Now
that
I've
identified
the
components
in
my
little
sample
application,
I'm
gonna
arrange
them
into
a
hierarchy.
That's
gonna
be
easy,
because
components
that
appear
within
another
component
in
the
sample
application
should
appear
as
a
child
in
the
hierarchy.
As
you
see
here
now
that
you've
got
your
component
hierarchy,
it's
time
to
start
implementing
your
app
now.
A
The
easiest
way
to
do
this
is
to
build
a
version
that
takes
your
data
model
and
renders
the
UI,
but
it
has
no
interactivity.
It's
best
to
decouple
these
processes,
because
building
a
static
version
requires
a
lot
of
typing
and
no
thinking
and
adding
interactivity
requires
a
lot
of
thinking,
but
not
a
lot
of
typing.
You're
gonna
see
why
to
build
a
static
version
of
your
app
that
renders
your
data
model
you're,
going
to
want
to
build
components
that
reuse
other
components
and
pass
data
using
properties
or
props.
A
These
are
a
way
of
passing
data
from
a
parent
to
a
child
component
and,
if
you're
familiar
with
the
concept
of
state
you're,
not
gonna,
use
state
at
all.
In
this
static
version,
state
is
reserved
only
for
interactivity,
and
that
is
data.
That's
gonna
change
over
time,
since
this
is
a
static
version
of
the
app,
we
don't
need
it
and
we
don't
want
to
add
it
in
just
yet.
You
can
build
a
top-down
or
a
bottom-up.
A
That
is,
you
can
either
start
by
building
the
components
higher
up
in
the
hierarchy,
so
just
starting
with
the
the
filterable
product
table
or
with
lower
ones
like
a
product
row
in
simpler
examples,
it's
usually
easier
to
go
top-down,
you
know,
and
on
larger
products.
It
may
be
easier
to
go
bottom-up
and
write
tests
as
you
build
at
the
end
of
this
step.
You're
gonna
have
a
library
of
reusable
components
that
render
your
data
model.
The
components
will
have
only
the
render
methods,
since
this
is
a
static
version
of
your
app.
A
The
component
at
the
top
of
the
hierarchy,
will
take
your
data
model
as
a
property.
If
you
make
a
change
to
the
underlying
data
model
and
call
the
react,
Dom
render
method
again,
the
UI
is
gonna,
get
updated
and
it's
easy
to
see
how
your
UI
is
updated
and
where
to
make
the
changes
since
there's
nothing
complicated.
That's
going
on
reiax,
one-way,
dataflow,
also
called
one-way.
Data-Binding
keeps
everything
modular
and
very
fast
now
to
make
your
UI
interactive.
A
You're
gonna
want
you're
gonna
need
to
be
able
to
trigger
changes
on
your
underlying
data
model,
and
this
is
gonna,
make
it
reiax
gonna
make
this
really
easy
using
state
to
build
your
app
correctly.
You
first
need
to
think
of
the
minimal
set
of
mutable
state
that
your
app
needs
here.
This.
The
key
here
is
the
DRI
concept.
It's
don't
repeat
yourself,
figure
out
the
absolute
minimum
representation
of
the
state,
your
application
needs
and
compute
everything
else.
You
need
on
demand.
A
For
example,
if
you're
building
a
to-do
list
just
keep
an
array
of
the
to
do,
items
around
don't
keep
a
separate
state
variable
for
the
count
instead,
you're
gonna
want
to
render
the
view
when
you
want
to
render
the
to
do.
Count
simply
take
the
length
of
the
two
items
array.
Think
of
all
the
pieces
of
data
that,
in
your
example,
application
we've
got
an
original
list
of
products.
We
have
the
search
text,
the
users
entered
the
value
of
the
check
box
and
the
filtered
list
of
products.
A
So
let's
go
through
each
one
of
those
and
figure
out
which
one
is
state
and
simply
ask
three
three
three
questions
about
each
piece
of
data:
is
it
passed
from
a
parent
via
properties?
If
so,
it's
probably
not
State.
Does
it
remain
unchanged
over
time?
If
so,
it's
probably
not
state
again,
can
you
compute
it
based
on
any
other
state
or
properties
in
your
component?
And
if
you
can
that's
not
state
either,
the
original
list
of
products
is
passed
in
as
a
property
or
as
props.
A
So
that's
not
state
the
search
text
and
the
text
and
a
checkbox.
They
seem
to
be
state
because
they
change
over
time
and
they
can't
be
computed
from
anything.
And
finally,
the
filter
list
of
products
isn't
state
because
it
can
be
computed
by
combining
the
original
list
of
products
with
the
search
text
and
the
value
of
the
check
box.
So,
finally,
I
think
that
our
state
is
going
to
be
the
search
text
the
user
is
entered
and
the
value
of
the
check
box.
A
Okay,
so
I've
identified
the
minimal
set
of
app
state
that
we're
gonna
have
next,
we
need
to
identify
which
component
is
gonna
mutate
or
is
gonna
own.
This
state
remember
that
react
is
all
about
one-way
data
flow
down
the
component
hierarchy.
It
may
not
be
immediately
clear
which
components
should
own
what
state.
This
is
often
the
most
challenging
part
to
new
code
for
newcomers
to
understand
so
follow
these
steps
to
figure
it
out
for
each
piece
of
state
in
your
application.
You're
gonna
want
to
identify
every
component
that
renders
something
based
on
that
state.
A
You're
gonna
find
a
common
owner
component
that
such
as
a
single
component,
above
all,
the
components
that
need
the
state
in
the
hierarchy
either
the
common
owner
or
another
component
higher
up
in
the
hierarchy
should
own
the
state.
If
you
can't
find
a
component
where
it
makes
sense
to
own
the
state,
create
a
new
one
simply
for
holding
the
state
and
add
it
more
in
the
hierarchy
above
the
common
owner
component.
A
Now,
now
that
we've
done
that,
let's
run
through
this
strategy
for
our
application,
the
product
table
needs
to
filter
the
product
list
based
on
the
state
in
the
search
bar
needs
to
display
the
search
text
in
check
state.
The
common
owner
component
is
the
filterable
product
table.
It
conceptually
makes
sense
for
the
filter
text
and
checked
value
to
live
inside
of
this
component.
So
we've
decided
that
our
state
lives
in
the
filter
filterable
product
table.
First,
let's
add
an
instance
property.
This
state
equals
filter
text
is
nothing
in
stock,
only
is
set
to
false.
A
We're
gonna,
add
that
to
the
filter,
full
tables
constructor,
to
reflect
the
initial
state
of
our
application,
and
then
I'm
gonna
pass
the
filter
text
and
in
stock
only
to
the
product
table
and
search
bar
as
a
property.
Finally,
I'm
going
to
use
these
properties
to
filter
the
rows
in
the
product
table
and
set
the
values
of
the
form
fields
in
the
search
bar.
You
can
start
seeing
how
the
applications
gonna
behave
if
I
sell
fill.
A
If
I
set
filter
text
to
ball
and
refresh
the
app
you're
gonna
see,
the
data
table
is
going
to
be
updated
correctly
now
so
far,
I
built
an
app
that
renders
correctly
as
a
function
of
props
in
state
flowing
down
the
hierarchy,
but
now,
it's
time
to
add
to
support
data
flowing
the
other
way.
The
form
components
deep
in
the
hierarchy
need
to
update
the
state
now
react
makes
this
data
flow
explicit
to
make
it
easy
to
understand
how
your
program
works,
but
it
does
require
a
little
more
typing
than
traditional,
two-way
data-binding.
A
If
you
try
to
type
or
check
the
box
in
the
current
version
of
the
example,
you're
gonna
see
that
react
does
ignore
your
input.
This
is
intentional,
as
we've
set
the
value
prop
of
the
input
to
always
be
equal
to
the
state.
That's
passed
in
from
the
filterable
product
table.
Let's
think
about
what
we
want
to
have
want
to
have
happen.
A
A
We
can
use
the
on
changed
event
on
the
inputs
to
be
notified
of
it
and
the
callback
pass
to
the
filter.
What
product
table
will
call
set
state
and
then
the
app
will
be
updated,
sounds
complex.
It
really
is
just
a
few
lines
of
code
and
it
it's
really
explicit
how
your
data
is
flowing
through
the
app.
So
how
are
we
going
to
create
our
react?
A
A
So,
let's
take
a
look
at
the
structure
of
what
a
react
project
looks
like
a
SharePoint
framework.
Web
part
is
the
same
as
a
non
react.
Web
part
you're
going
to
see
that
we
have
inside
of
our
web
parts
folder.
We
have
a
react
web
part
demo,
and
then
we
have
a
little
bit
farther
down.
You
have
our
react.
Web
part
demo
web
part
ts
file.
A
The
web
parts
render
method,
creates
an
instance
of
a
react
control
and
then
adds
that
to
the
page,
the
react,
control
or
the
component
is
located
in
the
components
subfolder
in
a
tsx
file.
The
tsx
file
stands
for
a
typescript
extended
and
it's
a
variation
of
the
JavaScript
extended
language
which
allows
us
to
do
JavaScript
and
HTML
markup
all
together
inside
of
one
string.
It
treats
the
mark-up
as
code
and
we
don't
have
to
escape
it
in
a
string
like
we
would
normally
do
if
it
was
a
Java,
Script
or
our
typescript
file.
A
A
This
is
gonna,
be
best
understood
if
we
can
actually
go
ahead
and
create
one.
So,
let's
switch
over
to
a
demo
and
see
how
we
can
build
bundle
package,
deploy
and
install
a
react
based,
sharepoint
Framework
web
part
in
this
exercise
or
a
demonstration.
We're
gonna
create
a
SharePoint
framework.
Client-Side
web
part.
That's
gonna,
leverage
the
react
web
framework,
so
I'm
gonna
start
by
first
creating
a
new
folder
where
I
want
to
create
my
project
and
I'm
gonna
go
ahead
and
navigate
into
that
folder.
Now
I'm
gonna
go
ahead
and
run
the
SharePoint
yeoman
generator.
A
I'm
gonna
go
ahead
and
choose
react
so
now
the
yeoman
SharePoint
generator
has
gone
ahead
and
is
provisioning,
my
all
the
files
and
folders
and
then
it's
going
to
go
ahead
and
run
npm,
install
and
download
all
the
dependencies
so
through
the
magic
of
video
editing.
We're
gonna
go
ahead
and
skip
through
this
NPM
install
so
that
you
don't
have
to
wait
for
this
right
now.
The
project
has
been
created.
A
So
once
the
workbench
loads,
we're
gonna
go
ahead
and
select
our
web
part
and
there
we
go.
We
see
our
web
part
up
and
running.
So
everything
looks
good.
Let's
go
take
a
look
at
the
actual
code
base,
though,
let's
see
what
was
added
to
our
project.
So
first,
if
I
come
over
here
to
our
code,
let's
first
look
at
packaged
that
JSON
and
what
you're
gonna
see
here
is
that
I've
got
all
the
types
that
have
been
added
or
the
dependencies
that
have
been
added
for
working
with
react.
A
I've
got
the
react,
library
and
the
react
Dom
library
and
the
way
these
work
is
that
react
is
the
actual
react
engine,
whereas
react.
Dom
is
the
bridge
between
the
react
engine
and
the
browser.
Dom
we'd
also
have
two
separate
typescript
type
declaration:
libraries
as
well
to
make
it
easier
for
working
with
react
files.
So
that's
everything
we're
going
to
need
to
work
with
react
now.
If
I
come
over
here
and
look
at
the
actual
project,
if
I
look
at
the
web
part
itself,
you
can
see.
A
This
looks
a
little
bit
different
from
a
normal
web
part
and
the
real
important
part
here
is
just
the
part
that
I
have
highlighted.
What
you
see
here
is
inside
the
render
method.
What
we're
altima
doing
is
we're
gonna
call
react,
Dom
render
and
then
pass
in
a
react
element
and
the
HTML
element
where
we
want
react
to
render
our
component
into
so.
This
element
here
we're
gonna.
Look
at
that
in
just
a
minute.
A
This
Dom
element-
that
is
the
div
that
is
on
the
page,
that
the
SharePoint
framework
has
added
to
the
page
where
my
webparts
should
be
rendered.
So
here
what
I'm
doing
is
I'm
creating
an
instance
of
a
react
element,
I'm
telling
it.
What
element
do
I
want
to
create?
That's
our
react.
Web
part
demo
we'll
look
at
that
in
just
a
minute
and
then
I'm
passing
in
or
setting
all
the
public
properties
for
this.
A
So
this
would
effectively
be
the
same
thing
as
if
I
came
over
here
and
I
said
something
like
this
Dom
element
and
I
said,
react
web
part
demo
and
then
description
equals
and
then,
if
I
did,
and
that
data
bound
the
value
of
this
control
like
this,
if
I
date
and
then
data
bound
the
value
of
the
description
property
from
right
here.
So
this
is
doing
it
more
the
programmatic
way.
This
is
doing
it
more
of
a
declarative
way.
We're
gonna
leave
it
the
way
it
is
by
default.
Now
notice.
A
Here
that
I
said
we
were
loading
in
this
component
from
the
react
web
part
demo.
That's
we
even
define
right
up
here.
So
if
I
come
over
here
and
looking
components,
you'll
see
my
react.
Web
part
demo,
one
thing
goes
notice,
that's
different
is
this
txx
file
tsx
stands
for
typescript
and
extended,
and
what
this
allows
us
to
do
is
to
have
markup
be
right
in
line
with
the
code.
A
So
you
see
here
that
this
markup
is
not
being
escaped
in
a
string
or
written
out
as
a
string
like
we're
used
to
doing
when
we
don't
work
with
a
JavaScript
framework.
So
here
we
can
see
we're
creating
a
new
class
called
a
react
web
part
demo.
It's
extending
a
react
component
that
has
a
set
of
properties
that
are
defined
in
a
state.
That's
defined
now
we're
gonna
get
to
the
state
and
properties
in
a
later
section
inside
this
screencast.
A
But
here
you
can
see
I'm
just
rendering
out
all
the
stuff
related
to
my
the
rendering
that
I
want
to
use.
There's
a
couple
things.
You
may
notice
here
that
a
little
bit
different
from
traditional
HTML
notice
that
the
div
has
a
class
name
attribute
and
not
a
class
attribute,
and
the
reason
for
this
is
because
the
word
class
is
a
real
reserved
word
in
JavaScript
and
typescript.
So
reacts
it
to
come
up
with
something
different.
They
chose
class
name,
and
this
will
actually
be
translated
down
to
class
when
everything
is
rendered
out.
A
You
also
notice
that
we
have
our
the
way
our
Styles
are
done,
or
the
data
binding
is
being
done.
Is
things
are
not
quoted,
I'm
just
putting
things
but
based
on
whatever
the
value
is
so
in
this
case,
styles,
dot,
container,
dot,
row
column.
We
can
even
see
here
when
I'm
writing
out
some
of
the
description
here,
how
things
are
being
written
out
as
well.
So
it
looks
a
little
bit
different,
but
it
should
be
pretty
familiar
because
it
looks
very
similar
to
what
we're
used
to
doing
alright.
A
So
let's
go
ahead
and
let's
make
some
changes
to
this:
let's
go
over
to
our
web
part
and
let's
create
a
new
interface
here,
so
I'm
going
to
create
a
new
interface
and
we're
gonna
call
this
the
eye,
color
interface.
So
what
does
a
color
object?
Well,
it
has
a
number
associated
with
it
and
it
has
a
title
associated
with
it
as
well.
Now,
the
next
thing
I'm
going
to
do
is
I'm
going
to
create
a
new
react
component.
That's
going
to
show
a
list
of
all
the
colors
that
are
provided
to
it.
A
React
from
react:
it's
not
spelled
right
react.
We
also
need
to
import
eye
color
from
some
interface
that
we're
going
to
have
to
define.
So
we
didn't
create
the
interface
we
need
to
go.
We
need
to
go
create
that
interface,
though
in
just
a
second,
so
that's
gonna
be
inside
of
eye
color
and
let's
go
fix
that
right
now.
Actually
so
I
put
this
eye
color
over
here.
Let's
take
this
interface.
A
This
color
interface
like
this,
and
we
put
that
let's
put
that
in
the
root,
so
we'll
do
I,
color,
TS
and
I
copy
the
wrong
file,
the
wrong
line.
Where
is
this?
We
want
that
and
we'll
put
that
right
here,
all
right,
so
there's
our
color
and
it's
no
longer
inside
this
file,
so
we're
good.
So
here's
our
color
list
so
we're
importing
it
straight
from
I
color
eye
color.
There
we
go
so
we
had
our
quotes
off
all
right,
that's
all
fixed
up!
A
So
now,
let's
create
a
new
art
with
the
define
the
public
interface
or
the
public
signature
of
this
component
and
I
do
that
by
creating
an
interface
so
I'm
gonna
create
my
interface
of
eye.
Color
list
props
and
I'm
going
to
just
return
back
and
say
this
is
my
colors
eye
color
like
that
now,
let's
create
our
react
component,
so
I'm
going
to
export
a
new
class.
A
This
is
a
color
list.
That's
gonna
extends
the
react
component
and
I'm
gonna
pass
in
our
public
properties
and
an
empty
state.
We're
in
again
we're
gonna
deal
with
State
later
in
this
screencast,
and
this
is
going
to
do.
This
is
kind
of
a
single
method.
Public
render
that
is.
React
react
element
alright,
because
this
is
the
thing
that
we
were
just
creating
just
a
second
ago,
and
this
is
going
to
return
back
nothing
for
right
now.
A
Okay,
now
so
our
render
method
looks
pretty
good
here,
so
we
got
our
default
setup
here
for
our
color
list.
So
what
I'm
going
to
do
now
is
we're
gonna
update
the
render
method
so
that
inside
this
return
statement,
we're
gonna
do
something
a
little
more
interesting
with
this.
Instead,
what
we're
gonna
do
is
I'm
going
to
create
an
unordered
list
that
is
going
to
take
this
all
the
colors
that
are
passed
in,
so
this
is
being
mapped
to
our
public
property.
A
All
right
so
now
we've
got
our
colorless
component
is
all
set
up.
Now
now,
with
the
react
component
created
that's
going
to
display
list
of
colors.
The
next
step
is
to
use
it
so
I'm
going
to
do
that
by
updating
the
default
react
component
that
was
created
by
the
SharePoint
Framework
yeoman
generator.
A
So
what
I'm
gonna
do
now
is
come
back
over
here
to
my
deep,
my
TSX
file
and
I
need
to
import
a
few
things
I'm
going
to
have
to
import
we're
going
to
import
our
color
interface
and
we're
also
gonna
have
to
import
our
color
list
component
and
the
interface
associated
with
it
as
well.
Now,
let's
create
a
new
private
member
inside
of
this
guy.
That's
gonna
contain
a
list
of
colors.
A
And
this
is
pretty
simple:
we're
just
gonna
have
an
ID
for
the
first
one
of
one
and
the
title
for
this
is
going
to
be
red
and
we're
gonna
need
to
do
two
more
of
these,
so
we
will
have
ID
of
three
and
two.
So
then
we'll
have
blue
and
green
there.
We
go
so
now
when
I
update
the
render
method
for
this
guy
we're
getting
a
build
error.
Let's
just
take
a
quick
peek
here
we
go.
We
just
had
to
save
this
file.
Yes,
no!
That's
all
fixed!
A
So
let's
come
back
over
here
and
now
inside
of
our
render
method,
let's
update
the
render
method
to
let's
start
where
this-
let's
start
right
about
here,
let's
get
rid
of
all
that.
So
after
this
span
we
have
welcome
to
SharePoint
and
let's
change
the
SharePoint
and
react
and
then,
let's
add
in
our
color
list,
so
I'm
gonna
have
a
color
list,
control
that
has
a
set
of
colors
and
we're
gonna
map
those
colors,
not
class
colors.
A
That's
our
public
property.
We
define
and
I'm
gonna
set
those
private
those
those
colors
that
I
just
added
to
it.
So
there
we
go.
We've
added
in
our
color
list
component,
so
now,
let's
test
everything
out
so
I
should
be
able
to
go
back
to
my
browser
and
I
should
see
yep
there
we
go.
Everything
is
now
rendered
because
gulp
served
was
still
running
in
the
background
and
it
was
building
everything
in
the
background
and
making
sure
that
everything
continued
to
work.
A
So
here
you've
seen
how
to
create
a
react
component
and
how
to
leverage
it
inside
of
a
SharePoint
framework
web
part
you're,
also
seeing
how
to
take
properties
and
to
bind
them
in.
So
we
saw
how
to
create
this
collection
right
here.
So
remember:
right
now,
we're
in
our
here's
our
web
part.
We
didn't
do
anything
to
the
web
part
itself.
It's
still.
Loading
in
this
react
component
that
react
component
now
has
a
collection
of
that
variable
or
of
colors,
and
then
all
we
did
was.
A
We
said,
let's
use
that
color
a
colorless
component
that
we
created
and
that
colorless
component-
all
he
does
is
he
has
a
public
interface
here
of
that
shows
a
list
of
colors
and
then
he's
just
gonna
numerate
through
all
those
colors
and
write
them
out
as
list
items.
So
in
future
demos,
what
you're
gonna
see
is
how
we
can
take
advantage
of
this
and
make
it
a
little
bit
more
interesting,
making
a
little
more
dynamic,
make
it
a
little
more
reactive
and
also
to
make
it
look
a
little
bit
better.
A
In
the
last
section,
we
talked
about
react
from
a
high
level
and
then
how
we
can
leverage
it
inside
of
a
SharePoint
framework
web
part.
Now,
let's
see
how
we
can
use
react
and
the
office
UI
fabric
react
components,
we're
gonna,
first
start
by
talking
about
the
office,
UI
fabric
and
then
fabric
react
and
then
we're
gonna
see
how
we
can
add
fabric
react
to
a
SharePoint
framework
project.
A
So
what
is
the
office
UI
fabric?
The
officer
fabric
is
built
by
Microsoft,
and
the
idea
is
is
that
there
is
a
it's
a
UI
design
language
that
is
used
across
all
of
the
Microsoft
Office
suite,
so
you'll
find
that
in
office
like
the
office
client,
such
as
outlook,
Word,
Excel,
PowerPoint,
you're,
gonna
find
it
inside
of
office
365
like
exchange
online,
Outlook,
SharePoint,
planner,
Microsoft
teams,
etc.
Now
the
office
UI
fabric
is
all
styling,
it's
all
about
styling
and
colors
and
typography.
A
It
also
integrates
really
well
with
other
frameworks,
and
it's
available
to
you
for
use.
Inside
of
your
your
custom
components,
its
consisted
of
a
bunch
of
CSS
classes.
Primarily,
this
project
is
open-source.
It's
developed
and
maintained
by
Microsoft.
In
order
to
help
the
developer
community
build
office,
add-ins
and
office
365
based
web
applications
that
will
integrate
seamlessly
with
office,
they
also
provide
a
point
of
reference
for
the
evolving
office,
365
design,
language
that
anybody
can
reference.
It
enables
the
community
contribute
to
a
better
experience
for
everyone
who
builds
for
office.
A
If
you
think
about
it,
if
you're
working
inside
up
you're
building
a
custom
SharePoint
framework
web
part,
wouldn't
you,
like
your
web
part,
to
look
and
behave
like
the
rest
of
the
application
it's
running
in,
so
that
developers
don't
have
to
worry
about
training
your
end
users
I,
want
it
to
look
and
feel
like
it's
part
of
SharePoint,
not
like
it's
something
that
I
built
now.
Microsoft
releases
changes
to
the
design,
language,
components
and
other
assets
quite
frequently,
and
this
is
gonna
make
and
they
make
these
available
ZUP
these
available.
A
These
updates
available
to
the
community
if
features
are
deprecated,
deprecated
Microsoft
notes
those
in
a
change
log
and
the
feature
will
also
be
removed
from
the
next
major
release
after
it's
been
deprecated.
So
I've
got
some
links
here
where
you
can
learn
more
about
the
change
log
and
how
you
contribute
to
the
github
repository
for
the
office
UI
fabric.
A
So
let's
talk
a
little
bit
about
styling.
Some
of
the
things
that
it
covers
are
fonts
and
typography.
So
it's
got
the
standard
office,
Sega,
II
font,
family,
a
type
ramp
and
the
official
office
365
iconography
as
custom
fonts.
The
colors
are
gonna
match
the
office,
365
color
palette,
and
then
we've
also
have
branded
assets.
We
have
things
like
product
file,
type
symbols,
product
symbols,
etc,
there's
even
some
animations
and
they
like
the
official
ones
that
office
365
uses
for
easing
and
other
animations
that
they
leverage.
A
In
addition,
it
also
has
a
responsive
grid
that
is
tailored
to
the
office
365
a
lot.
The
office
chakra
provides
styles
to
allow
you
to
implement
the
following
things
in
your
application.
As
I've
talked
about
already,
we
have
typography
color
icons,
animations
a
responsive
grid
and
there's
even
some
localization
stuff
built
in
as
far
as
the
typography
goes.
These
are
bought
base.
Font
classes
that
are
available
to
us
fabric
includes
10
base
font
classes
that
represent
the
type
ramp
for
office
design.
Language
each
base
class
sets
a
default
size,
weight
and
color.
A
There
are
also
some
helper
font
classes,
so
you
can
use
one
of
the
several
helper
font
classes
to
change
the
text
weight
for
colors.
There
are
nine
themed
colors
in
eleven
neutral
colors
each
has
helper
classes
for
text,
border
background
and
hover
States,
and
they
include
color
classes,
they're
going
to
act
as
hooks
in
the
office.
365
suite
wide
theming
system
when
a
theming
system
is
applied
and
your
app
to
your
app
or
your
add-in
is
consuming
the
suite
navigation.
A
A
We
also
have
accent
colors,
which
is
going
to
be
used
for
alerts
and
warnings
and
information
Thanks
and
when
it
comes
to
icons,
fabric
uses
a
custom
font
for
its
iconography
font
contains
glyphs
that
you
can
scale
color
and
style
in
any
way,
and
you
can
even
flip
them
for
right-to-left
localization
to
use
the
icons.
You're
gonna
combine
the
base
MS
icon
class,
with
a
modifier
class
for
the
specific
icon.
A
A
Now
office,
your
fabric
comes
with
a
mobile-first,
12
column,
responsive
grid
that
you
can
use
to
create
flexible
layouts
for
a
variety
of
screen
sizes
and
device
types.
As
far
as
localization
goes,
we
have
right-to-left
support
in
addition
to
the
default.
Left-To-Right
fabric
comes
with
an
alternate
CSS
file
for
pages
written
in
right-to-left
languages
such
as
Arabic
and
Hebrew.
This
reverses
the
order
of
the
columns
in
the
responsive
grid,
making
it
easy
to
create
an
RTL
layout
without
having
to
write
additional
templates.
A
We
also
have
language
optimized
fonts,
by
default
fabric,
presents
all
text
in
the
Western
European
character
set
for
Segoe
UI
for
languages
of
the
other
characters
fabric
will
either
serve
a
version
of
Segoe
UI,
with
a
from
character,
set
or
use.
A
system.
Font
fabric
supports
many
language
codes
which
utilize
different
Fox
font
stacks.
A
Now
that
we've
talked
about
office
UI
fabric,
let's
talk
about
something
else:
called
fabric
react
fabrics,
components
make
up
the
building
blocks
of
your
UI
that
can
be
consumed
as
CSS
applied
to
your
markup.
All
JavaScript
is
presented
into
a
natural
behavior
or
it
explained
a
natural
behavior.
You
can
download
these
components
from
the
github
repository
now.
The
way
that
this
works
is
that
there
are
some
default
config
and
default
controls
that
are
provided
and
used
inside
of
office
365
like
drop-down
controls,
tables,
buttons,
toggle
controls,
text
boxes,
etc.
A
You
can
learn
more
about
the
office
UI
fabric.
If
you
go
to
developer
Microsoft
comm,
slash
fabric,
there's
a
getting
started,
link
that
you
see
here,
as
well
as
an
open
source,
github
repository
that
you
can
dive
into.
If
you
go
to
office,
UI
fabric
react
inside
of
the
office
dev
organization
in
github.
A
Now,
how
do
we
go
about
adding
fabric
react
to
our
SharePoint
framework
project?
Sharepoint
framework
projects
include
a
special
NPM
package
of
the
office
UI
fabric
core
for
SharePoint
office
UI
fabric
core
is
just
CSS
now.
Fabric
react,
which
are
the
controls
already
includes
the
office
UI
fabric
CSS.
So
we
need
to
remove
the
duplicate
so
I'm
going
to
do
that
by
doing
an
NPM
uninstall
at
Microsoft,
slash,
SP
office,
UI
fabric
core
and
save
my
changes
and
then
going
to
update
the
included
web
parts.
A
A
So
how
do
we
use
the
controls?
You're,
not
gonna,
I!
Don't
recommend
that
you
import
the
entire
fabric
react
library.
Instead,
you
only
want
to
import
the
control
that
you're
using
so
in
this
case
here
I'm
doing
a
deep
reference
down
to
the
list,
control
and
importing
that
into
my
web
part,
then
to
leverage
the
control
within
my
react.
Control
I'm
then
going
to
say
inside
the
render
method.
I'll
just
add
the
list
control
and
then
specify
all
of
us
public
properties.
A
So,
let's
see
a
demo
about
how
to
work
with
the
fabric.
React
controls
in
this
demo
we're
going
to
update
the
existing
react
based
SharePoint
Framework
web
part
that
we
created
in
the
previous
demo
to
leverage
a
few
controls
from
the
fabric
react
suite
of
controls.
So
the
first
thing
that
we
need
to
do
is
we're.
A
Gonna
have
to
update
our
project
to
follow
the
recommended
guidance
from
Microsoft
when
using
fabric
react,
which
involves
doing
two
things:
one
is
removing
the
reference
of
fabric
or
the
fabric
or
package
and
then
also
changing
the
existing
SAS
reference.
So
if
I
come
over
here
into
my
project
and
I,
look
at
package.json
you're
gonna
see
a
reference
to
the
at
Microsoft,
slash
SP
office
UI
fabric
core.
So
the
first
thing
I
want
to
do
is
I
want
to
remove
this
from
the
project.
So
I'm
going
to
come
over
here,
go
to
my
command.
A
Prompt
and
I'm
gonna
do
an
NPM,
uninstall
this
package
and
then
just
save
my
changes
all
right.
So
now,
once
that's
done,
you
now
see
that
it's
now
gone
for
my
package
now.
The
next
thing
I
need
to
do
is
go
into
my
sass
file
from
our
project
and
instead
of
using
this
CSS
core
file,
that's
coming
from
the
office
UI
fabric,
core
library,
I'm,
gonna,
change
this
up
and
use
a
different
one.
A
Under
sass
you'll
see
our
references
file
right
here,
so
that's
the
path
that
I
was
going
to
this
is
the
copy
of
the
office.
Try
fabric
CSS
that
is
included
with
fabric
react.
Ok,
so
we've
got
that
all
set
up,
and
yes,
we
want
to
save
our
changes
now.
The
next
thing
I'm
going
to
do
is
I'm
going
to
update
the
existing
color
list,
control,
control
or
component
that
I've
created
to
use
the
fabric
react
controls.
So
what
I'm
going
to
do?
A
A
All
right
now
so
now
I
need
to
do
is
need
to
do
a
couple
things
here.
I
need
to
create
a
new
method
here
called
on
render
list
cell
and
this
method
is
gonna,
be,
is
gonna.
Have
a
couple
primers
passed
in,
it's
gonna
have
a
color
passed
in,
it's
gonna
have
an
index
passed
in,
which
is
going
to
be
either
an
index
number
or
an
undefined,
and
this
is
gonna
return
back
a
JSON.
A
So
I
need
to
put
this
inside
of
a
return,
and
then
we
need
to
wrap
everything
in
a
div,
because
you
can't
have
things
we
have
everything's
gonna
be
wrapped
in
stuff.
There
we
go.
So
that's
all
good
now.
The
last
thing
I
need
to
do
here
is
need
to
create
my
handler
for
this
on
button
click.
So
we'll
come
down
here
and
say
private
on
button
click,
one
of
colors
passed
in
it's
a
type
I
color
and
all
we're
gonna
do
in
this
case.
Here
is
I'm.
A
Color
and
passing
the
object
like
that,
alright,
so
let's
see
this
work,
so
let's
come
back
over
here
right
to
my
command
prompt.
Let's
do
a
gulp
serve
to
Bill
bundle
and
spin
up
my
local
web
server
and
add
this
to
the
page
and
see
our
new
controls.
Now
the
workbench
is
loaded.
Let's
add
our
web
part
and
sure
enough.
There
we
see
we
can
see
our
list.
Control
is
working.
We
have
our
buttons
that
are
showing
up
and
if
I
open
up
the
console,
it's
clear
that's
out,
so
we
can
see.
A
What's
going
on
a
little
bit
easier
and
if
I
click
delete,
then
we
should
see
there.
We
go
delete,
there's
for
the
red
button,
the
blue
button
and
the
green
button
so
fantastic.
We
now
have
our
using
some
controls
from
fabric
react,
so
we're
in
good
shape.
Now
so
in
the
next
sample.
We're
going
to
look
at
or
the
next
section,
we're
gonna
start
to
look
at
properties
and
state
and
making
our
application
a
bit
more
reactive
and
a
bit
more
reactionary
to
work
with.
A
We're
gonna
look
at
how
to
work
with
component
properties
component
state
and
then
how
to
notify
the
components
consumers
of
changes
via
events
react.
Components
are
very
dynamic.
We've
got
two
separate
things.
We've
talked
about
them
in
the
first
section,
but
let's
go
into
a
little
more
depth.
Properties
are
public
settings
that
we
have
on
the
components.
These
are
similar
to
HTML
element
attributes
we're
going
to
use
these
provide
values
into
the
component,
as
well
as
publish
events
to
consumers
of
the
component
and
they're
going
to
be
defined
on
the
component
via
typescript
interfaces.
A
The
state
of
a
component
is
a
very
special
property.
Back.
React
is
going
to
detect
when
the
state
changes
and
it's
going
to
trigger
a
rear-ending
of
the
component
that
you're
currently
in
the
chain.
You're
gonna
change
the
state
using
the
components
method
set
State.
This
is
going
to
be
defined
on
the
component
via
typescript
interfaces
as
well.
A
So
let's
look
at
component
properties
here
I
have
something
called
the
colored
list
component.
You
can
see
in
the
middle
there
where
I
have
a
class
called
colorless
that
extends
the
react
component.
So
how
does
this
work?
Well,
I'm
going
to
be
passing
in
some
colors
and
you
can
see
where
I've
defined
a
list
of
the
public
properties.
This
component
supports
by
at
the
very
top
I,
have
an
interface
called
the
I
color
list.
A
Props
you
see,
I
have
a
colors
collection,
it's
an
array
of
colors
of
eye
colors
and
you
can
see
I
specify
that
as
the
first
of
two
parameters
when
I
create
an
instance
of
the
component
or
at
least
tried
to
find
them
within
the
render
method.
I'm
going
to
look
at
the
current
properties
for
the
component
by
saying
this,
dot,
props
and
I
know
that
he
has
a
property
or
collection
called
colors.
So
all
I'm
doing
here
is
just
writing
out
a
list
of
all
the
colors
then
to
consume
this
component.
A
The
way
I
would
use,
it
is
I
would
say,
colorless
and
then
have
my
colors
attribute
and
I'd
specify
an
array
of
colors
I
can
also
use
those
properties
to
publish
events.
So
here
I'm
creating
a
new
type
called
the
remove
color
callback
and
that's
gonna
pass
happen.
It's
gonna
pass
a
single
value
or
parameter
when
it's
raised
of
a
color
object
here.
I've
then
gone
into
my
interface,
the
eye
colorless
props
and
created
a
new
property
called
on
remove
color,
that's
of
type
that
callback
that
I
just
defined.
A
A
The
method
on
button
click,
tapes,
the
color
in
and
is
going
to
call
on,
remove
color.
Whatever
has
been
hooked
up
to
that.
So
then,
down
here
at
the
very
bottom,
you
can
see
where
I'm,
using
this
component
of
color
list
I've
created
a
new
handler
for
the
on
remove
color
event
that
says:
go
run.
The
function
underscore
remove
color.
That's
on
the
current,
where
my
current
component
is
being
consumed.
A
So,
let's
talk
about
state
in
this
case
here
for
state,
let's
define
all
the
different
properties
for
my
state,
so
I've
got
a
new
state,
that's
defined
at
the
top
and
interface.
That
is
also
a
collection
of
colors
and
I'm,
going
to
add
that
as
the
second
parameter
from
when
I'm
creating
an
instance
of
or
I'm
defining
that
the
the
declaration
for
my
class
of
the
react
web
part
here,
you
can
see
in
the
constructor
that
I'm
setting
the
state
equal
to
an
empty
collection
of
colors
and
my
render
method.
A
That's
going
to
find
the
color
that
I
want
to
remove,
which
is
going
to
be
the
current
color
that
we're
on
I'm,
then
going
to
then
say:
go
change
the
state
by
looking
creating
a
new
collection
of
colors.
That
is
all
colors
that
we
had
previously,
except
for
the
one
that
we
just
removed
and
then
I'm
going
to
set
the
state
equal
to
this
new
collection
that
we
just
created.
A
A
Now,
in
this
last
demo,
we're
going
to
update
our
existing
SharePoint
framework
react
based
SharePoint
Framework
webpart
and
make
it
more
dynamic
by
introducing
state
and
making
things
more
data-driven
by
pulling
data
from
a
SharePoint
list.
So
one
of
the
first
things
that
I've
done
is
I've
gone
ahead
and
I've
created
a
SharePoint
list
in
a
SharePoint
online
site.
We're
going
to
start
testing
our
application
using
the
hosted
workbench
to
be
able
to
use
the
data
here
that
we
have
inside
of
this
list
called
colors.
A
A
Let
me
come
over
here
to
my
web
part
and
inside
of
the
render
method.
We're
gonna
do
a
little
more
stuff
here.
I'm
gonna
update
the
code
that
creates
an
instance
of
the
react
component
and
this
codes.
Gonna
add
two
additional
properties
to
the
web
part,
so
I'm
gonna,
all
I'm
gonna
pass
into
this.
The
SP
httpclient,
which
is
this
dot
context,
dot
s,
PHP,
client
and
I'm.
Also
gonna
pass
in
the
current
site
URL,
which
is
on
the
page
context,
dot
Web
App
salute
URL.
A
Now
both
of
these
are
going
to
throw
an
error
here
in
the
builds,
because
these
are
not
properties
that
are
exposed
or
it
expected
to
be
public
properties
on
this
react
control
here.
So
let's
go
fix
that
I'm
gonna
come
over
here
to
our
props
and
then
our
props
need
to
first
go
through
an
import,
the
class
or
the
object
for
the
SP
HTTP
client,
so
I'm
going
to
import
from
at
Microsoft
sloshed
SP
HTTP
and
go
to
the
HTTP
client
and
then
I'm
gonna
have
a
property
called
SP,
HTTP
client
and
we're
also
gonna.
A
A
Now
I
need
to
go
update
our
properties
to
have
these
additional
missile
already.
Did
that
now,
I'm
going
to
add
a
new
interface
to
represent
our
components,
State
so
inside
of
our
components,
folder
I'm,
going
to
create
a
new
file
here
called
the
I
react
web
part
demo
props,
but
this
is
actually
gonna,
be
a
demo
state
dot
es
file.
So
here
we're
gonna,
have
export
and
interface.
A
For
the
state
and
this
state
is
gonna
also
have
a
bunch
of
colors,
so
I'll
do
an
import,
I
color
from
I
color
that
so
then
I
have
colors
I
color,
with
an
array
like
this
all
right
now
now,
I
want
to
update
our
components.
So
let's
come
over
here
to
our
color
list
component
and
I'm,
going
to
add
an
additional
type.
A
So
all
this
does,
is
this
just
created
a
new
call
back
type
that
we're
going
to
that
we're
gonna
call
whenever
someone
says
they
want
to
delete
one
of
our
colors,
so
I'm
gonna
do
is
come
down
here
into
the
on
button,
click
event
and
we're
simply
just
going
to
remove
everything
you
see
here
and
say.
Instead,
this
dot
prompts
whenever
someone
clicks
our
on
click
event.
Here,
whenever
someone
clicks
this
button,
we're
simply
going
to
call
our
new
on
remove
color
method.
A
That's
our
public
property
listed
up
here
and
we're
gonna
pass
back
the
color
that
we're
currently
that
we're
currently
on
so
that
way,
we're
gonna
pass
the
color
back.
Now,
let's
go
through,
and
let's
update
the
consumer
component,
that's
consuming
our
color
list.
So,
what's
special
about
this
one
is
that
he's
gonna
he's
gonna
need,
like
you
see
over
getting
this
error
here
and
the
reason
why
is
because
we
haven't
defined
the
handler
for
this
required
property
here.
A
A
A
A
We
see
this
I'm
gonna
need
to
use
our
demo
state
specify
that,
as
the
second
parameter
being
passed
in
so
I'm
going
to
pass
that
in
like
this,
then
after
that
I'm
then
going
to
come
down
a
little
bit
farther
and
in
the
constructor
for
this
I'm
gonna
have
a
constructor
setup
and
it's
in
the
property
to
be
passed
in.
What
I
need
to
do
in
the
constructor
is
I
need
to
initialize
the
state
so
I'm
going
to
do
that
by
we're.
Gonna
have
properties
passed
in
just
like
this.
A
A
An
array
back
of
all
those
colors.
Alright,
so
I
didn't
need
to
go.
Do
I,
don't
want
to
focus
too
much
on
this
inside
of
this
section.
Here
you
can
go.
Look
at
the
code
if
you're
interested
in
seeing
exactly
how
it
works
now.
What
I
do
want
to
do
is
that
when
this
component
is
hat
was
loaded
by
react,
the
next
thing
I
want
to
do
is
in
the
life
cycle
before
things
are
rendered,
I
want
to
go,
get
that
data
and
add
it
to
the
state.
A
So
the
way
you
do
that
is
by
you
create
a
public
map.
Called
component
did
mount
and
did
mouth
is
kind
of
like
on
an
it.
So
I'm
gonna
say
what
happens
in
here.
Well,
I'm
gonna
go
call
this
get
colors
from
the
SharePoint
list
and
when
I
get
that
data
back
I
know
the
data
I
get
back
is
an
SP
list
item
colors
collection,
which
is
of
type
I
color.
A
And
I'm
gonna
say
this:
set
state
I'm
gonna
set
the
state
equal
to
an
object
which
is
colors
SP
list
item
colors,
alright,
so
effectively.
What
I've
now
done
is
that
when
the
component
loads
he's
going
to
go,
get
all
the
data
from
our
color
list
inside
of
SharePoint
now
the
last
thing
I
need
to
do
is
need
to
handle
the
color.
What
happens
when
someone
I
in
the
color
list,
when
they
click
that
delete
button?
Well,
remember,
there's
an
event.
There
called.
A
So
that's
a
method
that
we
haven't
defined.
Yet
we'll
do
that
right
now,
so
we'll
create
a
new
private
method
called
remove
color,
so
we're
having
a
color
it's
being
passed
in
and
we
know
that
from
the
signature
of
the
type
that
we
create
a
few
minutes
ago,
I'll
say
Const,
new
colors
is
equal
to
and
let's
just
take,
the
old
state
take
all
his
colors
and
let's
run
it
through
a
filter
and
say
that
for
each
color
we're
only
going
to
return
back
if
the
color
is
not
equal
to
the
color.
A
That
is
supposed
to
be
removed.
That's
going
to
give
me
back
a
subset
of
all
the
colors
it
the
one
that
was
to
be
removed,
and
so
I'll
then
just
say
this
set
state
is
equal
to
colors
the
new
color
collection.
Just
like
that.
Now,
when
when
set
state
runs
and
the
set
changes,
it
will
call
render
again,
which
will
add
our
color
list
back
and
coalesced
we'll.
Then
everything
will
then
run.
A
So
now
you
can
see
our
build
succeeded,
so
let's
now
give
this
a
shot.
So
let's
come
back
over
here
in
the
I
term,
so
we
can
see
everything
is
built
and
we're
in
good
shape.
Let's
now
come
over
to
our
hosted
workbench,
let's
describe
this
URL
and
let's
go
to
underscore
layouts
slash
workbench,
that
ASPA
and
just
going
to
our
workbench
and
I'll
do
is
I
will
then
add
in
our
web
parts,
let's
scroll
down
to
the
bottom.
Here's
our
react
demo
web
part.
So
we're
going
to
select
him
here.
A
A
So
if
I
refresh
this
page,
we
should
see
the
one
thing
we
didn't
do
we
didn't
I
see,
so
we
refresh
our
page.
You
saw
we
still
had
the
three
colors
here
and
the
reason
for
that
is
go
back
to
our
code.
Remember
we
had
these
static
colors
set
well
we're
still
using
those
static
colors.
So
instead
we
need
to
say
this
dot.
State
colors
save
our
changes
and
now,
once
the
project
once
everything
rebuilds
and
we
refresh
the
page,
we
now
should
have
a
dynamic
list.
A
There
we
go
now
we
have
our
four
pics,
even
including
the
misspelled
orange
and
when
I
delete
something
it
should
remove
it
from
the
collection.
It's
not
removing
it
from
the
actual
list,
because
we're
only
removing
it
from
the
State
collection
so
that
if
we
refresh
the
page,
all
four
will
come
back,
but
you
can
see
now
that
I
can
just
very
easily
make
this
nice
and
dynamic,
and
so
in
this
demo
you
saw
how
to
make
everything
a
little
more
dynamic
by
adding
in
additional
properties
going
and
fetching
data
from
an
external
source.
A
In
our
case,
a
SharePoint
REST
API
inish.
By
getting
data
from
a
SharePoint
list
and
then
finally,
we
got
data
from
SharePoint
and
by
making
things
a
little
more
dynamic
using
the
state
in
this
screencast,
you
saw
how
to
work
with
react.
Fabric
react
in
the
office,
UI
fabric
and
SharePoint
framework
webparts.
You
got
a
good
over
you
of
what
react
is
and
how
you
would
use
react
inside
of
a
SharePoint
framework
web
part,
and
then
we
looked
at
the
office.
Ui
fabric
in
fabric
react.
A
Finally,
in
the
last
section
we
saw
how
to
work
with
properties,
lifting
the
state
and
the
and
how
to
work
with
events
inside
of
a
SharePoint
framework
web
part.
So
I
hope
you
got
a
lot
out
of
this
session
and
thank
you
very
much
for
watching
it.
We
also
have
a
couple
links
here
that
you
can
take
a
look
at
for
learning
more
about
the
SharePoint
framework.