**Course Title:** Mastering React.js: Building Modern User Interfaces **Section Title:** Components and Props **Topic:** Creating and Nesting Components **Introduction:** In the previous topics, we covered the basics of React components, including functional and class components, JSX, and component structure. In this topic, we will dive deeper into creating and nesting components. Nesting components allows us to build complex user interfaces by combining smaller components into larger ones. This will enable you to create reusable and modular code that is easier to maintain and scale. **Key Concepts:** 1. **Component Nesting:** The process of creating a new component that wraps another component or multiple components. 2. **Component Hierarchy:** The structure of components that defines how they are nested and related to each other. 3. **Props:** Short for "properties," props are used to pass data from a parent component to a child component. **Creating a New Component:** To create a new component, we will use the `function` keyword to define a new JavaScript function that returns JSX. Here's an example of a simple component: ```jsx import React from 'react'; function Clock() { const [hours, setHours] = React.useState(0); const [minutes, setMinutes] = React.useState(0); const [seconds, setSeconds] = React.useState(0); React.useEffect(() => { const intervalId = setInterval(() => { setSeconds(seconds + 1); if (seconds === 59) { setMinutes(minutes + 1); if (minutes === 59) { setHours(hours + 1); setMinutes(0); } } }, 1000); return () => clearInterval(intervalId); }, [hours, minutes, seconds]); return ( <div> <h1>{hours}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}</h1> </div> ); } export default Clock; ``` This component uses the `useState` hook to store the current time and the `useEffect` hook to update the time every second. **Nesting Components:** To nest a component, we can use the `function` keyword to define a new component that wraps the original component. Here's an example: ```jsx import React from 'react'; import Clock from './Clock'; function App() { return ( <div> <h1>Mastering React.js: Building Modern User Interfaces</h1> <Clock /> </div> ); } ``` In this example, the `App` component nests the `Clock` component inside it. **Using Props:** Props are used to pass data from a parent component to a child component. To use props, we can define a prop in the child component's `props` parameter. Here's an example: ```jsx import React from 'react'; function Greeting(props) { return <h1>Hello, {props.name}!</h1>; } function App() { return ( <div> <h1>Mastering React.js: Building Modern User Interfaces</h1> <Greeting name="John" /> </div> ); } ``` In this example, the `Greeting` component receives the `name` prop from the `App` component and displays a personalized greeting. **Practical Takeaways:** 1. **Component Nesting:** Nesting components allows you to build complex user interfaces by combining smaller components into larger ones. 2. **Props:** Props are used to pass data from a parent component to a child component, making it easier to reuse code and pass data between components. 3. **State Management:** The `useState` hook is used to manage state in functional components, while the `useEffect` hook is used to handle side effects and update state. 4. **Component Hierarchy:** The structure of components that defines how they are nested and related to each other. **Exercise:** Create a new component that displays a list of items. Use the `map` function to render each item in the list. Use props to pass the list of items from a parent component. **Challenge:** Create a new component that displays a calendar. Use the `useState` hook to manage state and the `useEffect` hook to update the calendar state every day. **Links:** * [React documentation](https://reactjs.org/docs/getting-started.html) * [React components](https://reactjs.org/docs/components-and-props.html) * [React state and props](https://reactjs.org/docs/hooks-intro.html) **Leave a comment or ask for help:**