การใช้ Grommet ใน React Applications

ในช่วงหลายปีที่ผ่านมา ระบบนิเวศของ React ได้เติบโตขึ้นพร้อมกับการประดิษฐ์ไลบรารีที่ช่วยในการพัฒนาแอปพลิเคชันของ React ในบทช่วยสอนนี้ เราจะเรียนรู้การใช้ Grommet เพื่อพัฒนาส่วนประกอบที่ตอบสนอง เข้าถึงได้ และเน้นอุปกรณ์เคลื่อนที่เป็นอันดับแรกสำหรับแอปพลิเคชัน React เราจะพิจารณาแนวคิดหลักอย่างละเอียด กรณีใช้งานบางส่วน และสร้างตัวอย่างง่ายๆ สิ่งสำคัญที่ควรทราบคือ Grommet เป็นโอเพ่นซอร์สที่มีดาว 6.9k บน GitHub

บทช่วยสอนนี้จะเป็นประโยชน์กับผู้อ่านที่สนใจในการพัฒนาส่วนประกอบที่ตอบสนองในแอปพลิเคชัน React โดยใช้ Grommet บทความนี้ต้องการความเข้าใจพื้นฐานเกี่ยวกับ React และ Styled-components

Grommet คืออะไร?

Grommet เป็นไลบรารีส่วนประกอบ React ที่มีส่วนประกอบรหัสแรกบนมือถือที่ตอบสนองและเข้าถึงได้ โดยทำผ่านส่วนประกอบต่างๆ ซึ่งเป็นส่วนประกอบสำคัญของห้องสมุด ประกอบด้วย Layouts, Types, Colors, Controls, Inputs, Visualizations Media และยูทิลิตี้ ส่วนประกอบ grommet ทั้งหมดได้รับการสร้างขึ้นโดยคำนึงถึงการช่วยสำหรับการเข้าถึงและการตอบสนอง

Grommet ให้การสนับสนุนข้อมูลจำเพาะของ W3C ซึ่งทำให้คะแนนมากในแง่ของการเข้าถึง นอกจากนี้ยังมีธีมและเครื่องมืออันทรงพลังที่ช่วยให้คุณปรับแต่งสี ประเภท องค์ประกอบองค์ประกอบ และความต้องการเลย์เอาต์ตามความต้องการของโปรเจกต์ของคุณ

ทางเลือกยอดนิยมสำหรับ Grommet ได้แก่ tailwindcss และส่วนประกอบที่มีสไตล์ แม้ว่าจะได้รับความนิยมอย่างมากในหมู่นักพัฒนา แต่เฟรมเวิร์กแต่ละเฟรมเวิร์กต่างกันในแนวทางในการสร้างแอปพลิเคชัน Grommet เป็นมือถืออันดับหนึ่ง เข้าถึงได้ ตอบสนองและมีธีมตั้งแต่แกะกล่อง และรองรับ W3C สำหรับการสร้างแอปพลิเคชัน React ที่ง่ายดาย ในขณะที่ Tailwind CSS เป็นเฟรมเวิร์กที่ปรับแต่งได้สูงและยูทิลิตี้ที่ช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันได้โดยไม่มีข้อจำกัดของ CSS เช่น กฎการเรียงซ้อน Styled-components มีเป้าหมายเพื่อช่วยให้นักพัฒนาเขียนส่วนประกอบ React ที่นำกลับมาใช้ใหม่ได้ โดยอนุญาตให้เราเขียนโค้ด CSS ใน JavaScript โดยใช้ตัวอักษรอ็อบเจกต์ และยังใช้ส่วนประกอบเป็นโครงสร้างการจัดสไตล์ระดับต่ำ

ในโครงการของเรา เราจะใช้ Grommet ในโครงการของเราเนื่องจากส่วนประกอบที่ปรับแต่งได้ การช่วยสำหรับการเข้าถึง และคุณสมบัติของชุดรูปแบบ ซึ่งเราต้องการในขณะที่ดำเนินการต่อในบทช่วยสอนนี้

