React is fundamentally about Components. A development team's mindset needs to think and React components when creating an application you are using it. According to the official documentation which can be found at Reactjs.org React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time. A React components code contains all of the markup and logic required to display the UI. They should never contain any business logic. 

React is for taking data and displaying it. Any logic in a React application should only be there for display purposes. If you're creating a new component, then it should be made as a function. Prior to React version 16 components were generally a mixture of functional class components. Version 1600 features the allow components to be functions saying that class components will never be deprecated so there's no need to rush off and convert all components to functions. 

Here's some examples of function components. The component first is an arrow function that implicitly returns the markup for the components. The components second is an arrow function that explicitly returns the markup. The components third is an arrow function that has some logic before it returns to component markup and uses the value created in the logic and the return. Notice how all the function returns look like HTML, and that the component third return has some curly brace syntax inserted into it to use the date value. 

That's because the component isn't written in Vanilla JavaScript, it's written in a language Facebook developed for React called JSX. We'll cover what that is and how it affects us in another video. Note that all my components import React from the React package and are exported so they can be used elsewhere in the application. To use these components, I simply import them into the component I wish to render them from and insert them as HTML style element in the components returned like shown here in the up component. 

Another thing to note for the return of a function is that it returns a single outer element. This can be only valid HTML element, a composite element like a div that has many child elements any React component, null or a boolean false. returning null or a boolean false means that the component will not render anything. React provide some components in its library and a useful one is the fragment component as shown here. 

This is a non rendering wrapper that allows me to optimize my HTML by not having to put a render in element like a div to wrap the rest of my component markup. A components return must be pure. This means that it shouldn't modify the component state. It should return the same result each time it's created and does not indirectly interact with the browser. This is because they should interact with the virtual DOM which will cause the actual DOM to update. 

I can now look at my application in the browser. My application is now running after using the MPM start command from the terminal. It runs on local host port 3000 by default, and pointing my browser to this address allows me to view my application. Using the developer tools I can see the actual DOM has been rendered and any messages from React on the console. 

Using the components tab, which is there because I installed Chrome div tools for React, I can see my component hierarchy. Clicking on a component allows me to see its properties and also where it is actually positioned within the DOM. Previous three out version 16 components that help changing data called state had to be created as a class. 

A class component, had to extend React as component class and included at least the render function. The job of the render function was to return the markup for the component and as for the function component, the return must be pure. The example shown is a very basic cost component and you're right, it could easily have been a function component but in the past, if I needed it to be more complex say by adding a changeable state to it, I would have needed a constructor and other features like component lifecycle methods that weren't available in function components. 

Facebook have said they will never deprecate class components and it's possible you'll come across them if you're working with legacy applications. So it's important for us to know what they look like and what the extra functionality does.