►
From YouTube: Getting started with using PnPjs in SPFx web parts
Description
In this 9 minute demo, Julie and Patrick show how to get started building a simple SPFx React Web part using the PnPjs library. This is part 2 of a 5 part series.
Presenters:
📽️ Julie Turner (Sympraxis) | @jfj1997
📽️ Patrick Rodgers (Microsoft) | @mediocrebowler
Resources:
✔️ https://pnp.github.io/pnpjs
✔️ https://aka.ms/m365pnp
✔️ https://pnp.github.io/blog
A
Okay,
welcome
everybody.
This
is
video
two
of
our
series
and
in
the
last
video
we
just
introduced
the
version
three
of
pmpjs
and
sort
of
went
over
all
our
documentation
and
transitioning
between
v2
and
v3,
and
in
this
video
we're
going
to
get
you
started
doing
a
very
basic
sharepoint
framework,
react.js
web
part
using
the
pmpjs
library
and
so
patrick.
Why
don't
you
get
us
started?
What
are
we
going
to
do?
First,.
B
A
B
At
all
and
all
that
functionality
that
you've
been
using
is
still
there
in
the
the
v3
logging
package.
We
just
made
this
decision
to
reduce
for
folks
that
aren't
using
the
logging,
our
logging
library,
you
don't
have
to
include
it
anymore,
so
that
was
a
conscious
decision
on
our
part
to
reduce
dependencies
which
we're
always
trying
to
do
so.
B
B
Always
looking
to
help
out
there
as
much
as
we
can
so,
we've
got
our
packages
updated
there.
So
that's
great
and
now
I
want
to
go
ahead
and
open
my
solution,
and
so
you
can
see
we've
got
a
nice
sharepoint
framework
project.
That's
all
scaffolded
out!
If
you
look
at
the
package.json
you'll
see
our
login
and
sp
are
set
up
there.
B
A
couple
of
notes.
You
will
have
set
up-
probably
this
in
the
past
with
sharepoint
framework,
but
currently
we
in
the
pnp
libraries
require
the
typescript
version
4.
So
you
will
need
to
update
the
rush
stack
compiler.
Those
instructions
are
in
the
getting
started
guide
we
mentioned
in
the
previous
video,
but
those
steps
are
uninstalling.
The
default
rush,
stat
compiler,
installing
the
4.2
rush
stack,
compiler
and
then
in
your
I'm
sorry,
ts,
config,
file,
updating
the
extends
property
here
to
use
the
rush,
stat,
compiler,
4.2
and
then
as
well
in
your
gulp
file.
A
Yeah
yeah,
the
issues
with
that
we've
been
seeing
since
v3
started,
have
often
revolved
around
people
missing
that
step.
So
it's
a
big
step
to
remember.
I've
even
skipped
it
myself
a
time
or
two
and
went
what
the
oh
yeah
okay
forgot
to
make
that
that
adjustment,
so
definitely,
if
you're,
having
typings
bugs
right
away
when
you're,
you
know
first
trying
to
start
things
up
double
check
that
you've
made
those
changes,
because
it's
an
it's
an
easy
one
to
over
overlook.
B
And
I
do
want
to
recognize
that
is
a
bit
of
friction
for
folks
and
but
I
do
think
long
term.
It's
the
right
decision,
there's
some
capabilities
in
typescript.
Four.
We
wanted
to
make
use
of
and
didn't
want
to
sort
of
limit
ourselves
for,
because
sharepoint
framework
will
hopefully
very
soon
be
in
typescript.
Four
and
it'll
just
become
a
non-issue
for
folks.
B
So
that's
really
the
goal
there
and
then
the
next
thing
we
want
to
show
is
kind
of
a
pattern
we
have
talked
about
before,
which
is
setting
up
these
config
files
so
having
a
central
place
to
set
up
and
configure
your
pnp
js
library.
So
one
of
the
things
that
makes
sense
v2
of
pnp
js
is
this
idea
of
selective
imports
where
you
import
the
parts
of
the
library
you
need.
B
So
in
our
case,
we've
got
webs
lists
items
and
batching
as
well
as
some
of
the
core
stuff
from
sp
and
then
some
of
the
things
from
logging
there,
and
we
do
this
in
one
place,
one
central
spot,
so
we
don't
have
to
do
it
in
all
our
files,
and
then
we
have
this
function.
We've
created
here
called
get
sp
and
that
takes
optionally,
a
context,
object
and
we'll
talk
in
later
videos
about
how
we
actually
use
that
and
use
this
function
within
our
code.
B
But
what
it
does
is
take
a
sharepoint
framework
context
in
this
part,
in
this
case
the
webpart
context,
and
if
we
don't
have
this
sp
defined,
it's
going
to
go
ahead
and
set
one
up,
so
this
is
using
spfi,
which
is
our
fluent
interface
factory.
It's
using
the
new
using
which
is
allowing
us
to
apply
different
behaviors,
and
one
of
those
behaviors
we're
going
to
apply
is
the
spfx
behavior
that
takes
the
context
and
sets
everything
up.
This
is
very
similar
to
in
v2.
B
You
did
set
up
and
pass
the
context,
so
this
is
just
using
a
dedicated,
spfx
behavior
in
the
context
and
then
as
well
we're
using
pnp
logging.
So
this
is
that
extra
functionality
in
the
logging
library
we
were
talking
about
to
use
with
v3.
So
there
is
now
a
pnp
logging,
behavior
and
one
of
the
nice
things
about
that
is
because
we
no
longer
have
global
sp
is
no
longer
a
global
right.
B
You
can
change
the
logging
behaviors
at
different
levels
in
your
request,
structure
or
get
for
say,
for
example,
verbose
logging
from
just
one
request.
Instead
of
having
to
get
it
from
everything
which
is
how
it
worked
in
the
past,
so
again,
moving
away
from
that
global
structure
into
a
more
isolated
structure
by
design
which
makes
things
a
little
more
powerful.
A
So
is
this,
then,
something
that
people
can
go.
Look
at
that
advanced
documentation
to
sort
of
understand
how
this
behavior
chaining
is
working,
and
all
of
that
so
I
think
that's.
This
is
definitely
a
more
advanced
topic,
but
this
is
going
to
get
you
started
with
that
using
these
behaviors
and
then
there's
the
ability
to
build
your
own
behaviors,
which
is
an
advanced
topic
as
well.
B
Yeah
for
sure,
I'd
love
to
see
what
folks
in
the
community
come
up
with
with
their
own
behaviors,
doing
lots
of
different
advanced
scenarios,
and
I
think,
a
lot
of
possibilities
for
folks
to
come
up
with
very
cool
stuff.
That
used
to
require
deep
changes
to
the
library
and
now,
hopefully,
is
a
little
bit
more.
You
can
just
subscribe
and
do
what
you
need
to
do
that
way.
B
We
going
to
use
this
then
well,
we
are
in
our
next
video
going
to
talk
about
how
we
use
the
imported
pnp
at
pnp,
sp
library
and
this
config
file.
We've
set
up
here
to
actually
make
some
requests
and
do
some
work
against
sharepoint,
but
this
was
getting
started
and
setting
things
up
with
the
spfi
and
the
spfx
behavior,
which
takes
the
context.
B
This
code
could
have
been
in
our
web
part
itself
in
the
init,
but
this
is
a
way
to
share
it
across
your
projects
and
as
well
to
share
it
across
react
components
without
having
to
pass
things
down
as
props
to
everything.
So
this
is
an
approach,
lots
of
other
approaches.
You
know,
there's
react
context,
there's
you
know
global
kind
of
states
and
different
things.
You
could
do.