การใช้ Grommet Components

Grommet ก็เหมือนกับไลบรารีส่วนประกอบอื่นๆ มากมายที่สร้างไว้ล่วงหน้าด้วยส่วนประกอบบางอย่างสำหรับเลย์เอาต์และธีม เช่น ส่วนประกอบ Box, Card และ Header หากต้องการใช้ก่อนอื่น คุณต้องติดตั้งแพ็คเกจ grommet โดยใช้ NPM หรือไหมพรม เช่นบล็อกโค้ดด้านล่าง

 npm i grommet styled-components

หรือ:

 yarn add grommet styled-components

จากด้านบน คุณจะเห็นว่าเราติดตั้ง styled-components ด้วย เนื่องจาก Grommet ใช้ styled-components เพื่อปรับแต่งสไตล์ในส่วนประกอบ ขอแนะนำให้ติดตั้งองค์ประกอบที่มีสไตล์ในโครงการของคุณ

ในการใช้ส่วนประกอบ Grommet ในโครงการ React คุณต้องนำเข้า grommet มาสร้างองค์ประกอบการ์ดด้านล่างเพื่ออธิบาย:

 import React from 'react'; import { Grommet, Card } from 'grommet'; export default function GrommetExample() { return ( <Card> <CardBody pad="medium">Body</CardBody> <Button icon={<Icons.Favorite color="red" />} hoverIndicator /> </Card> ); }

ในบล็อกโค้ดด้านบน ขั้นแรกให้นำเข้า Grommet และส่วนประกอบ Card จากแพ็คเกจ grommet ลงในไฟล์ของคุณ ต่อไปเราจะห่อส่วนประกอบของเราโดยใช้ส่วนประกอบ Card ที่เรานำเข้ามา คุณสามารถเพิ่มสไตล์ไปยังองค์ประกอบ Grommet เป็นวัตถุเหมือนที่เราทำกับ Button หรือสามารถจัดสไตล์โดยใช้องค์ประกอบที่มีสไตล์

มาดูตัวอย่างเพิ่มเติมของส่วนประกอบ Grommet โดยดูที่ส่วนประกอบของแบบฟอร์ม

ทำไมต้อง Grommet?

วัตถุประสงค์หลักของ Grommet คือการปรับปรุงประสบการณ์ของนักพัฒนาและทำให้การสร้างแอปพลิเคชัน React รวดเร็วยิ่งขึ้นด้วยส่วนประกอบที่เน้นอุปกรณ์พกพา เข้าถึงได้ และตอบสนองได้รวดเร็ว Grommet ปรับการออกแบบและเวิร์กโฟลว์ของนักพัฒนาได้อย่างราบรื่นเพื่อสร้างประสบการณ์ที่ราบรื่น ทำให้ทุกคนเริ่มต้นได้ง่ายมาก

Grommet ยังให้การสนับสนุนสำหรับตัวอ่านหน้าจอตั้งแต่แกะกล่อง ชุดรูปแบบต่างๆ เช่น Dark-mode นั้นมาจาก grommet นอกกรอบ และสามารถตั้งค่าได้โดยใช้ themeMode prop ในแอปพลิเคชัน React ดังด้านล่าง

 import React from "react"; import { Grommet, Box, Button, Heading, dark } from "grommet"; import { grommet } from "grommet"; const App = () => { const [darkMode, setDarkMode] = React.useState(false); return ( <Grommet full theme={grommet} themeMode={darkMode ? "dark" : "light"}> <Box pad="large"> <Heading level="1">Grommet Darkmode toggle</Heading> <Button label="Toggle Theme" primary alignSelf="center" margin="large" onClick={() => setDarkMode(!darkMode)} /> </Box> </Grommet> ); }; export default App;

