Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
A React component is a JavaScript function that returns JSX (HTML-like code). Think of it as a custom HTML tag that you can create and reuse throughout your application.
Components take data (props) and return what should be displayed on screen.
Create a component once and reuse it with different data throughout your app.
See a simple React component in action. Click "Run" to execute the code!
💡 Note: Modern JSX syntax with live preview! This is how you'll write React in real projects.
Modern, simple JavaScript functions that return JSX. This is the recommended approach.
function WelcomeMessage({ name }) {
return <h1>Hello, {name}!</h1>;
}
// Arrow function version
const WelcomeMessage = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};Older ES6 class-based components. Still supported but functional components are preferred.
class WelcomeMessage extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}React uses capitalization to distinguish between components and HTML tags.
❌ Wrong
<myComponent />Treated as HTML tag
✅ Correct
<MyComponent />React component
Components can only return a single root element or Fragment.
❌ Wrong
return ( <h1>Title</h1> <p>Text</p> )
✅ Correct
return (
<div>
<h1>Title</h1>
<p>Text</p>
</div>
)Unlike HTML, JSX requires all tags to be properly closed.
❌ Wrong
<img src="pic.jpg">Missing closing
✅ Correct
<img src="pic.jpg" />Self-closing tag
Follow these guidelines to write clean, maintainable React components!
UserProfile not UP/>Component1, ThingMyButton()2Button, my-buttonMake your components available to other files by exporting them:
// File: Button.jsx
function MyButton() {
return <button>Click Me! 🚀</button>;
}
// Export the component
export default MyButton;
// Export additional items
export const ButtonVariants = {
primary: 'purple',
secondary: 'gray'
};Use exported components in other files by importing them:
// File: App.jsx
// Import default export
import MyButton from './Button';
// Import named exports
import { ButtonVariants } from './Button';
function App() {
return (
<div>
<MyButton />
<button style={{backgroundColor: ButtonVariants.primary}}>
Styled Button
</button>
</div>
);
}components/Button/Button.jsx, components/Button/index.jsxLet's build a complex UI by combining smaller, focused components:
Displays user profile picture
Shows name and email
Combines Avatar + UserInfo
PascalCase for Components
UserProfileNavigationMenuDataTable❌ Avoid These
userProfile(lowercase)user_profile(snake_case)user-profile(kebab-case)PascalCase for Component Files
UserProfile.jsxButton.jsxNavigationMenu.jsxcamelCase for Other Files
utils.jsapiService.jsconstants.jsUserAvatar- Shows user's profile pictureSearchInput- Input field for searchingProductCard- Displays product infoLoadingSpinner- Shows loading stateErrorMessage- Displays error messagesComponent1- What does it do?Thing- Too genericStuff- MeaninglessData- What kind of data?Item- What kind of item?src/ ├── components/ │ ├── Button/ │ │ ├── Button.jsx │ │ ├── Button.module.css │ │ └── index.jsx │ ├── Card/ │ │ ├── Card.jsx │ │ └── index.jsx │ ├── UserProfile/ │ │ ├── UserProfile.jsx │ │ ├── Avatar.jsx │ │ └── index.jsx │ └── index.jsx ├── pages/ ├── utils/ └── App.jsx
JavaScript functions that return JSX and accept props as arguments.
Write once, use everywhere with different data and configurations.
Combine small components to build complex, maintainable interfaces.