React Training Course, Part 12: Workshop, Third Stage of Work on a TODO Application

In today's part of the translation of the course on React, we suggest you perform a practical task on building sets of components using JavaScript and continue working on a TODO application.



→ Part 1: Course Overview, React, ReactDOM, and JSX Reasons
→ Part 2: Functional Components
→ Part 3: Component Files, Project Structure
→ Part 4: Parent and Child Components
→ Part 5: Getting Started on a TODO Application, Basics of Styling
→ Part 6: Some of the features of the course, JSX and JavaScript
→ Part 7: Inline Styles
→ Part 8: continued work on the TODO application, familiarity with the properties of components
→ Part 9: Component Properties
→ Part 10: Workshop on working with the properties of components and styling
→ Part 11: dynamic markup generation and the map array method
→ Part 12: workshop, the third stage of work on the TODO application
→ Part 13: Class Based Components
→ Part 14: Workshop on Class Based Components, Component State
→ Part 15: workshops on working with the state of components
→ Part 16: the fourth stage of the work on the TODO application, event handling

Lesson 22. Workshop. Dynamic formation of component sets

→ Original

▍Job

Taking the standard React application project, created by create-react-app , and using the vschoolProducts.js data file code below, create an application that lists the Product components on the page, which is generated using the standard .map() method Based on data from vschoolProducts.js .

Do not forget, creating instances of the component, pass them the key attribute with a unique identifier, otherwise the system will issue a corresponding warning.

In the process of solving the problem, you can use the following template file App.js :

 import React from "react" import productsData from "./vschoolProducts" function App() { return (   <div>         </div> ) } export default App 

Here is the code for the vschoolProducts.js file:

 const products = [   {       id: "1",       name: "Pencil",       price: 1,       description: "Perfect for those who can't remember things! 5/5 Highly recommend."   },   {       id: "2",       name: "Housing",       price: 0,       description: "Housing provided for out-of-state students or those who can't commute"   },   {       id: "3",       name: "Computer Rental",       price: 300,       description: "Don't have a computer? No problem!"   },   {       id: "4",       name: "Coffee",       price: 2,       description: "Wake up!"   },   {       id: "5",       name: "Snacks",       price: 0,       description: "Free snacks!"   },   {       id: "6",       name: "Rubber Duckies",       price: 3.50,       description: "To help you solve your hardest coding problems."   },   {       id: "7",       name: "Fidget Spinner",       price: 21.99,       description: "Because we like to pretend we're in high school."   },   {       id: "8",       name: "Sticker Set",       price: 14.99,       description: "To prove to other devs you know a lot."   } ] export default products 

▍Decision

Here is the code for the App.js file:

 import React from "react" import Product from "./Product" import productsData from "./vschoolProducts" function App() {   const productComponents = productsData.map(item => <Product key={item.id} product={item}/>)     return (       <div>           {productComponents}       </div>   ) } export default App 

Please note that the id property of objects from the data file is not necessary to display on the screen. This property came in handy for us to set the key attribute of instances of the Product component created by the .map() method.

Here is the code for the Product.js file:

 import React from "react" function Product(props) {   return (       <div>           <h2><font color="#3AC1EF">{props.product.name}</font></h2>           <p>{props.product.price.toLocaleString("en-US", { style: "currency", currency: "USD" })} - {props.product.description}</p>       </div>   ) } export default Product 

Here we, when displaying the property containing the price of the product, which is visible in the component as props.product.price , use the toLocaleString() method, with which we format the amount of the product.

This is what the application project in VSCode looks like.


Application in vscode

And here is the application page in the browser.


Application page in the browser

Pay attention to the form in which the value of the goods.

Session 23. Workshop. TODO application. Stage 3

→ Original

Here we continue to work on the TODO application, which we have been doing here and here . In particular, here you will be asked to apply knowledge about the dynamic formation of lists of components to create a to-do list displayed by the application.

▍Job

Using the todosData.js data todosData.js , the contents of which are shown below, create a list of TodoItem components and output this list in the App component. Note that you will need to modify the TodoItem component TodoItem so that it can display the properties passed to it.

Here is the contents of the todosData.js file:

 const todosData = [   {       id: 1,       text: "Take out the trash",       completed: true   },   {       id: 2,       text: "Grocery shopping",       completed: false   },   {       id: 3,       text: "Clean gecko tank",       completed: false   },   {       id: 4,       text: "Mow lawn",       completed: true   },   {       id: 5,       text: "Catch up on Arrested Development",       completed: false   } ] export default todosData 

▍Decision

Here is the code for the App.js file:

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" function App() {   const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)     return (       <div className="todo-list">           {todoItems}       </div>   ) } export default App 

Here is the code for the TodoItem.js file:

 import React from "react" function TodoItem(props) {   return (       <div className="todo-item">           <input type="checkbox" checked={props.item.completed}/>           <p>{props.item.text}</p>       </div>   ) } export default TodoItem 

Here is the application project in VSCode.


Application in vscode

It should be noted that after the completion of the work envisaged by this practical lesson, we, despite the fact that we will equip the application with new features, will break its functionality. In particular, we are talking about the state of the flags. The checkboxes for setting the state of which the property was used for the props.item.completed property set to true will be set, the checkboxes for which the same property set to false was used will be cleared. But if you click the checkbox on the application page, nothing will happen, as we have incorrectly configured the corresponding HTML element. In the console you can see a warning about this.


Application page in browser and console warning

Later we will talk about the forms and correct our training application while continuing to work on it.

Results

In this lesson, you had the opportunity to practice creating component files, working with the properties passed to the component instances when creating them, and using the standard JavaScript array .map() method. In addition, here we continued to work on the training application. Next time, let's talk about class-based components.

Dear readers! Have you mastered the technique of using the JavaScript array .map() method to create sets of components?