ในบล็อคโค้ดด้านบน เราใช้คุณสมบัติ themeMode เพื่อเพิ่มโหมดมืด เราใช้ตัวดำเนินการ ternary เพื่อตรวจสอบว่าหน้านั้นอยู่ในโหมดมืดหรือไม่ เราสามารถสลับไปที่โหมดสว่าง ต่อไปเราได้เพิ่มปุ่มสำหรับการสลับระหว่างโหมดสว่างและโหมดมืดในแอปพลิเคชันของเรา คุณสามารถตรวจสอบได้ที่นี่สำหรับการสาธิตบน Codesandbox

Grommet ยังสามารถมีอยู่กับเฟรมเวิร์กอื่น ๆ และไม่ได้เพิ่มสไตล์ส่วนกลางที่จะส่งผลกระทบต่อส่วนประกอบที่มีอยู่ในแอปพลิเคชัน React ของคุณ ฟังก์ชันและสไตล์สามารถสอดแทรกเป็นวัตถุตามตัวอักษรสำหรับสไตล์ได้ Grommet ยังมีองค์ประกอบ Layout ซึ่งมีคุณสมบัติ CSS บางอย่างเช่น flexbox และยังใช้คุณสมบัติ flexbox ทั้งหมดเป็นอุปกรณ์ประกอบฉาก

Grommet มีไลบรารี่ขนาดใหญ่ของไอคอน SVG ที่สามารถเข้าถึงได้โดยใช้คอมโพเนนต์ <Icon /> ซึ่งแตกต่างจากเฟรมเวิร์กอื่นๆ Grommet มีส่วนประกอบสำหรับการแสดงข้อมูลเป็นภาพ เช่น แผนภูมิแท่ง แผนที่ และแม้แต่เครื่องมือติดตามความคืบหน้า

ปัจจุบันบริษัทหลายแห่งใช้ Grommet เพื่อสร้างแอปพลิเคชันในโลกแห่งความเป็นจริง ซึ่งรวมถึง Netflix, IBM, Sony, Samsung, Shopify, GitHub และ Twilio

การสร้างส่วนประกอบการกำหนดราคาด้วย Grommet

ตอนนี้เรารู้พื้นฐานและแนวคิดหลักของ Grommet แล้ว เราจะสร้างส่วนประกอบการกำหนดราคาโดยใช้ส่วนประกอบ Grommet ซึ่งควรมีส่วนประกอบต่างๆ เช่น การ์ด กล่อง และปุ่มจากไลบรารี Grommet

เพื่อไม่ให้เป็นการเสียเวลา เรามาเริ่มกันเลย!

การตั้งค่าสภาพแวดล้อมของคุณ

ขั้นแรก ให้สร้างแอปพลิเคชั่น React เปล่า เขียนบล็อคโค้ดด้านล่างบนเทอร์มินัลของคุณ

 create-react-app grommet-app

โค้ดด้านบนจะสร้างแอปพลิเคชั่น React เปล่าโดยใช้แพ็คเกจ create-react-app ย้ายไปยังไดเร็กทอรีโครงการ

 cd grommet-app

ถัดไปคือการติดตั้งการพึ่งพาที่เราต้องการในโครงการของเรา

 yarn add grommet styled-components

หากคุณทำเสร็จแล้ว ให้เริ่มเซิร์ฟเวอร์โครงการโดยใช้คำสั่งด้านล่าง

 yarn start

สำหรับโครงการนี้ เราจำเป็นต้องมีองค์ประกอบเดียวสำหรับการ์ดและรูปแบบที่มีองค์ประกอบที่มีสไตล์

มาสร้างการ์ดใบแรกด้านล่างกัน

 import React from "react"; import styled from "styled-components"; export default function GrommetCard() { return ( <> <CardWrapper> <Card left> <Div> <Div> <CardContent> <small>Basic</small> <h1>$588</h1> </CardContent> <CardContent> <p>500 GB storage</p> </CardContent> <CardContent> <p>2 Users Allowed</p> </CardContent> <CardContent> <p>Send Up To 3 GB</p> </CardContent> </Div> <CardButton secondary>LEARN MORE</CardButton> </Div> </Card> </CardWrapper> </> ); }

