Using React and Office UI Fabric React Components

Key Takeaways

in this screencast we're going to look at using react and 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 in design react based web parts there's a couple different things you want to think about you want to think about the component design you want to think about splitting up your user interface and then you want to think about designing the different flow and communication of events and properties throughout your your web part so let's look at each one of these things 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 now there's nothing bad about using state or lifecycle hooks and components like any powerful features though they should be used in in some sort of moderation and in react components are gonna describe any composable behavior and this is gonna include rendering and lifecycle and state 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 one such technique we were is going to be where a component should ideally only do 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 that's because the UI and a 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 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 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 however this hair 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 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 its best in decoupled 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 and you're gonna see why to build a static version of your app that renders your data model you're gonna want to build components that reuse other components and pass data using properties or props 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 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 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 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 going to 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 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 in the filtered list of products 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 so that's not state the search text and detect and the check box 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 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 component 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 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 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 we're gonna add that to the filter Ville 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 gonna use these properties to filter the rows in the product table and set the values of the form fields in the search bar and you can start seeing how the applications gonna behave if I sell fill if I set filter text to ball and refresh the app you're gonna see the data table is gonna 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 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 we want to make sure that whatever or whenever the user changes the form we update the state to reflect the user input now since components should only update their own state the filterable product table will pass a callback to the search bar that will fire whenever the state should be updated we can use the on changed event on the inputs to be notified of it and the callback passed as a 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 web part you're gonna create a new react web part by writing the SharePoint frameworks yeoman generator as yo at Microsoft slash SharePoint and after you say you want to create a web part it's gonna ask you what kind of web framework you want to use you're gonna pick react 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 webparts 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 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 markup as code and we don't have to escape it in a string like we would normally do if it was a JavaScript or our typescript file so we can see we've got our react web part demo txx that is our react component that we've created 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 now this is gonna be a standard SharePoint framework webpart nothing special about this so I'm just gonna choose most of the default options here that are being provided to me or being are prompting me and here I'm going to choose I want to do a webpart and we're gonna call it our react web part demo and then for a web framework 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 let's go ahead and see this guy run so I'm going to jump back over here to my command prompt and just do a gulp serve and let's see this run in our local workbench 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 package dot 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 I've got the react library and the react Dom library and the way these work is that react is the actual react engine where as reacts 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 gonna 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 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 a react element and the HTML element where we want react to render our component into so this element here we're going to look at that in just a minute 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 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 an add date abound the value of this control like this if I dated then date abound the value of the description property from right here so this is doing it more of 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 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 look in 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 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 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 in typescript so reiax had to come up with something different they chose class name and this will actually be translated down to class when everything is rendered out 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 all right 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 so I'm gonna come over here into my components folder and we're gonna create a new file here called color list dot tsx and inside this we need to import 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 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 into 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 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 I color list props and I'm going to just return back say this is my colors I color like that now let's create our react components so I'm going to export a new class this is a color list that's gonna extends the react dot 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 gonna have a single method public render that is react react element right 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 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 you have up here all the colors that are being passed in and we're going to use a map function to look at the color item and say create a list item for each one of these colors 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 a 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 so what I'm going to 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 going to 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 going to contain a list of colors 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 going to 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 I want to 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 so let's come back over here and now inside of our render method let's update the render method - 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 that's our public property we define and I'm gonna set those private those those colors that I had 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 ya 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 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 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 going to 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 using the office UI fabric and fabric react in the last section we talked about react from a high level and in 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 so what is the office UI fabric the office shirt 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 about styling it's all styling and colors and typography 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 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 they make these available ZUP these available 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 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 Segoe a 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 in addition it also has a responsive grid that is tailored to the office 365 silhouette the officer fabric 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 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 these classes are gonna pick up the user's chosen theme and your application can be themed just like the rest of the hosting application so my web part isn't always blue it'll be if the if the theme for my SharePoint web SharePoint site is blue it'll be blue if it's yellow it'll be yellow so the colors that the office ride fabric gives us are the different theme colors and it provides a way for doing things like wayfinding and navigation it also has key indications are in interactions like primary actions and current or selected indicators the neutral colors include things like black grey in different shades of grey and white use darker shades of grey for primary content such as text and tiles use black sparingly for high impact strings like labels and names in hover States use lighter shades of grey for supporting graphic elements in page areas 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 note they the ear area the Aria hidden attribute which prevents screen readers from reading the icon itself in cases where the meaning is conveyed only through the icons such as an icon only navigation bar be sure to apply an aria label to the button for accessibility reasons now when it comes to side pale animations when you're gonna choose a motion for side panels consider the origin of the triggering element use motion to create a link between the action and the resulting UI for example if a triggering element is on the right side of the interface consider having the panel move in from the right side for dialogue animations when choosing motion for dialogues consider the origin in the tone of the content for a warning or an error dialog quick fade in might be appropriate but if the dialog appears when a user chooses an item get more information a scale up may be more appropriate 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 future versions of fabric will also reverse some icons and provide additional helper utilities 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 diff character set or use a system font fabric supports many language codes which utilize different Fox font stacks 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 in national 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 what Microsoft has done is they've taken the office UI fabric which is just a bunch of CSS and they've used react to built to build components that we can then reuse inside of our application so that our application has the same look and feel like the hosting applications like such as SharePoint you can learn more about the office UI fabric if you go to developer microsoft.com 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 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 or 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 gonna do that by doing an NPM uninstall at Microsoft slash SP office UI fabric core and save my changes and then gonna update the included web parts reference to the office UI fabric CSS I'm going to remove the old reference to the office UI fabric core CSS I'm gonna change the first line in the web parts sass file from what you see here to the one that's inside of office UI fabric react package instead 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 so let's see a demo about how to work with the fabric react controls in this demo we're gonna 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 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 prompt and I'm going to 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 so instead I'm going to point to the office UI fabric react slash dist slash sass slash underscore references SC SS and you can see that when you come up here into the node modules if you scroll down to the office UI fabric here's officer I fabric react and under dist 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 officer I fabric CSS that is included with fabric react okay 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 created to use the fabric react controls so what I'm going to do first is I'm going to add in a couple import statements now I want to go use the list control and the default button control so I'm going to import create an import statement and I'm going to add a reference to the office UI fabric react /lib slash list and this is gonna give me the list component and I'm gonna do the same thing but for the button and instead for the button control we're gonna use the default button all right now let's update the control to use these things so I'm going to come down here and let's instead of in my render method let's now come in and let's use the list control I'm going to set the items equal to the items is control to this dot props colors and then I'm also gonna set the on render cell I'm gonna set that equal to this dot underscore on render cell or on render list cell it's the name of the method I'm going to use 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 there an index number or an undefined and this is gonna return back a JSON okay now what this means is that I need to define what's going to show up inside of each element in the list so what I'm gonna do is I'm gonna write out the actual color and then on a break line immediately after it I'm gonna include a button and the text for this button is gonna say delete the data for the button is gonna be bound to the current color or on his ID property and then the on click event is gonna be bound to say that whenever this is called I want to call this underscore on button click color all right and then we'll just close out the button and in fact this needs to return back an element 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 be have everything's going to 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 when a color is passed in its a type I color and all we're going to do in this case here is I'm just gonna write out to the console clicked delete for color 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 let's clear this out so we can see 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 in this last section let's extend the existing web part that we've been working with to be a little more dynamic we're going to 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 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 the state of a component is a very special property value react is going to detect when the state changes 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 gonna be defined on the component via typescript interfaces as well 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 define a list of the public properties this component supports by at the very top I have an interface called the I colorless 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 when I define 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 the way I would use it is I would say color list 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 at but 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 icon list props and create a new property called on remove color that's of type that callback that I just defined so here you can see that now I've changed my component to now have buttons it's gonna list out all the different colors but when I click the button I wanted to raise an event on my component called on button color or on button clip and pass in the current color that I'm on 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 roof color event that says go run the function underscore remove color that's on the current where my current component is being consumed 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 what I'm going to do is I'm simply going to say to remove the color so my colors are set to the current state of an array of all those different colors when I want to go through and remove a color I'm then going to sit to handle that by passing in that function to say on remove color passing in a reference to the method 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 understanding state how we do properties and then lifting the state up through the use of events is best understood through a demo so let's jump into a demo 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 have 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 so one of the things I'm going to need to do is I need to update the web part to provide additional inputs to our react component so I'm gonna come over here to my web part let me go over here to my web part and inside of the render method we're gonna do a little more stuff here I'm going to 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 going to all 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 absolute URL now both of these are going to throw an error here in the build because these are not properties that are exposed or is 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 going to have another property called the current site URL which is a type string as well now we're also going to need to go through and create a new interface that is going to we also have to create a new interface here and what our interface is going to do now I need to go create and go update our 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 component 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 going to be the demos State TS file so here we're gonna have export and interface 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 gonna add an additional type right after our existing import statement so I'm gonna have an export a new type for a remove color callback which is of type color we're just gonna pass in a color and then just say void like this alright now inside of our properties for our color list component we're gonna have a method called on remove color which is a type remove color callback okay so all this does is this just created a new callback 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 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 that you see over getting this air here and the reason why is because we haven't defined the handler for this required property here so we're gonna need to do a bunch of changes to this first we're gonna need to do some changes to go get data and then how we're going to deal with things when when items are actually deleted so the first thing we'll do is up in the import statement section I'm first going to import the I react web part demo state so this is our I react demo state and I'm also going to need to import from the from the at Microsoft SP HT so I'm going to need to import from the Microsoft SP HTTP I'm going to use the SP HTTP client and the s PHP client response all right now we're gonna use both of these now what I'm going to do now is I'm going to need to let's locate the class definition right here 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 where the properties may be passed in what I need to do in the constructor is I need to initialize the state so I'm gonna do that by we're gonna have properties passed in just like this we need to say call the super constructor of this and then I also need to say that this state it's gonna be equal to colors is empty we're gonna initialize this in just a minute so this should be prompts like that now because this exercise is or this screencast is about working with react and fabric react I'm not going to focus too much on the data access part of the SharePoint REST API so to keep things simple I'm just going to copy and paste this method in and what this does is that this is a method says get colors from a SharePoint list and it's going to use the SharePoint HTTP client that's being passed in and it's going to specify call the colors list to get a list of all the colors and return those back to return 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 so the way you do that by you create a public method called component did mount and did mount this kind of like on a knit so I'm gonna say what happens in here well I'm gonna check all 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 and I'm going to 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 a SharePoint now the last thing I need to do is he need to handle the color what happens when someone I in the color list when they click that delete button wel