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

1.6 TeslaNotice Component

Explore how to build the TeslaNotice component with React by creating its structure, adding styles with CSS, and importing it into the TeslaBattery container. This lesson helps you understand component setup and integration for Tesla's Battery Range Calculator application.

We'll cover the following...

Let’s create a static text part with a TeslaNotice component.

Create the src/components/TeslaNotice directory, create a TeslaNotice.js file in it, and enter the following code:

Javascript (babel-node)
import React from 'react';
import './TeslaNotice.css';
const TeslaNotice = () => (
  <div className="tesla-battery__notice">
    <p>
      The actual amount of range that you experience will vary based
      on your particular use conditions. See how particular use conditions
      may affect your range in our simulation model.
    </p>
    <p>
      Vehicle range may vary depending on the vehicle configuration,
      battery age and condition, driving style and operating, environmental
      and climate conditions.
    </p>
  </div>
)
export default TeslaNotice;

1.6.1 TeslaNotice Component Style

Next up, create src/components/TeslaNotice directory, create TeslaNotice.css in it and add these styles to your TeslaNotice.css file:

Javascript (babel-node)
.tesla-battery__notice {
    margin: 20px 0;
    font-size: 15px;
    color: #666;
    line-height: 20px;
}

1.6.2 Import TeslaNotice component in TeslaBattery Container

Next, import TeslaNotice component in TeslaBattery.js:

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

We will continue in such a way that components are created in this pattern and imported from the TeslaBattery container.

<?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>