1.1 Introduction

In this short course, I will walk you through the process of building Tesla’s battery range calculator with React.

We’ll build the React version of Todd Motto’s Building Tesla’s battery range calculator with Angular 2 reactive forms.

We will reuse some materials such as data, images, and css style (with Todd’s permission of course). We will focus on rebuilding it in React way.

This is the final GIF image of our application.

🚀 Check out the live version before we get started.

💻 You can also check out the source code.

Note that you may need some basic React knowledge to follow this tutorial. See the following resources:

• React Official Documentation

• The Road to Learn React

• Become a data visualization engineer with React + D3v4

Now let’s create the application step by step.