When I first started building React applications nearly a decade ago, the transition from standard JavaScript to ES6 classes felt like a massive shift in how we structured UI logic.
One of the most common patterns I’ve used daily is the export default class syntax to define and share components across an application.
In this tutorial, I’ll show you exactly how to use this syntax to create robust React components, using examples that go beyond the basic “Hello World.”
What is the Export Default Class in React?
In React, the export default class extends React.Component statement is used to create a class-based component and make it available for use in other files.
The export default part means this is the primary thing being sent out of the file, allowing you to import it without using curly braces.
Method 1: Create a Basic Class Component
I often use this method when I need a standalone component that manages its own internal data, such as a simple calculator for US Sales Tax.
In this example, we’ll build a component that calculates the final price of an item based on a specific state’s tax rate.
import React from 'react';
// Exporting the class as the default export
export default class TaxCalculator extends React.Component {
constructor(props) {
super(props);
this.state = {
price: 100,
taxRate: 0.0625, // Massachusetts Sales Tax
};
}
render() {
const total = this.state.price + (this.state.price * this.state.taxRate);
return (
<div style={{ padding: '20px', border: '1px solid #ccc' }}>
<h2>US State Tax Calculator</h2>
<p>Base Price: ${this.state.price}</p>
<p>Tax Rate: 6.25% (MA)</p>
<h3>Total Price: ${total.toFixed(2)}</h3>
</div>
);
}
}I executed the code above and added the screenshot below.
When I write code like this, I always ensure the render() method is clean and focused solely on the UI output.
Method 2: Handle State and Events
During my years of developing dashboard tools, I’ve found that handling user input is where class components really shine due to their clear structure.
Let’s create a “Zip Code Validator” that simulates a user checking if a specific US zip code is eligible for “Next Day Delivery.”
import React, { Component } from 'react';
export default class ZipCodeChecker extends Component {
constructor(props) {
super(props);
this.state = {
zipCode: '',
isEligible: null
};
// Binding the event handler to the class instance
this.handleInputChange = this.handleInputChange.bind(this);
this.checkEligibility = this.checkEligibility.bind(this);
}
handleInputChange(event) {
this.setState({ zipCode: event.target.value });
}
checkEligibility() {
// Simulating a check for NY and CA zip codes
const validPrefixes = ['100', '902'];
const isMatched = validPrefixes.some(prefix => this.state.zipCode.startsWith(prefix));
this.setState({ isEligible: isMatched });
}
render() {
return (
<div style={{ margin: '30px', fontFamily: 'Arial' }}>
<h1>Check Delivery Eligibility</h1>
<input
type="text"
placeholder="Enter 5-digit Zip Code"
value={this.state.zipCode}
onChange={this.handleInputChange}
/>
<button onClick={this.checkEligibility}>Check Zip</button>
{this.state.isEligible !== null && (
<p>
{this.state.isEligible
? "Great news! You are eligible for Express Shipping."
: "Standard shipping only for this location."}
</p>
)}
</div>
);
}
}I executed the code above and added the screenshot below.
In this setup, I use the constructor to initialize the state and bind my methods, so the this keyword works correctly when the user clicks the button.
Method 3: Use Lifecycle Methods with API Calls
A huge advantage of using extends React.Component is the ability to tap into lifecycle methods like componentDidMount.
I’ve used this frequently to fetch real-time data, such as Federal Reserve interest rates or local weather updates for logistics apps.
The following example shows how to fetch data once the component is added to the page.
import React from 'react';
export default class StockTicker extends React.Component {
constructor(props) {
super(props);
this.state = {
stockSymbol: 'AAPL',
price: null,
loading: true
};
}
componentDidMount() {
// In a real app, you would call a financial API like Alpha Vantage
// We will simulate an API delay with setTimeout
setTimeout(() => {
this.setState({
price: 185.92,
loading: false
});
}, 1500);
}
render() {
return (
<div style={{ background: '#f4f4f4', padding: '15px' }}>
<h2>Market Watch: NASDAQ</h2>
{this.state.loading ? (
<p>Loading market data from New York...</p>
) : (
<p>
Current Price for <strong>{this.state.stockSymbol}</strong>:
${this.state.price}
</p>
)}
</div>
);
}
}I executed the code above and added the screenshot below.
This pattern is essential when you need to act only once when the UI first appears to the user.
Why Use Default Export Instead of Named Export?
I often get asked why we use export default instead of just export.
When you use export default, you are telling React that this component is the “star of the show” in this specific file.
It makes the import process much cleaner in your main App.js file.
With Default Export: import MyComponent from ‘./MyComponent’;
With Named Export: import { MyComponent } from ‘./MyComponent’;
From my experience, using default exports for components reduces naming conflicts and makes the project structure much easier for new developers to navigate.
Important Things to Remember
When working with class components and exports, there are a few “gotchas” I’ve learned to avoid over the years:
- One Default Export Per File: You can only have one default export in a single JavaScript file. If you have multiple components, use named exports for the others.
- Proper Naming: Always start your class name with a capital letter (e.g., ClassComponent, not
classComponent). React treats lowercase tags as HTML. - Super(props): If you use a constructor, you must call super(props) before anything else, or this.props will be undefined.
- Binding Methods: Remember that class methods aren’t automatically bound to the class instance. You’ll need to use arrow functions or .bind(this) in the constructor.
Common Errors and How to Fix Them
I’ve seen many developers run into the “Unexpected token” error when they forget to import React at the top of the file.
Even though newer versions of React (17+) don’t always require the import for JSX, it is still a best practice when extending React.Component.
Another common mistake is trying to use export default with const or let on the same line.
You can do export default class …, but you cannot do export default const …. You would have to define the constant first and then export it on a separate line.
In this guide, we’ve looked at the different ways to implement the export default class extends React.Component syntax.
Whether you are building a simple calculator or a complex data-fetching tool, understanding how to structure and export your classes is a fundamental skill for any React developer.
If you found this tutorial helpful, I recommend practicing by building a small app that uses different US-based data sets, like a mortgage calculator or a state-by-state holiday tracker.
You may read:
- How to Build a React Stepper Component
- How to Use Jest spyOn with React Components
- React Component Export Syntax
- How to Prevent Child Component Rerenders in React
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
