Nice to see you again! I introduced components as the building blocks of React applications. That’s right. A component is a combination of markup, CSS, and JS. Let’s get right to writing our first component.
const NavBar = () => {
return (
<>
<ul style={{ color: 'red', backgroundColor: 'yellow'}}>
<li> Home </li>
<li> About </li>
<li> Contact </li>
</ul>
</>
)
}
export default Navbar;
Just like that, you have written your first component. You can see that HTML markup, CSS, and JS are all present in the component. We can also see a strange writing, export default Navbar, at the end. Let’s talk about that.
Export Component
The keyword export default is a JavaScript syntax that lets you mark the main function in the file so you can import it into other files. Without doing this, you won’t be able to call your components in other files. Let’s make our first import by importing the NavBar component into another file.
import NavBar from './Navbar'
const Home = () => {
return (
<>
<NavBar />
<p> This is the home page </p>
</>
)
}
We have successfully imported the Navbar component into the Home Component. This allows us to use the Navbar component within it, displaying the navbar links seamlessly. Without the import, the Navbar component would not be accessible.
Define Function
I mentioned earlier that a component is a combination of JS, CSS, and HTML markup. Now, let’s talk about the JS in it. We can all agree that at first glance of the component structure looks like a JS function—well, you are correct.
const Home = () => {
return ()
} // This is similar to a function in JS
There is not much difference between this and the regular arrow function in JS. We can say that React components are merely JS functions, with the key distinction being that their names are capitalized.
Add Markup
React components return JSX markup. JSX allows you to embed HTML markup inside JavaScript. Yes, that is what we have been doing all along. The JSX markup comes after the return statement.
const Home = () => {
return <div> This is the Home Page </div>
}
export default Home;
The example above will run perfectly well. You will need to wrap the markup with parentheses if your markup is more than one line. Now, let’s write the code for this scenario
const Home = () => {
return (
<>
<div> This is the home page </div>
<p> It is an empty one for now, adding more components soon </p>
</>
)
}
export default Home;
The multi-line markup must have a shared parent. In the case above, the React fragment is the parent for all the markup inside it. What will happen if you forget to add the parentheses after the return statement? Well, to answer this, the code on the lines after the return will be ignored.
const Home = () => {
return <div> This is the home page </div>
<p> It is an empty one for now </p> // this line will be ignored
}
export default Home;
Only the first div will be shown on the browser. Be careful not to make this mistake.
Using Components
You can nest a component inside another component, and you can call it as many times as you want. Let’s see how this works.
const Button = () => {
return <button> Click Me </button>
}
export default Button;
import Button from './button'
const Home = () => {
return (
<>
<div> This is the Home Page </div>
<Button />
<Button />
<Button />
</>
)
}
export default Home;
From the above scenario, you will have three buttons showing on the homepage. You can try a little challenge here.
Importing and Exporting Components
When you have React installed, I have not covered the installation and setup of React here. You can find it in the documentation. In your React setup, your root App component file is most likely App.js. It serves as the starting point for rendering all other components in the application.
Assuming we want to build Home and About components, rather than writing the components that make up the Home component directly inside the App component, like this:
const App = () => {
return (
<>
<Navbar />
<Hero />
<HomeCard />
</>
)
}
export default App;
In the code above, the components in it are specific to the home page, so it would only make sense to create a new file called home.js and place the components that relate to the home page in it. Let’s do just that.
const Home = () => {
return (
<>
<Navbar />
<Hero />
<HomeCard />
</>
)
}
export default Home;
import Home from './home'
const App = () => {
return (
<Home />
)
}
export default App; // default export
If we want to display the About component, we can easily do that by replacing the Home component with the About component. This gives a more modular and efficient structure.
A file can have no more than one default export, but it can have as many named exports as you like. A default export is the one with the default keyword while named export are the ones without the default keyword. Let’s create another file for the Footer component and also add a SearchBar component to the home.js file.
const Footer = () => {
return (
<>
<p> Copyright © 2025 </p>
<p> Read our privacy policy </p>
</>
)
}
export default Footer; // default export
export const SearchBar = () => { // named export
return (
<>
<label>Search: </label>
<input type="text" placeholder="search" />
</>
)
}
const Home = () => {
return (
<>
<Navbar />
<SearchBar />
<Hero />
<HomeCard />
</>
)
}
export default Home; // default export
We have two components in the home.js file. As I mentioned earlier, there can only be one default export with multiple named exports. There are different ways to import components depending on the export type. Let’s see how we can call this inside another component.
import Home from './home' // importing default export component
import { SearchBar } from './home' // importing named export component
import MyFooter from './footer' // importing default export component
const App = () => {
return (
<>
<Searchbar />
<Home />
<MyFooter />
</>
)
}
export default App; // default export
When importing, the named export component name is placed between curly braces. For the default export, the braces are not required, and it can be renamed from the original component name. You can see from the above example that the Footer component is renamed to MyFooter during import. This scenario works only for default exports. Regardless, a good naming convention should be applied to default exports.
People often use default exports if the file exports only one component and named exports if multiple components are present in the file.
You can take a little challenge here.
Conclusion
We’ve covered a lot about React component. Here are the key takeaways:
All React components start with a capital letter.
Parentheses follows the
returnkeyword for multi-line markupStructure your components in a modular and efficient way to provide clarity
There must only be one default export in a file
Named export components are imported with their name in curly braces
These points will serve as a strong reminder of the rules for writing React components. Let’s learn React together—see you next time!