Back To Course Home

Building Tesla’s Battery Range Calculator with React & Redux

0% completed

Building React Components

1.1 Introduction 1.2 Project Setup and create-react-app 1.3 Breaking Down the UI 1.4 Header component 1.5 TeslaBattery Container 1.6 TeslaNotice Component 1.7 TeslaCar Component 1.8 Props and React Developer Tools 1.9 State of Application 1.10 TeslaStats Component 1.11 Reusable TeslaCounter Component 1.12 Aircon and Heating Controls 1.13 TeslaWheels Component 1.14 State Update 1.15 Build 1.16 Deploy 1.17 Conclusion

Using Redux to manage State

2.1 Introduction

2.2 What problem do we solve?

2.3 Data flow in Redux

2.4 Redux Core Concept

2.5 Redux Three Principles

2.6 Divide The App Into Containers and Components

2.7 List State and Actions For Each Component

2.8 Set up part 1 project code base

2.9 Create Action Creators For Each Action

2.10 Create Reducers For Each Action

2.11 The views: smart and dumb components

2.13 How they all work together

2.14 One more thing: Redux Dev Tools

2.15 Conclusion

Using CSS animations

3.1 Introduction 3.2 Warming up 3.3 Exercise

2.6 Divide The App Into Containers and Components

Now, let’s re-build our Tesla calculator app that we made in Part 1 as a Redux version.

First, let’s look at the overall component UI layout of the app that will be implemented in this article.

Placing React and Redux logic inside a single component can be messy, so it is recommended that you create a Presentational component for presentation purposes only, and a Container component, an upper wrapper component that handles Redux and dispatches actions.

The role of the parent Container component is to provide state values to presentational components, to manage events, and to communicate with Redux on behalf of presentational components.