Playcode Classic

Playground React

Ce playground React en ligne exécute vos composants dans votre navigateur. Modifiez App.jsx et l'app se met à jour pendant que vous tapez, avec React 18 et Tailwind CSS dans le modèle de départ, et les paquets npm à portée de clic. Rien à installer et pas besoin de compte pour commencer ; connectez-vous pour enregistrer et partager. Il fait partie de Playcode Classic, les outils de code gratuits de Playcode.

Gratuit. Pas besoin de compte pour commencer.

Dans un bac à sable de l'aire de jeux, un jeune développeur et Play construisent une app en grosses briques sur une plaque de base ; Play emboîte la dernière brique, un bouton orange, et une fusée attend au-delà de la clôture.

Modifiez un composant. L'app suit.

L'aperçu se reconstruit un instant après votre frappe. Chaque modification recharge l'app : son état repart de zéro.

Dans un petit théâtre de marionnettes de l'aire de jeux, Play manie les fils d'en haut, et la marionnette sur scène, une petite page web avec des bras, salue de la main pendant que le jeune développeur regarde depuis un banc.

Partez de la stack que vous utilisez

Importez depuis npm.

Importez un paquet, choisissez une version et installez-le d'un clic.

Vous avez un fichier .jsx ?

Collez-le dans un fichier et affichez-le depuis index.jsx.

Quand l'app a besoin d'un serveur

Le playground tourne dans votre navigateur : pas de serveur, pas de Next.js, pas de React Native. Quand une app a besoin d'un backend, d'une base de données et de son propre domaine, Playcode AI la crée et Playcode Cloud la fait tourner, avec un forfait payant.

Dans le bac à sable se dresse une fusée-jouet en briques ; au-delà de la clôture, la vraie fusée attend sur son pas de tir, reliée à une conduite de carburant, et Play la présente au jeune développeur, paume ouverte.

Un outil Playcode Classic

Playcode a vu le jour en 2016 sous la forme d'un environnement de développement dans le navigateur. Ce playground est l'un de ses outils de code gratuits, que nous appelons aujourd'hui Playcode Classic.

Aujourd'hui, Playcode est une plateforme IA pour créer et faire tourner des sites web et des apps.

Play, debout devant le portail ouvert d'une vieille aire de jeux, présente ce qui s'étend au-delà : une fusée prête sur son pas de tir.

Questions fréquentes

  • Cet éditeur React en ligne est-il gratuit ?

    Oui. Écrire du code et le prévisualiser est gratuit et ne demande aucun compte. Un compte gratuit permet de garder jusqu'à trois projets enregistrés, publics ou privés ; un domaine personnalisé nécessite un forfait payant, et le chat IA consomme des crédits.

  • Quelle version de React utilise-t-il ?

    React 18.3.1 dans chaque modèle de départ. La version vient de package.json.

  • Puis-je exécuter du code React en ligne sans rien installer ?

    Oui. Le playground est un bac à sable React dans votre navigateur, et il fonctionne comme un compilateur React en ligne : écrivez un composant, il s'affiche pendant que vous tapez. Aucun projet à configurer.

  • Prend-il en charge JSX et TypeScript ?

    Oui. Les fichiers .jsx et .tsx se compilent dans l'aperçu ; le modèle React et TypeScript vérifie vos types pendant que vous écrivez.

  • Puis-je utiliser des paquets npm ?

    Oui. Importez un paquet, choisissez une version et installez-le, ou ajoutez-le depuis le panneau Paquets npm.

  • Le hot reload est-il pris en charge ?

    L'app se met à jour pendant que vous tapez, mais chaque modification la recharge : son état repart de zéro. Il n'y a pas encore de Fast Refresh.

  • Puis-je utiliser Tailwind CSS ou les CSS Modules ?

    Tailwind CSS est inclus dans le modèle de départ. Les CSS Modules fonctionnent avec des fichiers .module.css ; les fichiers .module.scss ne sont pas encore pris en charge.

  • Puis-je développer avec Next.js ou React Native ici ?

    Non. Le playground exécute React dans votre navigateur. Pour une app avec un serveur et une base de données, Playcode AI la crée et Playcode Cloud la fait tourner, avec un forfait payant.

  • Puis-je ouvrir un fichier .jsx ?

    Oui. Collez-le dans un fichier du modèle React et affichez-le depuis index.jsx.

  • Puis-je partager mon playground ?

    Oui. Connectez-vous et enregistrez le projet. Dans son onglet Partager, réglez « Toute personne avec le lien » sur « Peut consulter », puis copiez le lien.

  • Ce playground fait-il partie de Playcode ?

    Oui. Ce playground fait partie de Playcode Classic, les outils de code gratuits de Playcode. Playcode a vu le jour en 2016 sous la forme d'un environnement de développement dans le navigateur. C'est aujourd'hui une plateforme IA pour créer et faire tourner des sites web et des apps.

D'autres outils de code gratuits

Écrivez un composant. Voyez-le tourner.

Une fusée attend, porte ouverte et siège libre, et Play vous invite à monter. Tout là-haut, une autre fusée s'éloigne.