Welcome to Day 3 of our React.js learning journey! Today, we will explore React components in more depth. Components are the building blocks of a React application, allowing you to create reusable and modular UI elements.
please subscribe to my YouTube channel to support my channel and get more web development tutorials.
Understanding React Components
In React, everything is a component. Components are like custom HTML elements that encapsulate the UI logic and behavior. There are two main types of components in React: functional components and class components.
Functional Components
Functional components are JavaScript functions that return JSX elements. They are simple, lightweight, and easy to read. Here's an example of a functional component:
function Greeting() {
return <h1>Hello, World!</h1>;
}
Class Components
Class components are ES6 classes that extend React.Component
. They have additional features like state and lifecycle methods. Here's an example of a class component:
class Greeting extends React.Component {
render() {
return <h1>Hello, World!</h1>;
}
}
Creating and Rendering Components
To create and render components in React, you simply need to import them into your application and include them in your JSX code. Here's how you can render the Greeting
component we defined earlier:
function App() {
return (
<div>
<Greeting />
</div>
);
}
Props in React Components
Props (short for properties) allow you to pass data from a parent component to a child component. They are read-only and help make your components dynamic and reusable. Here's how you can pass a prop to a component:
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return <Welcome name="Alice" />;
}
Conclusion
Today, you've delved deeper into React components, understanding the difference between functional and class components, creating and rendering components, and using props to make your components dynamic. Components are at the core of React development, enabling you to build complex UIs in a modular and scalable way.
Series Index
Part | Title | Link |
---|---|---|
1 | Day 1: React js Basics | Read Part 1 |
2 | Day 2 : Setting up the React Environment | Read Part 2 |
3 | Day 3: React Components | Read Part 3 |
4 | Day 4: React State and Hooks | Read Part 4 |
5 | Day 5: Conditional Rendering and Lists in React | Read Part 5 |
6 | Day 6: Advanced React Concepts | Read Part 6 |
7 | Day 7: Building a React Project 🏗️ | Read Part 7 |
8 | Day 8: Advanced React Topics | Read Part 8 |
In the upcoming days, we will explore more advanced React concepts, such as state management, hooks, and conditional rendering. Stay tuned for Day 4 of our React.js learning journey!
Top comments (2)
Cool. When glimsing code lines, i recognise some of them in SIEMENS DIGITAL SOFTWARES displaying. It is beautiful.
Next part -> Day - 4