ในบล็อคโค้ดด้านบน เราใช้ส่วนประกอบ CardWrapper เพื่อห่อส่วนประกอบ Card ทั้งหมดของเรา ต่อไปเราได้เพิ่มส่วนประกอบใหม่ CardContent ซึ่งใช้เพื่อห่อเนื้อหาทั้งหมดของเราในแต่ละองค์ประกอบของการ์ด ส่วนประกอบ CardButton เป็นส่วนประกอบปุ่มที่ใช้กับการ์ดบน Grommet

ต่อไป มาสร้างสไตล์สำหรับแอปพลิเคชันของเราโดยใช้องค์ประกอบที่มีสไตล์ เขียนไฟล์ด้านล่าง:

 const primaryGradient = "linear-gradient(hsl(236, 72%, 79%), hsl(237, 63%, 64%))"; const CardWrapper = styled.div` display: flex; justify-content: center; align-items: center; height: max-content; margin: 20px; @media all and (max-width: 1240px) { flex-direction: column; } `;

ในข้างต้น เราได้กำหนดสไตล์วัตถุสำหรับ CardWrapper ของเราในแอปพลิเคชันของเรา มาเพิ่มสไตล์ออบเจ็กต์สำหรับองค์ประกอบการ์ดของเราด้านบนกันเถอะ

 const Card = styled.div` min-width: 380px; box-shadow: 3px -2px 19px 0px rgba(50, 50, 50, 0.51); border-radius: ${(props) => (props.left ? " 6px 0 0 6px" : props.right ? "0 6px 6px 0" : "6px")}; background: ${(props) => (props.secondary === undefined ? "#fff" : primaryGradient)}; padding: 25px 20px; height: ${(props) => (props.center ? "520px" : "480px")}; display: flex; justify-content: center; align-items: center; @media all and (max-width: 1240px) { margin-bottom: 20px; border-radius: 6px; height: 480px; } @media all and (max-width: 420px) { min-width: 90%; } `;

มาเพิ่มสไตล์ให้กับส่วนประกอบของเรากันดีกว่า

 const CardButton = styled.div` min-width: 100%; padding: 10px 15px; min-height: 50px; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.2); color: ${(props) => (props.secondary !== undefined ? "#fff" : "#7c7ee3")}; background: ${(props) => (props.secondary === undefined ? "#fff" : primaryGradient)}; text-align: center; margin-top: 25px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; border-radius: 6px; `; const CardContent = styled.div` width: 100%; color: ${(props) => (props.secondary !== undefined ? "#fff" : "#000")}; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1.3px solid #eee; text-align: center; `; const Div = styled.div` min-width: 100%; `;

เมื่อเราทำทุกอย่างเสร็จแล้ว โปรเจ็กต์ของเราควรจะคล้ายกับภาพด้านล่าง

เราจำเป็นต้องเพิ่มการ์ดเพิ่มเติมในส่วนประกอบของเราโดยใช้บล็อกโค้ดด้านล่าง

 <Card center secondary> <Div> <Div> <CardContent secondary> <small>Premium</small> <h1>$788</h1> </CardContent> <CardContent secondary> <p>75 GB storage</p> </CardContent> <CardContent secondary> <p>4 Users Allowed</p> </CardContent> <CardContent secondary> <p>Send Up To 5 GB</p> </CardContent> </Div> <CardButton>LEARN MORE</CardButton> </Div> </Card> <Card right> <Div> <Div> <CardContent> <small>PRO</small> <h1>$1000</h1> </CardContent> <CardContent> <p>1TB storage</p> </CardContent> <CardContent> <p>Unlimited Users Allowed</p> </CardContent> <CardContent> <p>Send Up To 10 GB</p> </CardContent> </Div> <CardButton secondary>LEARN MORE</CardButton> </Div> </Card> </CardWrapper> </> ); }

