Building Tesla’s Battery Range Calculator with React & Redux/

...

/

1.7 TeslaCar Component

1.7 TeslaCar Component

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>