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.7 List State and Actions For Each Component

Refer to the entire component layout to create a list of states and actions for each component:

Press + to interact

TeslaCar Container :
	state : wheels
	action : N/A
TeslaStats Container :
	state : carstats(array)
	action : N/A
	
TeslaSpeedCounter Container : 
	state : config.speed
	action : SPEED_UP, SPEED_DOWN
TeslaTempCounter Container : 
	state : config.temperature
	action : TEMPERATURE_UP, TEMPERATURE_DOWN
	
TeslaClimate Container : 
	state : config.climate
	action : CHANGE_CLIMATE
TeslaWheel Container : 
	state : config.wheel
	action : CHANGE_WHEEL