کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ساخت یک **برنامه پیگیری وظایف (Task Tracker)** با استفاده از ReactJS یک پروژه عالی برای یادگیری اصول کار با این کتابخانه است. این برنامه به کاربران اجازه می‌دهد وظایف خود را اضافه، ویرایش و حذف کنند و وضعیت آن‌ها را پیگیری کنند.
### ویژگی‌های اصلی پروژه
1. **اضافه کردن وظایف**: کاربر می‌تواند وظایف جدیدی اضافه کند.
2. **حذف وظایف**: امکان حذف وظایف وجود دارد.
3. **تغییر وضعیت وظایف**: کاربر می‌تواند وضعیت هر وظیفه را تغییر دهد (انجام شده یا در حال انجام).
4. **فیلتر کردن وظایف**: امکان فیلتر کردن وظایف بر اساس وضعیت آن‌ها.
### مراحل پیاده‌سازی پروژه
#### ۱. راه‌اندازی پروژه React
برای راه‌اندازی یک پروژه React جدید، ابتدا با استفاده از **Create React App** یک پروژه جدید بسازید:
```bash
npx create-react-app task-tracker
cd task-tracker
```
#### ۲. نصب کتابخانه‌ها (اختیاری)
اگر بخواهید از `uuid` برای تولید شناسه‌های یکتا استفاده کنید، آن را نصب کنید:
```bash
npm install uuid
```
#### ۳. ساختار پروژه
فایل‌های زیر را ایجاد و ویرایش کنید:
- **`src/App.js`**
- **`src/TaskList.js`**
- **`src/TaskForm.js`**
#### ۴. کد `App.js`
فایل `src/App.js` را به صورت زیر ویرایش کنید:
```javascript
import React, { useState } from 'react';
import TaskList from './TaskList';
import TaskForm from './TaskForm';
import './App.css';
function App() {
const [tasks, setTasks] = useState([]);
const addTask = (task) => {
setTasks([...tasks, task]);
};
const deleteTask = (id) => {
setTasks(tasks.filter(task => task.id !== id));
};
const toggleTask = (id) => {
setTasks(tasks.map(task =>
task.id === id ? { ...task, completed: !task.completed } : task
));
};
return (
);
}
export default App;
```
#### ۵. کد `TaskList.js`
فایل `src/TaskList.js` را به صورت زیر ویرایش کنید:
```javascript
import React from 'react';
import './TaskList.css';
const TaskList = ({ tasks, deleteTask, toggleTask }) => {
return (
{tasks.map(task => (
toggleTask(task.id)}>{task.title}
))}
);
};
export default TaskList;
```
#### ۶. کد `TaskForm.js`
فایل `src/TaskForm.js` را به صورت زیر ویرایش کنید:
```javascript
import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import './TaskForm.css';
const TaskForm = ({ addTask }) => {
const [taskTitle, setTaskTitle] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (!taskTitle) return;
addTask({ id: uuidv4(), title: taskTitle, completed: false });
setTaskTitle('');
};
return (
type="text"
placeholder="وظیفه جدید..."
value={taskTitle}
onChange={(e) => setTaskTitle(e.target.value)}
/>
);
};
export default TaskForm;
```
#### ۷. استایل‌دهی با CSS
در صورت تمایل، میتوانید استایل‌های ساده‌ای برای این برنامه ایجاد کنید. به عنوان مثال، فایل‌های CSS زیر را اضافه کنید:
- **`src/App.css`**
```css
.app {
max-width: 600px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
```
- **`src/TaskList.css`**
```css
.task-list {
margin-top: 20px;
}
.task {
display: flex;
justify-content: space-between;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin: 5px 0;
}
.completed {
text-decoration: line-through;
color: gray;
}
```
- **`src/TaskForm.css`**
```css
.task-form {
display: flex;
justify-content: space-between;
}
.task-form input {
flex: 1;
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.task-form button {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.task-form button:hover {
background-color: #45a049;
}
```
### ۸. اجرای پروژه
برای اجرای پروژه، دستور زیر را در ترمینال وارد کنید:
```bash
npm start
```
سپس میتوانید برنامه را در مرورگر خود مشاهده کنید.
### نتیجه‌گیری
این پروژه "برنامه پیگیری وظایف" با استفاده از ReactJS به شما کمک می‌کند تا با مفاهیم اساسی React آشنا شوید. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند فیلتر کردن وظایف بر اساس وضعیت یا ذخیره‌سازی وظایف در `localStorage` را اضافه کنید. این یک تجربه عالی برای یادگیری و بهبود مهارت‌های برنامه‌نویسی شما است.
| صفحه قابل مشاهده: دانلود پروژه کاربردی ساخت یک **برنامه پیگیری وظایف (Task Tracker)** با استفاده از ReactJS می‌باشد
