วิธีการสร้างแอปแดชบอร์ดที่มีปฏิกิริยา

Sep 14, 2025
วิธีการ

ในบทช่วยสอนนี้เราจะเดินผ่าน วิธีการสร้างแอป การใช้ ทำปฏิกิริยา - ห้องสมุด JavaScript สำหรับการสร้างอินเทอร์เฟซผู้ใช้ นี้ เครื่องมือออกแบบเว็บ มีประโยชน์อย่างยิ่งเมื่อมาถึงการสร้างส่วนประกอบให้ผลประโยชน์ที่สำคัญมากกว่าสิ่งที่ jQuery

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

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

ต้องการสร้างเว็บไซต์มากกว่าแอพหรือไม่ คุณต้องการคำแนะนำของเราที่ดีที่สุด สร้างเว็บไซต์ และ เว็บโฮสติ้ง บริการ.

  • 19 ปลั๊กอิน jquery ที่ยอดเยี่ยม

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

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

ดาวน์โหลดไฟล์สำหรับบทช่วยสอนนี้ ที่นี่ .

01. ดาวน์โหลดการอ้างอิง

หลังจากได้รับไฟล์โครงการ (และบันทึกไว้ใน การจัดเก็บเมฆ ) เราต้องดึงแพคเกจที่ต้องการทั้งหมดที่เราต้องการสำหรับโครงการ เหล่านี้รวมถึงไฟล์จาก 'สร้างปฏิกิริยาแอป' ซึ่งเกี่ยวข้องกับกระบวนการสร้างสำหรับเรา

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

ป้อนสิ่งต่อไปนี้ในบรรทัดคำสั่งในขณะที่ภายในไดเรกทอรีโครงการ: 

 / * ในหนึ่งหน้าต่าง * /
& gt; ติดตั้งเส้นด้าย
& gt; จุดเริ่มต้นของเส้นด้าย
/ * ในหน้าต่างอื่น * /
& gt; เส้นด้ายให้บริการ

02. เพิ่มวิดเจ็ตแรก

react dashboard app

เริ่มต้นด้วยองค์ประกอบที่เรียบง่าย

ในการเริ่มต้นสิ่งต่าง ๆ เราจะแสดงองค์ประกอบที่เรียบง่ายในหน้า ด้วย Babel ตั้งค่าเราสามารถเขียนส่วนประกอบโดยใช้คลาส ES2015 สิ่งที่เราต้องทำคือนำเข้าเมื่อเราต้องการและ Babel กับ Webpack จะทำส่วนที่เหลือ

เปิดออก /src/components/app.js และเพิ่มการนำเข้าไปที่ด้านบนของหน้า จากนั้นภายในฟังก์ชั่นการแสดงผลให้วางส่วนประกอบภายในภาชนะ & lt; div & gt; . 

 เครื่องมือนำเข้าจาก
  '../components/widget';
[... ]
& lt; div classname = "app" & gt;
  & lt; วิดเจ็ต / & gt;
& lt; / div & gt;

03. สไตล์กล่องวิดเจ็ต

react dashboard app

เมื่อนำเข้า CSS ด้วย Webpack สไตล์สามารถกำหนดขอบเขตเป็นเพียงส่วนประกอบที่เป็นปัญหาเพื่อหลีกเลี่ยงการรั่วไหลไปยังส่วนอื่น ๆ ของหน้า

ในโครงการนี้ Webpack ถูกตั้งค่าเพื่อรับการนำเข้า CSS ซึ่งหมายความว่าเราสามารถนำเข้าไฟล์ CSS เช่นเดียวกับที่เราทำกับ JavaScript ในขั้นตอนก่อนหน้าซึ่งช่วยให้เราสามารถสร้างไฟล์แยกต่างหากสำหรับแต่ละองค์ประกอบ เพิ่มการนำเข้าต่อไปนี้ไปที่ด้านบนของ widget.js สิ่งนี้จะเชื่อมโยงกับชื่อคลาส 'วิดเจ็ต' และจะตั้งขอบเขตสไตล์ขององค์ประกอบนั้น 

 นำเข้า '../styles/widget.css's'; ه98]
  

   04. เพิ่มหัวเรื่องและเนื้อหา
  

  

   แต่ละวิดเจ็ตจะต้องมีคำอธิบายสั้น ๆ เกี่ยวกับข้อมูลที่แสดง เพื่อให้สิ่งต่าง ๆ สามารถปรับแต่งได้เราจะส่งสิ่งนี้ในฐานะที่เป็นทรัพย์สิน - หรือ 'prop' - ไปยังส่วนประกอบเมื่อเราใช้งาน
  

  

   สำหรับเนื้อหาตอบสนองวัสดุพิเศษ 'เด็ก' ซึ่งจะมีเนื้อหาที่ป้อนระหว่างการเปิดและปิดแท็กของคอมโพเนนต์
  

  

   แทนที่ตัวยึดตำแหน่ง
   
    & lt; p & gt;
   ในการแสดงผลการแสดงผลต่อไปนี้ คอมโพเนนต์การโหลดจะเข้ามาเล่นในภายหลัง
  

  
 & lt; div classname = "ส่วนหัว" & gt;
  & lt; h2 & gt; {props.heading} & lt; / h2 & gt;
  {this.props.loading? & lt; กำลังโหลด / & gt ;: ""}
