 Hey, I'm Andrew Connell. This video is an overview of one of the chapters in my course that's available for purchase on my site, boytanos.io. This overview video is going to give you an idea of everything that the chapter covers. You can learn more by checking out the description and the notes below the video. If you got any questions about this chapter or about the course in general, just make sure you drop a comment below the video and I'll be sure to get back to you. So with that, let me get out of the way. Enjoy the overview to this chapter back to my course on mastering the SharePoint framework. When developing SharePoint framework solutions there, whether they're client side web parts or UI extensions, there's usually some sort of a visual component. Now, instead of mainly creating these interfaces, why not utilize a modern web framework to make your life easier? Framework simplified tasks such as data binding, event handling, UI construction and state management. In this chapter, we're going to explore how to use the popular web framework called React from Meta for your SharePoint framework customizations and creating engaging web apps. Microsoft relies on React across Microsoft 365, including SharePoint, to deliver consistent user experiences. You'll learn not only how to use React in your SharePoint framework components, but also how to use the provided Fluent UI React controls previously known as the Office UI Fabric React controls. These controls are used by SharePoint, other Microsoft 365 product groups and community control contributions as well. Now, let's preview what this chapter is going to cover. This chapter is going to begin with an overview of React and an explanation from the team behind it. The component model is integral to all React applications. So we're going to start there. I'll discuss the two approaches to building React apps. We'll understand what's supported not only in the SharePoint framework, but across the various SharePoint deployments where SPFX is supported from SharePoint Server 2016 all the way up to SharePoint Online. Then I'll discuss two different methods for building React apps, using class components or functional components, which is often referred to as just React hooks, since this is the feature that enabled us to be able to use functional components. These two methods differ greatly in understanding their distinctions is absolutely crucial. It's especially pertinent for SharePoint framework development. While one method is considered legacy and the other is more modern, some of you may still use the legacy approach because of what your deployments are. Now, in these lessons, I'll not only explain both methods, but I'm also going to build the exact same SharePoint framework web part app using each of the different methods, both class components and using React hooks. Now, these are brief demos. You'll see how to construct an interactive client-side web part as a multi-component React-based application. And this is going to cover properties, events, states, and as well as a concept called lifting the state. We'll get to that in a little bit. The next lesson is going to discuss the Fluid UI React, previously known as the Office UI Fabric React. And it's going to demonstrate how to use special controls within your components. Then I'll demonstrate how you implement Fluid UI React controls in the web part that we created during the earlier demos. And then finally, expanding on my chapter about testing SharePoint framework solutions, I'll demonstrate how to implement automated testing in your React apps. Now, before we delve into learning about React, there are a few important points that I want to call out first. In this chapter, I'm not going to attempt to teach you everything about React. This is a vast topic, and it's beyond the scope of this class on the SharePoint framework. But my goal is to make you comfortable enough to start your first React project in the SharePoint framework. And I want you to be able to open an existing React project, whether it's built using the class component model or the functional component approach with React. And I want you to be able to understand how things work, how they're related, and not feel like you're reading some foreign language you're not familiar with. There are numerous resources available for learning React in much more depth, such as newsletters, websites, articles, videos, and a bunch of other courses. I would start at react.dev. It's the official React site from Meta, where you'll find a brief tutorial and the API docs. Specifically, look for the Learn section. Let's get a whole tutorial walking through React as well. Now, just remember, in the SharePoint framework, we've never been on the latest version of React, so make sure you're looking at the docs for the version of React that you're using. I'll discuss more about React in the SharePoint framework versions in just a minute. Now, there are many great courses that delve deeper into React than this chapter is going to. After all, this course is on the SharePoint framework, not React. I want you to refer to the notes for the lesson below this video for my list of recommended courses and resources to enhance your React knowledge. I've reviewed all the ones listed, including the paid ones, and I recommend all of the ones that I'm listing here. By the end of this chapter, you should be able to create your own React-based SharePoint framework solutions or open up someone else's solution and feel comfortable with it making changes. And in this chapter, I'm also going to focus on using TypeScript with React. A lot of the courses and a lot of the demos use JavaScript, but in the SharePoint framework, we use TypeScript. Now, there isn't some special version of React for TypeScript, but I'm going to assume that you're going to also use TypeScript and your React projects, especially because we're working in the SharePoint framework. OK, let's get started learning React and using it to create robust SharePoint framework apps. But before we learn about the different approaches to create React apps, let's run through a quick little primer on what React is. And then, before I wrap up this lesson, I'm going to explain what versions of React the SharePoint framework supports. So what is React? React is a JavaScript library that is used for rendering user interfaces. It enables the combination of small user interface elements into reusable and nestable components. The moment you start with React, you're going to notice this thing called JSX. JSX stands for JavaScript Extended. It's a send-tax extension for JavaScript that allows us to write HTML-like markup directly in JavaScript files without having to quote it as a string. It's often mistaken for React itself, but these are two very distinct things. React leverages JSX. React uses JSX to build more efficient and productive applications. There's also something called TSX, which is just the JavaScript implementation in TypeScript. And this is typically what we're going to use in the SharePoint framework solutions. Now, our React components will be rendered whenever the state changes, including the initial state. And that's a fundamental React principle of how React operates. Any state change in a component is going to trigger React to re-render the entire component, or the parts that need to be re-rendered. Now, when working with the SharePoint framework, there are a few key points to remember. React, which is already present on the SharePoint application pages where our apps are hosted, is excluded from your bundles when you create a new SharePoint framework solution. Your project is going to reference React, but the SharePoint framework's build tool chain already prevents it from being included in the bundles. There's nothing you have to do to externalize it. It's already done. This means that you can use React in your SharePoint framework projects without any extra steps. However, it is important to only use a version of React that is supported and tested by the SharePoint framework, because this is going to prevent the need to download and load multiple versions of React onto the same page. React is not designed to run with multiple versions or instances on the same page, so it's best to stick to the version provided on your SharePoint page. Furthermore, the SharePoint framework supports a specific version of React, and while you might be tempted to use a more current version of React than what the SharePoint framework supports, this is not recommended. Instead, you should rely on the version that aligns with the version of the SharePoint framework that you're using. And this means that you may not be able to use the latest version of React, but it's preferable to avoid the risks of mixing and matching versions of running multiple versions of React on the same page. In summary, just be aware of your target environment, whether it's SharePoint online or any of the SharePoint server on-premises versions of where a SharePoint framework is supported. Always know what version of the SharePoint framework you're using and what version of React it supports. So let's discuss the component model in React. I want you to think of your entire application user experience as a UI tree where everything is a component. Components can be used to compose other components as well. For example, if we have a component called app, it can be the root of our application with child components inside of it, like inspiration generator and fancy text. Fancy text, which has a public property called text, accepts a string like hello world and it displays it in the application. The inspiration generator that contains other components and can conditionally show them based on logic. For example, if a Boolean value of don't show is set to false, the fancy text component is going to display the text on our page. This demonstrates how a component can house other components and how components can be conditionally rendered as well. As a React developer, you can build React applications two different ways. You can use functional components or class components and in fact you can mix and match them if you want to, which that comes in handy when you want to migrate an existing app over to the newer style. Class components were the original method of creating React components and they existed in React prior to React's version 16.8. Now this is the only option for building a React application for SharePoint Server on-premises deployments at least today. SharePoint Framework version 1.8.2 supports React 16.7. So if you're working with that version or any earlier version, you can only build apps using class components. However, React 16.8 introduced a new method of building React apps using React hooks and functional components. SharePoint Framework version 1.9.1 introduced support for React 16.8 which makes it the first and the lowest version of the SharePoint framework that allows the use of React hooks. This however is only available in SharePoint Online. So which one should you choose? React hooks and functional components whenever possible as they are more modern, future-proof, performant and easier to build with. React is also said, this is the way going forward and they also address many of the issues associated with class components. However, if you're working with any of the SharePoint Server on-premises deployments your only option is to use class components. From my perspective, that's the only reason why you should not be using React hooks and functional components. That wraps up my overview and introduction to the chapter on using React in SharePoint Framework apps. But in the next few lessons I'm going to explain and demonstrate each approach to building React apps. These are grouped into their own lessons so you can easily pick what's important to you and skip what isn't. For example, if you're only working in SharePoint Online and you're building a brand new project you're probably going to want to use React hooks so you can skip the class component lecture and demo. But if you're working in SharePoint Server and you're stuck on SharePoint Framework version 1.4 you can skip the React hooks lessons because they don't really apply to you. You can't use hooks in SharePoint Framework 1.4.1. Now in the next lesson I'm going to cover class components. So if you're working in SharePoint Online you might want to skip over this and jump straight into the React hook lessons. So I will see you in the next lesson or whichever one you jump to.