ที่นี่ เราได้สร้างส่วนประกอบการ์ดอีกสองชิ้น โดยเพิ่มส่วนประกอบที่กำหนดเองด้วยองค์ประกอบที่มีสไตล์ และใช้ออบเจ็กต์รูปแบบที่เรากำหนดไว้ด้านบนเพื่อห่อส่วนประกอบ Grommet และปรับปรุงการจัดสไตล์

ใบสมัครบัตรราคาสุดท้ายของเราควรมีลักษณะเหมือนภาพด้านล่าง

การใช้ Grommet ในการผลิต (แอพรายการอาคาร)

หากต้องการดูตัวอย่างการใช้งาน Grommet ในแอปพลิเคชันอื่น เราจะสร้างแอปง่ายๆ ที่จะให้ผู้ใช้เพิ่ม ดู และลบรายการได้ เราจะใช้ React Context API ที่สร้างขึ้นเพื่อจัดการสถานะของแอปพลิเคชัน Grommet สำหรับส่วนประกอบ UI ของเราและส่วนประกอบที่มีสไตล์สำหรับการจัดรูปแบบแอปพลิเคชันของเรา

อีกครั้ง ให้เริ่มต้นแอปตอบโต้โดยใช้คำสั่งด้านล่าง

 create-react-app list-app

cd ลงในไดเร็กทอรีโครงการ

 cd list-app

 yarn add grommet grommet-controls grommet-icons styled-components

ในบล็อกโค้ดด้านบน เราได้ติดตั้ง:

การสร้างบริบทแอพ

ในแอปพลิเคชัน เราจำเป็นต้องแบ่งปันข้อมูลของผู้ใช้ข้ามองค์ประกอบต่างๆ เพื่อให้บรรลุผลที่เราจะใช้ Context API ด้วยเหตุนี้ เราจึงสามารถสร้างบริบทแอปที่จะเก็บรายการและตรรกะสำหรับแอปพลิเคชันของเรา คุณสามารถดูบทความนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ Context API

ในการสร้างบริบทแอปของเรา ก่อนอื่นให้สร้างโฟลเดอร์ชื่อ context ในไดเร็กทอรี src ของแอปพลิเคชันของเรา จากนั้นสร้างไฟล์ชื่อ AppContext.js ซึ่งจะเป็นไฟล์สำหรับบริบทแอปทั้งหมดของเรา มาทำกันในบล็อกโค้ดด้านล่าง:

 import React, { createContext, useState } from 'react'; export const Context = createContext(); const AppContext = ({children}) => { const [lists, setLists] = useState([]); const removeList = item => { let newLists = [...lists]; lists.map((list, id) => { return list === item && newLists.splice(id, 1); }); setLists(newLists); }

ในบล็อกโค้ดด้านบน เรานำเข้าบริบท API hook createContext และ useState hook ทั้งหมดจาก React โดยใช้องค์ประกอบ useState เราสร้างสถานะส่วนกลางสำหรับแอปพลิเคชันของเรา สิ่งนี้ทำเพื่อให้ส่วนประกอบสามารถทำหน้าที่เป็นผู้ให้บริการบริบทสำหรับผู้อื่น ส่วนประกอบในแอปพลิเคชันของเรา ต่อไป เราได้สร้างตัวแปรใหม่ชื่อ removeList ซึ่งรับรายการเป็นพารามิเตอร์ โดยใช้ตัวดำเนินการสเปรด เราจะกระจายสิ่งที่อยู่ในสถานะและแยกวัตถุที่เท่ากับรายการที่เราต้องการลบออก

ต่อไป เราจะใช้ตรรกะข้างต้นเพื่อสร้างวิธีการเพิ่มและลบรายการในแอปพลิเคชันของเรา เราทำในบล็อกโค้ดด้านล่าง:

 return ( <Context.Provider value={{ lists, addToLists: (newItem) => setLists([...lists, newItem]), deleteFromList: (item) => removeList(item) }}> {children} </Context.Provider> ) } export default AppContext;