& lt; / div & gt;
& lt; div classname = "เนื้อหา" & gt;
  {this.props.children}
& lt; / div & gt; 

  

   05. ให้วิดเจ็ตครอบคลุมตาราง
  

  

  

  

   

    

     

      
       
       
       react dashboard app
      
     

    

   

   

    
     ด้วยข้อมูลจำเพาะกริด CSS องค์ประกอบเค้าโครงเช่นการกลั่นท่อจะถูกนำไปใช้โดยไม่คำนึงถึงการจัดแต่งทรงผมใด ๆ ที่ใช้กับองค์ประกอบของเด็ก
    
   

  

  

   นอกเหนือจากสไตล์ชีทที่เรานำเข้าเรายังสามารถสร้างสไตล์ตอบสนองแบบไดนามิกขึ้นอยู่กับอุปกรณ์ประกอบฉากที่ผ่านผ่าน
  

  

   ในการขยายคอลัมน์และแถวที่มีตาราง CSS ใช้คุณสมบัติคอลัมน์กริดและกริด - แถว เราสามารถผ่านชิ้นงาน 'Colspan' และ 'Rowspan' เพื่อแก้ไขสิ่งนี้ต่อองค์ประกอบในลักษณะที่คล้ายคลึงกับวิธีการทำงานของเซลล์ตารางใน HTML
  

  

   ใช้สไตล์ในเครื่องมือสร้างวิดเจ็ตและเชื่อมโยงกับคอนเทนเนอร์
   
    & lt; div & gt;
   
   .
  

  
 ถ้า (props.colspan! == 1) {
  สิ่งนี้ spanstyles.gridcolumn
  = `ขยาย $ {props.colspan}`;
}
ถ้า (props.rowspan! == 1) {
  นี้ spanstyles.gridrow
  = `ขยาย $ {props.rowspan}`;
}
[... ]
& lt; div style = {this.spanstyles}
  Classname = "วิดเจ็ต" & GT; 

  

   06. จัดหาอุปกรณ์ประกอบฉากเริ่มต้น
  

  

   ตอนนี้วิดเจ็ตของเราว่างเปล่าเนื่องจากเราไม่ได้จัดหาอุปกรณ์ประกอบฉากใด ๆ ในกรณีเหล่านี้เราสามารถจัดหาอุปกรณ์ประกอบฉากเริ่มต้นที่จะใช้แทน
  

  

   เว้นแต่จะมีการบอกมิฉะนั้น CSS Grids จะเริ่มต้นที่จะใช้หน่วยที่เล็กที่สุดที่สามารถทำได้ในกรณีนี้คือ 1x1 สแควร์ ก่อนที่เราจะส่งออกวิดเจ็ตจัดหาอุปกรณ์ประกอบฉากเริ่มต้นบางอย่างให้กับเอฟเฟกต์นั้น
  

  
 widget.defaultprops = {
  หัวเรื่อง: "วิดเจ็ตที่ไม่มีชื่อ"
  colspan: 1,
  Rowspan: 1
} 

  

   07. บังคับใช้อุปกรณ์ประกอบฉากเฉพาะ
  

  

   

    

     

      
       
       
       react dashboard app
      
     

    

   

   

    
     คอมโพเนนต์ NumberDisplay เป็นองค์ประกอบ 'การนำเสนอ' เนื่องจากไม่มีสถานะภายในและขึ้นอยู่กับอุปกรณ์ประกอบฉากที่ส่งต่อไปทั้งหมด
    
   

  

  

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

  

   เพียงใต้อุปกรณ์ประกอบฉากเริ่มต้นกำหนดอุปกรณ์ประกอบฉากที่ควรหรือต้องผ่านและประเภทที่ควรจะเป็น
  

  
 widget.proptypes = {
  หัวเรื่อง: react.proptypes.string,
  colspan: react.proptypes.number,
  Rowspan: react.proptypes.number,
  เด็ก:
    react.proptypes.element.isrequired
} 

  

   08. เพิ่มอุปกรณ์ประกอบฉากลงในแอป
  

  

   ด้วยการกำหนดแนวทาง 'เด็ก' ตามที่ต้องการคุณอาจสังเกตเห็นว่าเบราว์เซอร์บ่นว่าปัจจุบันไม่ได้กำหนด ในขณะที่สิ่งนี้จะไม่ทำลายแอปมันจะติดตามเราต่อไปจนกว่าจะเรียงลำดับ
  

  

   มุ่งหน้ากลับไปที่ App.js และเพิ่มหัวเรื่องส่วนหัวไปยังวิดเจ็ตที่เราสร้างไว้ก่อนหน้านี้ แทนที่จะทำให้แท็กปิดตัวเองเปิดขึ้นและเพิ่มเนื้อหาตัวยึดตำแหน่งบางอย่างเพื่อแสดงการทำงาน
  

  
 & lt; Widget Heading = "Open Ticket Total" & GT;
  & lt; p & gt; นี่คือเนื้อหาบางอย่าง & lt; / p & gt;
