کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
سیستم اطلاعات ساده به زبان ReactJS با کد منبع
این پروژه یک سیستم اطلاعاتی ساده است که به کاربران اجازه می‌دهد اطلاعاتی را وارد کنند، مشاهده کنند و مدیریت کنند. این سیستم به‌عنوان یک الگو برای ساخت برنامه‌های بزرگتر و پیچیده‌تر می‌تواند مفید باشد. در این پروژه، کاربران می‌توانند اطلاعاتی را مانند نام، سن و شغل وارد کنند و سپس آن‌ها را در یک لیست مشاهده کنند.
### توضیحات پروژه:
این پروژه شامل یک فرم برای ورود اطلاعات و یک لیست برای نمایش اطلاعات واردشده است. اطلاعات در حافظه موقت نگهداری می‌شود و میتوانید آن‌ها را ویرایش یا حذف کنید. این پروژه به شما کمک می‌کند تا با مفاهیم اصلی کار با فرم‌ها و مدیریت وضعیت در React آشنا شوید.
### ویژگی‌های اصلی پروژه:
1. **ورود اطلاعات**: کاربران می‌توانند نام، سن و شغل را وارد کنند.
2. **نمایش لیست اطلاعات**: اطلاعات واردشده در یک لیست نمایش داده می‌شود.
3. **ویرایش و حذف**: کاربران می‌توانند اطلاعات را ویرایش یا حذف کنند.
4. **رابط کاربری ساده و کاربرپسند**: طراحی رابط کاربری ساده و کاربرپسند به کاربران اجازه می‌دهد به راحتی با برنامه تعامل داشته باشند.
### کد منبع نمونه:
در اینجا نمونه‌ای از کد منبع سیستم اطلاعات ساده آورده شده است:
#### ۱. ایجاد پروژه React
برای شروع، یک پروژه جدید React با استفاده از Create React App بسازید:
```bash
npx create-react-app info-system
cd info-system
```
#### ۲. کد `App.js`
فایل `App.js` را با کد زیر جایگزین کنید:
```javascript
import React, { useState } from 'react';
function App() {
const [name, setName] = useState('');
const [age, setAge] = useState('');
const [job, setJob] = useState('');
const [infoList, setInfoList] = useState([]);
const [editIndex, setEditIndex] = useState(null);
const handleSubmit = (e) => {
e.preventDefault();
if (editIndex !== null) {
const updatedList = infoList.map((info, index) =>
index === editIndex ? { name, age, job } : info
);
setInfoList(updatedList);
setEditIndex(null);
} else {
setInfoList([...infoList, { name, age, job }]);
}
setName('');
setAge('');
setJob('');
};
const handleEdit = (index) => {
setEditIndex(index);
setName(infoList[index].name);
setAge(infoList[index].age);
setJob(infoList[index].job);
};
const handleDelete = (index) => {
const updatedList = infoList.filter((_, i) => i !== index);
setInfoList(updatedList);
};
return (
سیستم اطلاعات ساده
type="text"
placeholder="نام"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
type="number"
placeholder="سن"
value={age}
onChange={(e) => setAge(e.target.value)}
required
/>
type="text"
placeholder="شغل"
value={job}
onChange={(e) => setJob(e.target.value)}
required
/>
لیست اطلاعات:
{infoList.map((info, index) => (
{info.name}, {info.age} سال, شغل: {info.job}
))}
);
}
export default App;
```
### ۳. اجرای برنامه
برای اجرای برنامه، از دستور زیر استفاده کنید:
```bash
npm start
```
### نتیجه‌گیری
این پروژه یک سیستم اطلاعاتی ساده و کاربرپسند است که به شما کمک می‌کند تا با مفاهیم پایه‌ای کار با فرم‌ها، مدیریت وضعیت و تعامل با کاربران در React آشنا شوید. میتوانید این پروژه را با اضافه کردن ویژگی‌های جدید، مانند ذخیره اطلاعات در پایگاه داده یا اضافه کردن قابلیت‌های بیشتر گسترش دهید.
| صفحه قابل مشاهده: دانلود پروژه سیستم اطلاعات ساده به زبان ReactJS با کد منبع می‌باشد
