Javascript avancé: Exemples de petits projets avec Vue.js, React, Angular

Introduction

Ce projet est conçu pour renforcer vos compétences en Vue.js, React.js, et Angular à travers une série d'exercices corrigés. Vous allez créer une application simple de gestion de tâches (To-Do List) avec chaque framework. Ce projet comprend des exercices qui vous guideront étape par étape.

Partie 1: Vue.js

Objectif

Créer une application de gestion de tâches avec Vue.js.

Exercices

Initialisation du Projet
- Créez un nouveau projet Vue.js.
- Configurez la structure de base avec Vue CLI.
```
npm install -g @vue/cli
vue create vue-todo-app
cd vue-todo-app
```

Composant de Tâche

Créez un composant Task pour afficher une tâche.
Ajoutez des props pour le titre et l'état de la tâche.

vue

<template>
  <div>
    <input type="checkbox" v-model="completed" />
    <span>{{ title }}</span>
  </div>
</template>

<script>
export default {
  props: ['title', 'completed']
};
</script>

Liste des Tâches

Créez un composant TaskList pour gérer et afficher une liste de tâches.
Utilisez une boucle v-for pour afficher plusieurs Task.

vue

<template>
  <div>
    <Task v-for="task in tasks" :key="task.id" :title="task.title" :completed="task.completed" />
  </div>
</template>

<script>
import Task from './Task.vue';

export default {
  components: { Task },
  data() {
    return {
      tasks: [
        { id: 1, title: 'Task 1', completed: false },
        { id: 2, title: 'Task 2', completed: true }
      ]
    };
  }
};
</script>

Ajouter des Tâches

Ajoutez un champ de saisie et un bouton pour permettre l'ajout de nouvelles tâches.
Gérez l'état de la nouvelle tâche dans TaskList.

vue

<template>
  <div>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="Nouvelle tâche" />
    <button @click="addTask">Ajouter</button>
    <Task v-for="task in tasks" :key="task.id" :title="task.title" :completed="task.completed" />
  </div>
</template>

<script>
import Task from './Task.vue';

export default {
  components: { Task },
  data() {
    return {
      tasks: [],
      newTask: ''
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ id: Date.now(), title: this.newTask, completed: false });
        this.newTask = '';
      }
    }
  }
};
</script>

Partie 2: React.js

Objectif

Créer une application de gestion de tâches avec React.js.

Exercices

Initialisation du Projet
- Créez un nouveau projet React.js.
- Configurez la structure de base avec Create React App.
```
npx create-react-app react-todo-app
cd react-todo-app
```

Composant de Tâche

Créez un composant Task pour afficher une tâche.
Ajoutez des props pour le titre et l'état de la tâche.

// Task.js
import React from 'react';

const Task = ({ title, completed }) => (
  <div>
    <input type="checkbox" defaultChecked={completed} />
    <span>{title}</span>
  </div>
);

export default Task;

Liste des Tâches

Créez un composant TaskList pour gérer et afficher une liste de tâches.
Utilisez une boucle pour afficher plusieurs Task.

// TaskList.js
import React, { useState } from 'react';
import Task from './Task';

const TaskList = () => {
  const [tasks, setTasks] = useState([
    { id: 1, title: 'Task 1', completed: false },
    { id: 2, title: 'Task 2', completed: true }
  ]);

  return (
    <div>
      {tasks.map(task => (
        <Task key={task.id} title={task.title} completed={task.completed} />
      ))}
    </div>
  );
};

export default TaskList;

Ajouter des Tâches

Ajoutez un champ de saisie et un bouton pour permettre l'ajout de nouvelles tâches.
Gérez l'état de la nouvelle tâche dans TaskList.

// TaskList.js
import React, { useState } from 'react';
import Task from './Task';

const TaskList = () => {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const addTask = () => {
    if (newTask.trim() !== '') {
      setTasks([...tasks, { id: Date.now(), title: newTask, completed: false }]);
      setNewTask('');
    }
  };

  return (
    <div>
      <input
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
        onKeyUp={(e) => e.key === 'Enter' && addTask()}
        placeholder="Nouvelle tâche"
      />
      <button onClick={addTask}>Ajouter</button>
      {tasks.map(task => (
        <Task key={task.id} title={task.title} completed={task.completed} />
      ))}
    </div>
  );
};

export default TaskList;

Partie 3: Angular

Objectif

Créer une application de gestion de tâches avec Angular.

Exercices

Initialisation du Projet
- Créez un nouveau projet Angular.
- Configurez la structure de base avec Angular CLI.
```
ng new angular-todo-app
cd angular-todo-app
```

Composant de Tâche

Créez un composant Task pour afficher une tâche.
Ajoutez des propriétés pour le titre et l'état de la tâche.

// task.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-task',
  template: `
    <div>
      <input type="checkbox" [(ngModel)]="completed" />
      <span>{{ title }}</span>
    </div>
  `
})
export class TaskComponent {
  @Input() title: string;
  @Input() completed: boolean;
}

Liste des Tâches

Créez un composant TaskList pour gérer et afficher une liste de tâches.
Utilisez ngFor pour afficher plusieurs Task.

// task-list.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-task-list',
  template: `
    <div>
      <app-task
        *ngFor="let task of tasks"
        [title]="task.title"
        [completed]="task.completed">
      </app-task>
    </div>
  `
})
export class TaskListComponent {
  tasks = [
    { id: 1, title: 'Task 1', completed: false },
    { id: 2, title: 'Task 2', completed: true }
  ];
}

Ajouter des Tâches

Ajoutez un champ de saisie et un bouton pour permettre l'ajout de nouvelles tâches.
Gérez l'état de la nouvelle tâche dans TaskList.

// task-list.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-task-list',
  template: `
    <div>
      <input [(ngModel)]="newTask" (keyup.enter)="addTask()" placeholder="Nouvelle tâche" />
      <button (click)="addTask()">Ajouter</button>
      <app-task
        *ngFor="let task of tasks"
        [title]="task.title"
        [completed]="task.completed">
      </app-task>
    </div>
  `
})
export class TaskListComponent {
  tasks = [];
  newTask = '';

  addTask() {
    if (this.newTask.trim() !== '') {
      this.tasks.push({ id: Date.now(), title: this.newTask, completed: false });
      this.newTask = '';
    }
  }
}

Modifié le: vendredi 17 mai 2024, 09:46