Learn React 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

## 
In our app, the `TeslaBattery` component is responsible for creating and managing data and state as `Container Component`, passing it to other `Presentational Components`, performing a callback function and changing its state.

By inheriting `React.Component, TeslaBattery` must have a `render` method, optionally it can initialize its state through the `constructor`, and implement other methods such as [lifecycle](https://facebook.github.io/react/docs/react-component.html) callbacks.

`lifecycle callbacks` are useful when you want to render or update components, or to receive notifications at different stages of `lifecycle`.

Create the `src/containers` directory, create a `TeslaBattery.js` file in it, and enter the following code:

import React from 'react';
import './TeslaBattery.css';
class TeslaBattery extends React.Component {
  render() {
    return (
      <form className="tesla-battery">
        <h1>Range Per Charge</h1>
      </form>
    )
  }
}
export default TeslaBattery;


## 1.5.1 TeslaBattery Container Style
`TeslaBattery.css` only holds a minimal style.

.tesla-battery {
  width: 1050px;
  margin: 0 auto;
}
.tesla-battery h1 {
  font-family: 'RobotoNormal';
  font-weight: 100;
  font-size: 38px;
  text-align: center;
  letter-spacing: 3px;
}


The components to be created in the future will be configured in the `TeslaBattery` container sequentially.

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

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

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

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

React

#  
In our app, the `TeslaBattery` component is responsible for creating and managing data and state as `Container Component`, passing it to other `Presentational Components`, performing a callback function and changing its state.

By inheriting `React.Component, TeslaBattery` must have a `render` method, optionally it can initialize its state through the `constructor`, and implement other methods such as [lifecycle](https://facebook.github.io/react/docs/react-component.html) callbacks.

`lifecycle callbacks` are useful when you want to render or update components, or to receive notifications at different stages of `lifecycle`.

Create the `src/containers` directory, create a `TeslaBattery.js` file in it, and enter the following code:


# 1.5.1 TeslaBattery Container Style
`TeslaBattery.css` only holds a minimal style.

Building React Components

Using Redux to manage State

Using CSS animations

1.5 TeslaBattery Container

1.5.1 TeslaBattery Container Style