& lt; / widget & gt; 

  

   09. แสดงข้อมูลบางอย่าง
  

  

   

    

     

      
       
       
       react dashboard app
      
     

    

   

   

    
     เราสามารถใช้ไวยากรณ์ @supports ใน CSS เพื่อตรวจสอบว่าเบราว์เซอร์รองรับเค้าโครงกริดหรือไม่ ถ้าไม่เราเริ่มต้นในมุมมองคอลัมน์เดียว
    
   

  

  

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

  

   นำเข้าคอมโพเนนต์ NumberDisplay ที่ด้านบนและใช้เพื่อแทนที่เนื้อหาตัวยึดที่คุณเพิ่งเพิ่มภายในวิดเจ็ต
  

  
 นำเข้า numberdisplay จาก '../components/numberdisplay';
[... ]
& lt; numberdisplay max = {9} value = {5} / & gt; 

  

   10. แปลงเป็น NumberWidget
  

  

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

  

   แทนที่วิดเจ็ตและการนำเข้า NumberDisplay ที่ด้านบนของ app.js กับ NumberWidget ตรวจสอบให้แน่ใจว่าได้แทนที่พวกเขาในวิธีการเรนเดอร์
  

  
 นำเข้าหมายเลข widget จาก
  '../components/numberwidget';
[... ]
& lt; numberwidget
  หัวเรื่อง = "รวมตั๋วเปิด"
Max = {9} value = {5} / & gt; 

  

   
    หน้าถัดไป: กรอกแอปแดชบอร์ดให้สมบูรณ์ในการตอบสนอง
  • 1
  • 2

หน้าปัจจุบัน: ทำแอปแดชบอร์ดในปฏิกิริยา - ขั้นตอนที่ 1-10

วิธีการ - บทความยอดนิยม

ถ่ายภาพบุคคล: วิธีการถ่ายภาพบุคคลที่สมบูรณ์แบบ

วิธีการ Sep 14, 2025

การถ่ายภาพบุคคลเป็นพระราชบัญญัติการทรงตัว - มีหลายสิ่งหลายอย่างที�..

สร้างบอทหย่อนที่กำหนดเอง

วิธีการ Sep 14, 2025

(เครดิตภาพ: นักออกแบบเว็บไซต์) Slack เป็นเครื่�..

สร้างพอร์ทัลลูกค้าด้วย WordPress

วิธีการ Sep 14, 2025

(เครดิตภาพ: นักออกแบบเว็บไซต์) มีพื้นที่ที�..

เริ่มต้นด้วย Redux Thunk

วิธีการ Sep 14, 2025

รัฐเป็นส่วนใหญ่ของแอปพลิเคชั่นตอบสนองซึ่งเป..

สร้างหน้าจอแอนิเมชั่นแยกหน้าจอ

วิธีการ Sep 14, 2025

หน้า Landing Page ของคุณเป็นองค์ประกอบสำคัญในตัวคุณ ..

ทำให้ตัวละครของคุณปรากฏด้วยสีและแสง

วิธีการ Sep 14, 2025

ฉันชอบทำงานสีจริง ๆ ไม่ว่าจะเป็น Photoshop CC หร�..

เตรียมงานของคุณสำหรับการพิมพ์ 3 มิติ: 8 เคล็ดลับยอดนิยม

วิธีการ Sep 14, 2025

การพิมพ์ 3 มิติได้รับความนิยมอย่างมาก หากคุณต้องการเริ่มพิมพ์ของคุ�..

วิธีการที่สมบูรณ์แบบผมในภาพของคุณ

วิธีการ Sep 14, 2025

หน้า 1 จาก 2: หน้า 1 หน้า 1 ..

หมวดหมู่