Développer React avec Qoder

Qoder est une plateforme de programmation IA construite sur le framework open source VSCode. Dans ce chapitre, nous présenterons le développement de React avec Qoder.

Qoder (/ˈkoʊdər/) est une plateforme de codage agentique pour le développement logiciel réel. En combinant de manière transparente une ingénierie de contexte améliorée avec des agents intelligents, il comprend entièrement votre base de code et fait progresser les tâches de développement de manière systématique.

Qoder offre des capacités telles que la génération de code intelligente, les questions-réponses intelligentes, la modification multi-fichiers et les agents de codage, permettant une réflexion plus approfondie, un codage plus efficace et de meilleurs builds, offrant une expérience de codage efficace et fluide aux développeurs.

L'édition personnelle de Qoder est actuellement disponible en essai gratuit pour tous les utilisateurs.

1. S'inscrire et installer Qoder

Nous visitonshttps://qoder.com/Inscrivez-vous pour un compte QoderWork (essai gratuit de la version Pro et recevez 300 crédits) :

Après l'inscription, cliquez sur le boutonTéléchargerdu coin supérieur droit. Selon votre système d'exploitation, téléchargez le programme d'installation.

Après le téléchargement, double-cliquez sur le fichier pour lancer l'installation, puis double-cliquez sur l'icône Qoder IDE pour lancer Qoder.

Liens associés :

2. Se connecter à Qoder

Dans le coin supérieur droit de l'IDE Qoder, cliquez sur l'icône utilisateur, ou utilisez le raccourci clavier (⌘ ⇧ , (macOS) ou Ctrl Shift , (Windows)), puis sélectionnez Connexion.

Si vous n'avez pas encore de compte, sur la page ouverte, cliquez sur le lien en basS'inscrire maintenantpour créer un compte, ou utilisez un compte Google ou GitHub pour vous inscrire directement.

Après une connexion réussie, vous reviendrez à l'IDE Qoder, puis nous pourrons utiliser librement toutes les fonctionnalités.

En regardant l'interface globale, Qoder fonctionne pratiquement de la même manière que VS Code. Comme Qoder est construit sur VSCode, ceux qui connaissent VS Code seront immédiatement à l'aise.

Ouvrez votre projet React

  1. Ouvrez Qoder.

  2. Méthode 1 : MenuFichier → Ouvrir le dossier, sélectionnez le dossier de votre projet (par exemple,my-first-react-app）。

  3. Méthode 2 (recommandée) : Dans le terminal, naviguez jusqu'au répertoire du projet, puis ouvrez en un clic :

    cd my-first-react-app
qoder .

    qoder .La commande ouvrira directement le dossier actuel avec Qoder.

Vous voyez maintenant l'explorateur de fichiers à gauche, affichant la structure du projet (comme src, public, etc.).

3. Démarrer une nouvelle conversation

Ouvrir le panneau de conversation intelligent

Pour démarrer une conversation IA, connectez-vous à Qoder, puis basculez la barre latérale secondaire dans le coin supérieur droit.

Ou ouvrez-le à l'aide d'un raccourci clavier. Le raccourci macOS est⌘ L, et le raccourci Windows estCtrl L。

Sélectionnez le mode :

  • Q&R intelligent :Un mode simple de questions-réponses pour répondre aux questions de programmation. Il fournit des solutions et des suggestions en fonction du contexte, mais ne modifie pas le code.
  • Agent :Un mode d'exécution autonome de tâches de codage avec prise de décision autonome, conscience de l'environnement et capacités d'utilisation d'outils. En fonction des besoins de codage du développeur, il peut accomplir des tâches de codage de bout en bout à l'aide d'outils tels que la recherche de projet, la planification, l'édition de fichiers et les opérations de terminal. Il prend également en charge les outils MCP (Model Context Protocol) configurables par le développeur, garantissant que le flux de travail de codage est fortement aligné avec les processus de développement personnels.

Ensuite, nous utilisons le modeAgentpour qu'il nous aide à optimiser le style de l'ensemble du projet :

Optimize the styling of the entire project

Ensuite, Qoder se met au travail et commence à effectuer des modifications. Lorsqu'il a terminé, nous cliquons sur le boutonAccept:

Après cela, Qoder affiche le résultat terminé :

De plus, Qoder dispose d'un mode Quest, qui est la fonctionnalité de programmation autonome de Qoder. Il permet à l'Agent d'accomplir des tâches de développement de bout en bout. Nous n'avons qu'à décrire l'objectif, et Quest clarifiera de manière autonome les exigences, planifiera les solutions, exécutera le code et vérifiera les résultats—sans intervention manuelle continue.

Pour utiliser le mode Quest, il suffit de l'activer dans le coin supérieur gauche :

4. Installez les plugins requis (Extensions)

Qoder prend également en charge l'installation de plugins. Cliquez sur l'icôneExtensions(quatre carrés) dans la barre d'activité de gauche, ou appuyez sur le raccourci clavierCtrl+Shift+X（macOS: Cmd+Shift+X) pour ouvrir la place de marché des extensions.

Recherchez et installez les plugins suivants (cliquez sur Installer) :

  • ESLint(Auteur : Microsoft)

    • Vérification des normes de code en temps réel, officiellement recommandée par React.
    • Après l'installation, les erreurs seront surlignées en rouge dans le code.

  • Prettier - Formateur de code(Auteur : Prettier)

    • Formate automatiquement le code pour maintenir un style cohérent.

  • ES7+ React/Redux/React-Native snippets(Auteur : dsznajder)

    • La puissance des extraits de code ! Saisissez des raccourcis pour générer rapidement des composants.
    • Extraits de code courants :
      • rafce→ Générer un composant fonction fléchée + export default
      • rfc→ Générer un composant fonction
      • useState→ Générer rapidement useState

  • Path Intellisense(Auteur : Christian Kohler)

    • Auto-complétion des chemins d'import (très utile lors des imports).

  • Bracket Pair Colorizer 2Ou la colorisation intégrée des parenthèses

    • Les parenthèses sont colorées pour faciliter la lecture du JSX imbriqué.

  • GitLens(Optionnel, mais fortement recommandé)

    • Amélioration de Git, consulter l'historique des commits du code.

Recommandations spécifiques à React(Avancé, optionnel) :

  • Tailwind CSS IntelliSense(Si vous utilisez Tailwind)
  • React Developer Tools(Extension de navigateur déjà installée, pas nécessaire ici)

Après l'installation, redémarrez Qoder (ou appuyez surCtrl+Shift+P → Reload Window）。

Autres extensions