Course Content
Expert React
Expert React
4. Formik
6. Next Steps
React Component
Key concepts to remember
- React follows a component-based architecture, promoting reusability and modularity.
- Components receive data and configuration through props, allowing parent components to pass information to child components.
- Components can have an internal state, allowing them to manage and update their data independently.
- React uses a virtual DOM for efficient updates and rendering, minimizing actual DOM manipulations.
- 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 themap()
method on an array of book objects. Each book object has anid
andtitle
property. Within themap()
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 thekey
attribute. - Line 23: The
BookList
component is exported as thedefault 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.
Everything was clear?