Gain insights into creating a full application using React and Redux by building Tesla’s Battery Range Calculator. Delve into component creation, user interactions, and cool animations.

This FREE interactive course is designed to teach how to create complete applications using React and Redux by building Tesla's Battery Range Calculator. 

You do need to understand the basics of React but other than that, this course takes you through the steps required to build each component, how to handle user interaction and how to create cool animations.

Building Tesla’s Battery Range Calculator with React & Redux


We monitor the temperature and change the `heating` to `aircon` when it is more than 20 degrees, and `heating` when it is below 20 degrees.

First create a directory `src/components/TeslaClimate`, create a `TeslaClimate.js` file in it, and enter the following code:

import React from 'react';
import PropTypes from 'react';
import './TeslaClimate.css';
const TeslaClimate = (props) => (
  <div className="tesla-climate">
    <label
      className={'tesla-climate__item ${props.value ? 'tesla-climate__item--active' : '' }  ${!props.limit ? 'tesla-heat':''}'}
    >
      <p>{props.limit ? 'ac' : 'heat'} {props.value ? 'on' : 'off'}</p>
      <i className="tesla-climate__icon"></i>
      <input
        type="checkbox"
        name="climate"
        checked={props.value}
        onChange={() => {props.handleChangeClimate()}}
      />
    </label>
  </div>
);
TeslaClimate.propTypes = {
  value: PropTypes.bool,
  limit: PropTypes.bool,
  handleChangeClimate: PropTypes.func
}
export default TeslaClimate;


This component changes the style class according to the `props.value` passed in, and changes the text according to `props.limit`.

`TeslaBattery` passes callback(`handleChangeClimate` in this case) to `TeslaClimate`, which is executed whenever the state needs to be updated. `onChange` event can be used to notify the event. The callback passed by `TeslaBattery` is called with `setState()` to update its state and re-render.
## 1.12.1 TeslaClimate Component Style
Create a `TeslaClimate.css` file in the `src/components/TeslaClimate` directory and specify the following styles. Since the code is long and omitted here, let’s check the [source code](https://github.com/gyver98/part1-react-tesla-battery-range-calculator-tutorial/blob/master/src/components/TeslaClimate/TeslaClimate.css).

.tesla-climate {
	  float: left; 
  }
  .tesla-climate__item {
    cursor: pointer;
    display: block;
    width: 100px;
    height: 100px;
    border: 6px solid #f7f7f7;
    border-radius: 50%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    color: #666;
    background: #fff; 
  }
  ...

## 1.12.2 Import TeslaClimate Component in TeslaBattery Container
Now we will implement `callback` in `TeslaBattery` and pass it to the `TeslaClimate` component.

First, add import to use the `TeslaClimate` component in `TeslaBattery.js`. We implement callback function `handleChangeClimate()` and bind it in `constructor()`. Then pass the callback function to the `TeslaClimate` component as `props`.

...
import TeslaClimate from '../components/TeslaClimate';
...
constructor(props) {
  super(props);
  ...
  this.handleChangeClimate = this.handleChangeClimate.bind(this);
  ...
}
// handle aircon & heating click event handler
handleChangeClimate() {
  const config = {...this.state.config};
  config['climate'] = !this.state.config.climate;
  this.setState({ config });
}
...
<TeslaClimate
  value={this.state.config.climate}
  limit={this.state.config.temperature > 10}
  handleChangeClimate={this.handleChangeClimate}
/>  
...


Now the state value changes according to the temperature change, and when the changed value is passed to the `TeslaClimate` component, the style class and text are changed according to the value.

<center><img src=""></center>

import React, { Component } from 'react';
import './App.css';
import Header from './components/Header/Header';
import TeslaBattery from './containers/TeslaBattery';

const counterDefaultVal = {
  speed: {
    title: "Speed",
    unit: "mph",
    step: 5,
    min: 45,
    max: 70
  },
  temperature: {
    title: "Outside Temperature",
    unit: "°",
    step: 10,
    min: -10,
    max: 40
  }
};

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
        <TeslaBattery counterDefaultVal={counterDefaultVal}/>
      </div>
    );
  }
}

export default App;

@font-face {
  font-family: 'RobotoNormal';
  src: url('./assets/fonts/Roboto-Regular-webfont.eot');
  src: url('./assets/fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('./assets/fonts/Roboto-Regular-webfont.woff') format('woff'),
       url('./assets/fonts/Roboto-Regular-webfont.ttf') format('truetype'),
       url('./assets/fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.cf:before,
.cf:after {
    content: '';
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
  *zoom: 1;
}

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

React


This component changes the style class according to the `props.value` passed in, and changes the text according to `props.limit`.

`TeslaBattery` passes callback(`handleChangeClimate` in this case) to `TeslaClimate`, which is executed whenever the state needs to be updated. `onChange` event can be used to notify the event. The callback passed by `TeslaBattery` is called with `setState()` to update its state and re-render.
# 1.12.1 TeslaClimate Component Style
Create a `TeslaClimate.css` file in the `src/components/TeslaClimate` directory and specify the following styles. Since the code is long and omitted here, let’s check the [source code](https://github.com/gyver98/part1-react-tesla-battery-range-calculator-tutorial/blob/master/src/components/TeslaClimate/TeslaClimate.css).

# 1.12.2 Import TeslaClimate Component in TeslaBattery Container
Now we will implement `callback` in `TeslaBattery` and pass it to the `TeslaClimate` component.

First, add import to use the `TeslaClimate` component in `TeslaBattery.js`. We implement callback function `handleChangeClimate()` and bind it in `constructor()`. Then pass the callback function to the `TeslaClimate` component as `props`.

Building React Components

Using Redux to manage State

Using CSS animations

1.12 Aircon and Heating Controls