In this section of the chapter, we have explored how to build our sample application using React. As we have seen, React uses JSX syntax, which combines HTML-style declarations right inside our TypeScript classes. For this reason, we need to use a .tsx extension for our TypeScript files instead of the standard .ts extension. We have seen how to create child components, and how a React component can make use of these child components in its own rendering function. We have built our sample application and seen how to use arrays of components, how to handle DOM events such as onClick, and how React uses callback functions to pass messages from a child component to a parent component.

We have also explored form processing, and seen how to set the default value of a form component in our code, and how to process the state variable to trap changes to our form values. Finally, we saw some improvements to the support for JSX within the TypeScript compiler, using rest syntax for component properties, and how to use default properties.

React is a very popular framework, and is different to other frameworks in the use of the JSX syntax. React components should be designed to handle a single small element of an overall screen, such that these components can be reused anywhere. React development is therefore about defining these components, and building your application up from the components that you have at hand.