ที่นี่ เรากำลังส่งคืน Context.Provider และยอมรับอุปกรณ์ประกอบฉากย่อย เรากำลังทำเช่นนี้เพื่อให้องค์ประกอบอื่นสามารถเข้าถึงคุณสมบัติที่เราส่งผ่านไปยังค่า prop เราเริ่มต้นวัตถุ lists ที่จะใช้ในรายการของเรา วิธี addToList ใช้พารามิเตอร์ newItem เพื่อเพิ่มรายการใหม่ให้กับสถานะแอปพลิเคชันของเรา และ deleteFromList จะลบหรือลบรายการออกจากที่เก็บรายการ

การสร้างองค์ประกอบรายการ

ในส่วนนี้ เราจะสร้างองค์ประกอบรายการโดยใช้ Grommet สำหรับส่วนประกอบ UI และองค์ประกอบที่มีสไตล์เพื่อจัดรูปแบบบางส่วนของ UI ของเรา ขั้นแรก สร้างโฟลเดอร์ส่วนประกอบภายในไดเร็กทอรี src ของแอปพลิเคชัน จากนั้นภายในโฟลเดอร์ส่วนประกอบ สร้างไฟล์ใหม่ List.js และเขียนโค้ดด้านล่างลงในโฟลเดอร์

 import React from "react"; import styled from "styled-components"; import { Card, CardBody, Box, Text, Button } from "grommet"; function List(props) { return ( <StyledDiv> <Card> <CardBody className="card_body"> <Box direction="row" className="item_box"> <Text className="text">{props.list}</Text> <Box className="button_box"> <Button onClick={props.deleteList.bind(this, props.list)} className="button" > Delete </Button> </Box> </Box> </CardBody> </Card> </StyledDiv> ); } export default List;

ในโค้ดด้านบน ขั้นแรกเรานำเข้าส่วนประกอบ Card, CardBody, Box, Text และ Button จาก grommet ต่อไป เราได้สร้างส่วนประกอบ List เพื่อใช้เป็นอุปกรณ์ประกอบฉาก โดยใช้ส่วนประกอบ Grommet เราได้สร้างส่วนประกอบการ์ดที่มีปุ่มลบที่จะเพิ่มเข้าไปโดยอัตโนมัติ รายการ ถัดไปคือการจัดรูปแบบองค์ประกอบของเราด้านล่าง:

 const StyledDiv = styled.div` .button { background-color: #8b0000; color: white; padding: 10px; border-radius: 5px; } .card_body { padding: 20px; margin-top: 20px; } .item_box { justify-content: space-between; } .text { margin-top: auto; margin-bottom: auto; } `;

เมื่อเราทำด้านบนแล้ว คอมโพเนนต์ของเราควรมีลักษณะเหมือนภาพด้านล่าง

การสร้างส่วนประกอบการแสดงรายการ

ส่วนประกอบนี้แสดงรายการทั้งหมดที่เราเพิ่มเข้าไป และสร้างปุ่มลบโดยอัตโนมัติทันทีที่มีการเพิ่มรายการใหม่

 import React from "react"; import List from "./List"; import { Context } from '../context/AppContext'; function ListDisplay() { return ( <Context.Consumer> {(context) => ( <div className="container"> {context.lists.length ? context.lists.map((list, id) => ( <List key={id} list={list} deleteList={context.deleteFromList} /> )) : null } </div> )} </Context.Consumer> ); } export default ListDisplay;

