React Jamming Project

Guys, so I just found out that maybe there are 2 ways to export. When I am learning React, this is the first way to export and I implemented it in my code -->

export class SearchBar extends React.Component {
    render() {
        return(
            <div className="SearchBar">
            <input placeholder="Enter A Song, Album, or Artist" />
            <button className="SearchButton">SEARCH</button>
            </div>
        )
    }
}

Then, when I watched the video about the project (Jamming) I found they export it like this -->

export default SearchBar;

My question is which one should I use? Are they two are the same?

The way you export your component will impact how you import from other files.

You can even export both ways and use either import method if you want. If you have multiple components in one file that you want to export, then you’d probably want to use the 2nd method.

You’ll come across some lessons / exercises in your path about code splitting, importing, exporting, etc. because this topic goes beyond just React components. Even other syntax possible like import * as utils from './utils'

Note: I used ./ as the path for each of these examples, so that would need to be adjusted if they are in other directories, of course

1 Like

Thank you. Well explained. :slightly_smiling_face: