13 Developing React.js apps with TypeScript

The React.js library (a.k.a. React) was created by a Facebook engineer Jordan Walke in 2013, and today it has 1300 contributors and 130K stars on GitHub! According to Stack Overflow Developer Survey of 2019, it’s the second most popular JavaScript library (jQuery remains the most broadly used library), and in this chapter, we’ll show how to start developing web apps in React using TypeScript. React is not a framework but a library responsible for rendering views in the browser (think of the letter V in the MVC design pattern).

The main player of React is a component, and the UI of a web app consists of components having parent-child relations. But if Angular takes control of the entire root element of the Web page, React allows you to control a smaller page element (e.g. a <div>) even if the rest of the page was implemented with any other framework or in pure JavaScript.

You can develop React apps either in JavaScript or in TypeScript and deploy them using tools like Babel and Webpack described in chapter 6, and without further ado let’s start by writing the simplest version of the Hello World app using React and JavaScript; we’ll switch to TypeScript in section 13.2.

13.1  Developing the simplest web page with React

13.2  Generating and running a new app with create-react-app

13.3  Managing the component’s state

13.3.1  Adding state to a class-based component

13.3.2  Using hooks for managing state in functional components

13.4  Developing a weather app

13.4.1  Adding a state hook to the App component

13.4.2  Fetching data with useEffect hook in the App component

13.4.3  Using props

13.4.4  How a child component can pass data to its parent

13.5  What’s Virtual DOM

13.6  Summary