►
From YouTube: PnP Webcast - Building multi-view React client-side web parts with SharePoint Framework
Description
PnP Webcast around building multi-view React client-side web parts with SharePoint Framework. More details from blog post at http://dev.office.com/blogs
A
A
Client-Side
web
part
using
angular
one
context,
but
this
time
we
can
actually
have
the
exact
same
scenario,
but
we're
gonna
use
to
react
as
the
asset
javascript
library
to
implement
that
my
name
is
Ivan
I'm,
a
senior
program
manager
for
shape
and
engineering
and
with
me
today,
as
the
demo
guard
is
wall
deck?
What
actually
do
dangers.
B
A
That
sounds
really
really
awesome
before
we
actually
go
to
the
content
itself.
A
quick
intro
on
sharepoint
patterns
and
practices,
so
shipment
patterson
practices
is
owned
by
the
shape
and
engineering,
but
this
is
really
open
source
initiative
where
we
work
together
with
community
MVPs
and
non
MVPs
people
from
a
community
to
collect
and
provide
guidance
for
everybody
as
a
reusable
samples
components,
a
documentation
which
you
can
use
as
a
starting
point
for
your
customizations.
A
So
today's
topic,
we
kind
of
talked
about
the
concentrations.
Well,
we're
going
to
talk
about
the
UI
view
motive
view
web
part
implementation
in
react.
This
slide
is
actually
exactly
the
same
or
what
we
had
in
the
angular
webcast,
because
the
considerations
are
exactly
the
same.
So
typically,
if
you
implement,
let's
say
a
classic
single
page
application,
you
use
the
URL
to
track
the
status
of
the
application,
so
you
actually
extend
the
URL
with
the
hash
and
then
individual
status
codes.
A
So
you,
your
application,
knows
where
the
end
user
is
currently
and
what
should
I
be
showing
for
the
end
user
and
really
the
challenges
here.
Is
that
when
you
cannot
use
the
URL,
because
your
web
part
or
this
application
is
hosted
in
SharePoint,
you
don't
actually
own
the
hosting
surface.
Because
that's
this
here
point.
So
we
need
to
use
an
alternative
solution
to
track
the
status
and
really
the
technical
solution
itself
then
depends
on
the
library
JavaScript
framework.
A
What
you're,
using
so
there's
a
slightly
different
scenario
and
implementation
style,
angular
slightly
different
scenario
and
implementation
stall
for
react,
which
we're
going
to
see
today
and
auric
knockout
or
whatever
you're,
actually
using
as
your
implementation
platform.
Anything
one
out
there
actually
baltics.
Yes,.
B
So
on
that,
while
you
could,
in
theory
manipulate
lay
the
URL,
you
have
to
take
into
account
that
the
web
part
is
only
one
of
the
elements
available
on
a
page.
Imagine
that
you
would
use-
or
you
would
add
two
instances
of
exactly
the
same
web
part
on
a
page.
Then
if
you
would
change
the
URL,
it
would
actually
change
the
state
for
two
of
them
turn.
B
A
A
What
we
implemented
using
angular
as
well,
so
this
is
a
classic
all
polling
web
part
where
we
do
have
a
1
status
where,
when
the
poll
has
not
been
yet
configure,
we
have
another
status
whenever
the
question
itself
has
been
configured
when
and
it's
essentially
the
typical
end-user
seeing
the
sweat
burden,
well,
the
typical
rendering
of
foreign
juicers
and
we're
asking
a
status
from
the
end
users.
And
then,
whenever
you
actually
answer
on
that
particular
question,
you
will
get
the
results
as
well.
A
The
implementation
just
kind
of
a
bit
of
a
warning-
and
this
particular
fellow
doesn't
track
if
the
end
user
has
already
responded
on
this
survey,
it's
gonna
reset
itself
automatically
and
all
of
that,
because
we
didn't
intentionally
implement
anything
complex
on
this
one.
It
really
concentrates
on
on
the
key
scenario:
how
would
I
control
and
how
would
I
check
the
status
of
the
web
part
without
using
the
URL
as
the
tracking
mechanism,
but
I
think
the
easiest
way
to
understand
how
we
can
do
that
using
react
is
to
go
to
the
actual
demo.
A
So
let's
actually
give
the
stage
for
Waldeck
and
what
it's
going
to
walk
through
the
implementation.
The
code
itself
is
available
from
our
PMP
or
a
SharePoint
repository
targeted
for
SharePoint
framework
webparts.
So
the
URL
is
there
and
it's
also
available
in
the
video
notes.
So
you
can
actually
go
and
pull
down
the
sample
and
have
a
close
look
on
how
it
actually
works.
So,
let's
flip
to
demo
and
come
back
on
the
closing
of
thread
pressed.
B
Alright,
so
as
we
say,
we
want
to
show
you
how
you
can
build
a
multi
view
web
part
in
react,
so
here
we
will
use
exactly
the
same
sample
that
we
had
few
weeks
back
in
angular.
So
here,
let's
add
the
web
part
to
the
pace,
but
at
first
you
can
see
how
it
works.
So
we
have
the
upper
to
the
page
and
that's
the
first
state
we
added
the
weapon
to
the
page,
but
we
didn't
say
where
the
webparts
should
get
to
data
from
right.
B
A
And
in
this
case,
by
the
way,
the
the
list
name
itself,
it's
not
actually
having
a
list
of
lists
from
the
SharePoint,
but
it's
that's
mainly
because
of
simplicity
of
the
code.
Again,
so
exactly
that
there
is
a
list
name
called
framework
poll,
you
can
absolutely
implement
that
there
as
well,
but
yeah.
B
Yeah
so
with
with
that,
we
apply
this
and
whether
we
do
that's
another
state.
So
imagine
now
that
the
web
part
is
on
a
page,
we
set
it
up
and
new
user
would
come
to
the
page.
So
that's
the
second
state
of
the
app
that
that
that
they
would
see
actually
the
poll
right
and
when
they
vote.
So
here
let's
pick
react
because
we're
now
doing
things
in
react
and
then,
when
we
vote
we
will
see
another
state
which
are
the
results.
So
with
that
we
have
three
states
of
our
app.
B
We
have
the
initial
state
where
the
web
part
says
that
it's
not
not
ready
to
work
yet
then
we
have
another
state
that
shows
the
poll
and
then
third
state,
which
is
the
one
that
you
see
here,
which
is
the
one
that
shows
the
result.
So
let's
have
a
look
at
how
we
did
that
in
code
all
right.
So
here
we
see
the
code
of
the
web
part,
and
this
is
the
web
part
class
of
the
web
part
that
you
have
seen
on
the
page
here.
B
We
first
start
with
the
main,
come
with
the
main
reactor
coolant
that
we
add
inside
the
web
part.
As
you
see
at
this
point,
we
always
present
best
main.
The
only
thing
that
that
that
the
web
part
knows
is
that
it
keeps
track
where
the
config
is
already
in
place
or
not
so,
in
other
words,
whether
we
already
specified
the
name
of
the
list
or
not
and
title
right,
and
we
pass
that
into
our
main
component
on
a
page
now
when
we
go
to
main
here
is
the
first
state
that
we
track.
B
So
if,
from
the
web
part,
we
got
the
the
hint
that
we
still
need
config,
we
will
show
the
on
fake
component,
otherwise
we'll
go
directly
to
the
poll
and
in
our
config
component
we
showed
the
place
holder
with
with
with
the
text
Paul
and
icon.
So,
basically,
what
we
show
is
if
we
would
go
back
to
the
page,
and
we
will
remove
that
one.
So
this
is
our
first
config
view.
So
this
is
exactly
this
view
here
in
code
and.
A
B
A
B
And
it
will
look
exactly
the
same
across
all
the
web
parts
that
you
build,
which
is
great
right.
It
will
be
exactly
the
same
experience
yes
and
then,
if
we
go
back
to
our
main,
so
imagine
that
we
would
set
up
the
web
part.
So
with
that
we
can
actually
go
on
and
show
the
paul,
so
we
switch
to
another
component
on
and
that
we
have
here,
which
is
Paul
and
the
Paul
itself
on
this
of
the
two
components
so
or
n
two
states.
So
first
we
have
the
questions
and
then
we
have
the
results.
B
So
first,
if
you
didn't
vote
yet,
then
we
will
show
the
poll,
which
is
your
called
vote
right
and
after
you
will
vote,
we
will
show
the
results
right,
because
when
you
vote,
you
want
to
see
the
results.
So
in
the
vote,
if
we
switch
to
that,
we
have
our
component
here
that
we
use
to
get
the
questions
from
the
list
and
show
all
of
that.
And
then,
when
we
say
here
when
we
go
here
select
default
option,
we
actually
keep
the
keep
track
of
the
state
all
right.
B
So
here
we
trigger
an
event
to
which
we
subscribe
here
and
when
we
do
that,
we
say
that
we
we
have
the
vote
and
we
actually
should
should
move
on
to
results,
which
we
show
here
and
with
word,
basically
show
the
chart
with
all
of
the
results
done,
that
we
have.
So
that's
the
easy
way.
How
do
how
we
keep
track
of
of
the
states.
We
use
properties
that
we
pass
in
between
parts
of
our
reactor
and.
A
One
note
actually
on
the:
if
you
go
back
on
the
poll
on
this
one,
so
in
this
case
there's
the
private
method
voted.
This
one
could
actually
read
and
check
the
situation
from
a
cookie.
If
the
person
has
voted
on
that
one
or,
however,
you
would
actually
track
the
voting
status
button
again
in
this
particular
case.
From
a
simplicity
perspective,
we
wanted
to
keep
it
as
simple
as
possible.
B
Yes,
and
actually
so
so
here
on
this
one
light
year,
we
we
check
whether
we
should
show
the
results.
Are
the
poll
based
on
the
state
right,
but,
as
you
use,
you
said,
we
could
read
that
from
profile
from
cookie
from
a
list
from
anything
that
we
we
can
in
order
to.
So,
if
you
would
like
to
have
the
these.
B
A
Quite
simple:
it's
it's
more
around
the
property
checking
and
based
on
the
statuses,
but
we're
not
using
any
reactor
odors
or
anything
like
that,
which
is
in
the
exact
URL
paste
tracking,
yeah
cool
I.
Think
that's
it
for
that
particular
case.
There's
a
lot
of
stuff
which
we
could
actually
talk
about
in
here,
but
let's
not
actually,
let's
concentrate
on
the
main
topic
after
off
today.
So
let's
flip
back
on
the
slides
and
close
up,
the
webcast.
A
Good
and
let's
actually
sum
up
the
webcast
itself
so
relatively
fast
webcast,
and
if
you
watch
what
we
did
with
the
angular
one,
you
can
actually
see
that
the
content
itself
is
pretty
much
the
same.
The
challenge
is
exactly
the
same.
The
key
difference
here
is
that,
because
we're
using
react
or
angular,
the
actual
implementation
style
is
slightly
different
and
that's
also
presented
in
the
in
their
available
samples
from
the
github
anything
you
wanna
add
as
a
final
word,
Ennis
Burt's
wall
tech
on
this
one.
Yes,.
B
So
the
approach
that
we
chose
here
is
actually
on
purpose,
to
show
that
two
different
ways
how
you
would
do
it
in
angular
and
how
you
would
do
it
in
react.
The
good
thing
is
that
the
approach
that
we
chose
now
in
react.
You
could
use
very
similar
approach
in
angular
because,
if
you
think
about
it,
between
angular
1
and
angular,
2
angular
2
moves
more
towards
same
approach,
where
you
actually
componentize
the
whole
app.
B
So
you
could
use
very
similar
approach
to
the
one
that
we
used
in
react,
also
in
in
angular
when
you
wouldn't
use
the
UI,
rather
outer
doubt
that
we
had
initially.
But
you
would
use
similar
approach
where
you
show
and
hide
pieces
of
your
app
depending
on
the
state
that
that
that
you
track
internally
in
your.