Chapter 13. Developing React.js apps with TypeScript

 

This chapter covers

  • A quick intro to the React.js library
  • How React components use props and state
  • How React components communicate with each other

The React.js library (a.k.a. React) was created by a Facebook engineer, Jordan Walke, in 2013, and today it has 1,300 contributors and 140,000 stars on GitHub! According to the Stack Overflow Developer Survey of 2019, it’s the second-most popular JavaScript library (jQuery remains the most broadly used library). 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). In this chapter, we’ll show you how to start developing web apps in React using TypeScript.

The main players in React are components, and the UI of a web app consists of components having parent-child relations. But where Angular takes control of the entire root element of the web page, React allows you to control a smaller page element (such as a <div>) even if the rest of the page is implemented with another 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). 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 a component’s state

13.4. Developing a weather app

13.5. What’s Virtual DOM?

Summary

sitemap