Search⌘ K
AI Features
Home
Courses
Building Tesla’s Battery Range Calculator with React & Redux

1.7 TeslaCar Component

Understand how to create the TeslaCar component in React, including setting up propTypes for type checking and adding CSS animations. Learn to style the component and import it into the main TeslaBattery container to enhance user experience with animated visuals.

We'll cover the following...

Now let’s render a nice Tesla car image with wheel animation.

Create the src/components/TeslaCar directory, create a TeslaCar.js file in it, and inside your TeslaCar.js file :

Javascript (babel-node)
import React from 'react';
import './TeslaCar.css';
const TeslaCar = (props) => (
  <div className="tesla-car">
    <div className="tesla-wheels">
      <div className={`tesla-wheel tesla-wheel--front tesla-wheel--${props.wheelsize}`}></div>
      <div className={`tesla-wheel tesla-wheel--rear tesla-wheel--${props.wheelsize}`}></div>
    </div>
  </div>
);
TeslaCar.propTypes = {
  wheelsize: React.PropTypes.number
}
export default TeslaCar;

Here we specify propTypes using the React built-in typechecking. In development mode, React checks props passed to the component. (Only in development mode for performance reasons) For each props attribute, React attempts to find it in the component’s propType object to determine whether (1) prop is expected (2) prop is the correct type. In this case, the TeslaCar component expects the props attribute wheelsize and specifies that it is a number type. If the wrong value is provided, a warning appears in the JavaScript console, which is useful for fixing potential bugs in early stage.

More information on React.PropTypes can be found here

Update: New Deprecation Warnings in React 15.5

In 15.5, instead of accessing PropTypes from the main React object, install the prop-typespackage and import them from here

JavaScript (JSX)
// Before (1.7 and below) import React from 'react';
import React from 'react';
import './TeslaCar.css';
.........................
TeslaCar.propTypes = {
  wheelsize: React.PropTypes.number
}
export default TeslaCar;
// After (1.7) 
import React from 'react'; 
import PropTypes from 'prop-types';
import './TeslaCar.css';
...........................
TeslaCar.propTypes = { 
  wheelsize: PropTypes.number
}
 
export default TeslaCar;

1.7.1 TeslaCar Component Style

Next, create a TeslaCar.css file in the src/components/TeslaCar directory and give it the following style. Since the code is long and omitted here, let’s check the source code.

NAME_
CSS
.tesla-car {
  width: 100%;
  min-height: 350px;
  background: #fff url(../../assets/tesla.jpg) no-repeat top center;
  background-size: contain; }
.tesla-wheels {
  height: 247px;
  width: 555px;
  position: relative;
  margin: 0 auto; }
...

This gives us our animations and the component base for the car, which is displayed as background images.

1.7.2 Import TeslaCar component in TeslaBattery Container

Next, we need to add this component to our container again. Import TeslaNotice component in TeslaBattery.js:

Javascript (babel-node)
...
import TeslaCar from '../components/TeslaCar/TeslaCar';
class TeslaBattery extends React.Component {
  render() {
    return (
      <form className="tesla-battery">
        <h1>Range Per Charge</h1>
        <TeslaCar />
        <TeslaNotice />
      </form>
    )
  }
}
...

Here’s what you should be seeing:

<?xml version="1.0" ?>
<svg width="1600px" height="208px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 13" enable-background="new 0 0 100 13" xml:space="preserve">
<g>
	<path fill="#FFFFFF" d="M0,0c0.3,1.1,1.3,2.3,2.6,2.6h4.1l0.2,0.1V13h2.5V2.7l0.2-0.1h4.1c1.4-0.4,2.3-1.5,2.6-2.6v0L0,0L0,0z"/>
	<path fill="#FFFFFF" d="M77.8,13c1.3-0.5,2-1.5,2.2-2.6H68.7l0-10.5l-2.5,0v13H77.8z"/>
	<path fill="#FFFFFF" d="M47.3,2.6h9C57.6,2.2,58.8,1.2,59,0L44.8,0v7.7h11.6v2.7l-9.1,0c-1.4,0.4-2.6,1.4-3.2,2.6l0.7,0H59V5.2
		H47.3V2.6z"/>
	<polygon fill="#FFFFFF" points="85.4,5.2 85.4,13 88,13 88,7.8 97.1,7.8 97.1,13 99.7,13 99.7,5.2"/>
	<path fill="#FFFFFF" d="M25.2,2.6h9.7c1.3-0.3,2.4-1.5,2.6-2.6h-15C22.9,1.2,23.9,2.3,25.2,2.6"/>
	<path fill="#FFFFFF" d="M25.2,7.8h9.7c1.3-0.3,2.4-1.5,2.6-2.6h-15C22.9,6.3,23.9,7.5,25.2,7.8"/>
	<path fill="#FFFFFF" d="M25.2,13h9.7c1.3-0.3,2.4-1.5,2.6-2.6h-15C22.9,11.6,23.9,12.8,25.2,13"/>
	<path fill="#FFFFFF" d="M87.7,2.6h9.7c1.3-0.3,2.4-1.5,2.6-2.6H85C85.3,1.2,86.3,2.4,87.7,2.6"/>
</g>
</svg>