This tutorial provides a quick explanation of components and how to use them with React. Components are the basic building blocks for rendering UI in React. Using components allows you to isolate your UI into individual, reusable units that each take a list of arguments and return a React element. In this tutorial, we'll build out several React components using both functional and class component syntax.
NOTE: The following examples require a React setup with a bundler like Vite or Next.js. Refer to an initial setup guide for these tools if you're not already set up.
Key Takeaways
- React components can be created using functions or classes.
- Function components are preferred in modern React development.
- Components take props as arguments and return JSX.
Creating Components With Functions
To create a basic component, define a function that takes a single argument, usually named props. Following the naming convention, capitalize the function name. Here's how your index.js file should look:
index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
function Greeting(props){
return <h1>Hello, {props.name}</h1>
}
const element = <Greeting name="Sam" />
const container = document.getElementById('root');
createRoot(container).render(element);
This code renders a component using the function syntax. See how the function takes exactly one argument props and returns a React element.
The curly brackets within JSX are placeholders for dynamic values, in this example, the name attribute from props. You can define various properties for your components, but remember they're set as attributes within the element itself.
Update HTML
You're referencing the root element in the DOM. Ensure your index.html includes this element within the <body> tags:
<div id="root"></div>
This provides the correct element for createRoot to mount your component. Upon visiting index.html in a browser, you should see 'Hello, Sam.' If using such a bundler, make sure it compiles your JavaScript appropriately.
Creating Components with Classes
For ES6 or later, components can also be defined as classes, although this is less common with modern practices. Replace your Greeting function in index.js with:
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
This version offers the same functionality but in a different syntax, showcasing a class extending React.Component. Still viable, but often not necessary due to functional components' simplicity and hooks.
Conclusion
This is a brief insight into how components are created and rendered in React. Remember, components can nest within each other for more complex UIs. Keep components focused and independent for reusability and ease of maintenance.
FAQ
Can I use class components in modern React?
Yes, but functional components are generally preferred for new code due to their simpler syntax and the power of hooks.
How do I manage state in a React component?
In functional components, you manage state using the useState hook. For class components, state is managed via this.state and this.setState.
What are hooks?
Hooks are functions that let you 'hook into' React state and lifecycle features from function components.
Why avoid ReactDOM.render?
React's createRoot method replaces ReactDOM.render. It provides better performance and is essential for concurrent features.
