تطبيق درجة الحرارة باستخدام React
مقدمة:
هل تساءلت يومًا عن كيفية بناء واجهة تفاعلية تعرض درجة الحرارة وتسمح للمستخدم بزيادة أو تقليل درجة الحرارة بشكل ديناميكي؟ في هذا المقال، سنستعرض مشروعًا بسيطًا وممتعًا يستخدم مكتبة React لتحقيق هذا الهدف. يعرض التطبيق درجة الحرارة الحالية ويسمح للمستخدم بتغييرها عبر الضغط على أزرار محددة.
مكونات المشروع:
المشروع يعتمد على مجموعة من المكونات الأساسية في React، ونستخدم مكتبة Bootstrap لتوفير تنسيقات أنيقة وسهلة الاستخدام. المكونات الرئيسية في هذا المشروع هي: Title, Button, وTempreature.
الكود ومكوناته:
App.js:
import React, { useState } from 'react';
import Title from '../Title';
import './tempreature.css';
import Button from '../Button';
export default function Tempreature() {
const [degre, setDegre] = useState(0);
function increaseDegre() {
setDegre(c => c + 1); // زيادة القيمة بمقدار 1
}
function decreaseDegre() {
setDegre(c => c - 1); // تقليل القيمة بمقدار 1
}
return (
<div className='container text-center'> {/* تحديد تنسيق العنصر */}
<Title text={"Tempreature"} className={"mt-5 mb-5"} /> {/* عرض العنوان */}
<div className="card bg-light m-auto" style={{ width: 300 }}>
<h1 className={`degre ${degre > 0 ? "bg-danger" : "bg-info"}`}>{degre}°C</h1> {/* عرض قيمة الدرجة */}
<div className='d-flex mx-auto gap-3 mt-5'>
<Button text='-' btnClass={"btn-lg"} onClick={decreaseDegre} /> {/* زر لتقليل الدرجة */}
<Button text='+' btnClass={"btn-lg"} onClick={increaseDegre} /> {/* زر لزيادة الدرجة */}
</div>
</div>
</div>
);
}
|
Title.js:
import React from 'react';
export default function Title({ text, className }) {
return (
<h1 className={className}>
{!text ? "Title" : text} {/* عرض النص الافتراضي "Title" إذا لم يتم تمرير أي نص */}
</h1>
);
}
|
Button.js:
import React from 'react';
export default function Button({ text = "click", btnClass, icon, onClick }) {
return (
<div>
<button className={btnClass} onClick={onClick}>
{icon}
{text || "click"} {/* عرض النص "click" إذا كانت خاصية text فارغة */}
</button>
</div>
);
}
|
هذا المشروع يعرض كيفية إنشاء تطبيق بسيط وديناميكي باستخدام React. التطبيق يوفر واجهة مستخدم تفاعلية تتيح للمستخدمين زيادة أو تقليل درجة الحرارة، مع تغيير لون الخلفية لتعكس التغييرات. يعد هذا المشروع مثالًا رائعًا للمبتدئين الذين يرغبون في تعلم React وبناء تطبيقات تفاعلية.
تعليقات
إرسال تعليق