React Component

Key concepts to remember

1. React follows a component-based architecture, promoting reusability and modularity.
2. Components receive data and configuration through props, allowing parent components to pass information to child components.
3. Components can have an internal state, allowing them to manage and update their data independently.
4. React uses a virtual DOM for efficient updates and rendering, minimizing actual DOM manipulations.
5. JSX is a syntax extension for writing HTML-like code within JavaScript files, making component structure and appearance more intuitive.

Example

Let's consider building a Book Shelve List component in React. Here's an example of how we can structure and implement this component:

Code explanation:

• Line 3: The code defines a React functional component named BookList.
• Lines 11-20: The component renders a <div> element containing an <h2> element with the text "Book shelve" and an <ul> element. The <ul> element displays a list of books by utilizing the map() method on an array of book objects. Each book object has an id and title property. Within the map() method, an <li> element is generated for each book, with the book's title set as the content and the book's id assigned as the key attribute.
• Line 23: The BookList component is exported as the default export, allowing it to be imported and used in other application parts.

Complete code

Challenge

Create the TaskList component that renders an array of task objects. It is supposed to be an ordered list containing five tasks.

Note

By default, all challenges will be broken. After fixing all the issues, the corrected live page will be shown. To fix the code, please drag the slider on the left side of the codesandbox where the file to be fixed is located. Additionally, to view the complete project structure, click on the burger button in the top left corner of the sandbox, which will display the project file folder structure.