ในองค์ประกอบนี้ เราได้สร้างฟังก์ชัน ListDisplay และรวมไว้โดยใช้ Context.Consumer จากองค์ประกอบ appContext ของเรา ถัดไปโดยใช้ div สำหรับคอนเทนเนอร์แท็กของเรา เราทำลายโครงสร้าง list และวิธี deleteList จากบริบทของแอป โดยการทำเช่นนี้เราสามารถ เพื่อส่งต่อเป็นอุปกรณ์ประกอบฉาก ต่อไป เราแมปผ่าน lists เพื่อส่งคืนรายการใหม่ ซึ่งเราสามารถใช้ในการสร้างรายการเดียวโดยส่งวัตถุที่ส่งคืนเป็นอุปกรณ์ประกอบฉากไปยังองค์ประกอบ List

องค์ประกอบของเราควรมีลักษณะดังนี้เมื่อเพิ่มรายการ:

ส่วนประกอบ NavBar

ส่วนประกอบนี้จะเป็นส่วนสำคัญของแอปพลิเคชันของเรา ที่นี่ เราจะใช้ส่วนประกอบของเราโดยใช้บริบท ผู้ Context.Consumer และคล้ายกับส่วนประกอบอื่นๆ ของเรา เราจะจัดสไตล์ด้วยส่วนประกอบที่มีสไตล์สำหรับการจัดสไตล์ มาสร้างองค์ประกอบด้านล่างนี้กัน

 import React, { useState } from "react"; import { Heading, Form, TextInput, Button } from "grommet"; import styled from "styled-components"; import { Context } from '../context/AppContext'; function Navbar() { const [value, setValue] = useState(""); return ( <Context.Consumer> {store => ( <StyledDiv className="container"> <Heading className="title">Grommet List App</Heading> <Form onSubmit={() => store.addToLists(value)} className="form-group"> <TextInput className="form" value={value} type="text" onChange={(e) => setValue(e.target.value)} placeholder="Enter item" /> <Button type='submit' className="button">Add to List</Button> </Form> </StyledDiv> )} </Context.Consumer> ); } const StyledDiv = styled.div` .button { margin-top: 10px; background-color: purple; color: white; padding: 10px; border-radius: 5px; } `; export default Navbar;

ก่อนอื่น เพื่อเข้าถึงคุณสมบัติในผู้ให้บริการบริบทของแอปพลิเคชัน เราได้รวมองค์ประกอบของเราไว้ในองค์ประกอบ Context.Consumer ต่อไป เราเพิ่มแท็ก Heading จาก Grommet จากนั้นเราสร้างฟอร์มอินพุตสำหรับเพิ่มรายการของเราโดยใช้เมธอด addToList ซึ่งรับพารามิเตอร์ค่า (ในกรณีของเรา ค่าคืออินพุตของผู้ใช้) สุดท้ายแต่ไม่ท้ายสุด เราได้เพิ่มปุ่มส่งเพื่อจัดการกับการส่งแบบฟอร์ม

เมื่อทำอย่างถูกต้องแล้ว แอปของเราควรมีลักษณะดังนี้:

บทสรุป

ในบทความนี้ เราได้เรียนรู้เกี่ยวกับ Grommet ซึ่งเป็นไลบรารีส่วนประกอบที่คำนึงถึงการตอบสนองและความสามารถในการเข้าถึง เรายังผ่านขั้นตอนการสร้างแอปพลิเคชันส่วนประกอบการกำหนดราคาโดยใช้ Grommet และแอปพลิเคชันรายการ ขอให้สนุกกับการใช้ Grommet สำหรับส่วนประกอบและความต้องการ UI สำหรับแอปพลิเคชัน React ครั้งต่อไปของคุณ รหัสสำหรับแอปพลิเคชันรายการ Grommet สามารถพบได้ใน Codesandbox และส่วนประกอบราคาสามารถพบได้ที่นี่

ทรัพยากร

• เอกสาร Grommet
• ข้อมูลเบื้องต้นเกี่ยวกับ Grommet
• บทนำสู่บริบท API ของ React