Components: React apps are made out of components.
A component is a piece of the UI (user
interface) that has its own logic and appearance. A component can be as small as a button, or as
large as an entire page.
React components are JavaScript functions that return markup:
function MyButton() {
return (
<button>I'm a button</button>
);
Now that you’ve declared MyButton, you can nest it into another component:
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton />
</div>
);
Notice that <MyButton /> starts with a capital letter. That’s how you know it’s a React component.
React component names must always start with a capital letter, while HTML tags must be lowercase.
The export default keywords specify the main component in the file. The export declaration is used
to export values from a JavaScript module.
In React (JavaScript), export default is a syntax used to export a single value, function, class, or
component from a file so that it can be imported in another file.
Why Use export default?
Because it allows one main export per file, and you can import it with any name:
js
CopyEdit
// MyComponent.js
function MyComponent() {
return <h1>Hello</h1>;
export default MyComponent;
// App.js
import ABC from './MyComponent'; // 'ABC' works because it's the default export
✅ Example in React
js
CopyEdit
// Header.js
import React from 'react';
function Header() {
return <h1>Welcome!</h1>;
export default Header;
js
CopyEdit
// App.js
import Header from './Header';
function App() {
return (
<div>
<Header />
</div>
);
export default App;
🆚 export default vs export
Feature export default export (named export)
Export count Only one per file Multiple per file
Import name flexibility Can use any name Must match the exported name
Import syntax import X from '...' import { X } from '...'
💡 Tips
Use export default when the file has one main thing (e.g., a React component).
Use export (named export) when the file has multiple utilities.
js
CopyEdit
// Named export example
export function add() {}
export function subtract() {}
// Import named
import { add, subtract } from './math';
JSX is stricter than HTML. You have to close tags like <br />. Your component also can’t return
multiple JSX tags. You have to wrap them into a shared parent, like a <div>...</div> or an empty
<>...</> wrapper:
function AboutPage() {
return (
<>
<h1>About</h1>
<p>Hello there.<br />How do you do?</p>
</>
);
Adding styles
In React, you specify a CSS class with className. It works the same way as the HTML class attribute:
<img className="avatar" />
Then you write the CSS rules for it in a separate CSS file:
/* In your CSS */
.avatar {
border-radius: 50%;
React does not prescribe how you add CSS files. In the simplest case, you’ll add a <link> tag to your
HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS
file to your project.
Displaying data
JSX lets you put markup into JavaScript. Curly braces let you “escape back” into JavaScript so that you
can embed some variable from your code and display it to the user. For example, this will display
user.name:
return (
<h1>
{user.name}
</h1>
);
You can also “escape into JavaScript” from JSX attributes, but you have to use curly braces instead of
quotes. For example, className="avatar" passes the "avatar" string as the CSS class, but
src={user.imageUrl} reads the JavaScript user.imageUrl variable value, and then passes that value as
the src attribute:
return (
<img
className="avatar"
src={user.imageUrl}
/>
);
const user = {
name: 'Hedy Lamarr',
imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
imageSize: 90,
};
export default function Profile() {
return (
<>
<h1>{user.name}</h1>
<img
className="avatar"
src={user.imageUrl}
alt={'Photo of ' + user.name}
style={{
width: user.imageSize,
height: user.imageSize
}}
/>
</>
);
Conditional rendering
In React, there is no special syntax for writing conditions. Instead, you’ll use the same techniques as
you use when writing regular JavaScript code. For example, you can use an if statement to
conditionally include JSX:
let content;
if (isLoggedIn) {
content = <AdminPanel />;
} else {
content = <LoginForm />;
return (
<div>
{content}
</div>
);
If you prefer more compact code, you can use the conditional ? operator. Unlike if, it works inside
JSX:
<div>
{isLoggedIn ? (
<AdminPanel />
):(
<LoginForm />
)}
</div>
When you don’t need the else branch, you can also use a shorter logical && syntax:
<div>
{isLoggedIn && <AdminPanel />}
</div>
