Intégrations JSX

Intégrations dans les éditeurs

  • Sublime Text : babel-sublime : des extraits de code, une coloration syntaxique et des thèmes optimisés pour Sublime Text.
  • Atom : language-babel : prise en charge d’ES2016, de JSX et de Flow.
  • Visual Studio Code : Visual Studio Code prend en charge JSX par défaut.
  • JetBrains WebStorm : coloration syntaxique, complétion de code et détection d’erreurs pour JSX.
  • JetBrains IDE Live Templates : des modèles pour les éditeurs de JetBrains (comme WebStorm, PHPStorm, etc.)
  • javascript-jsx.tmbundle : gestion de la syntaxe pour TextMate.
  • web-mode.el : un mode autonome pour emacs pour l’indentation et la coloration du code JSX. Pas de prise en charge de l’insertion automatique des point-virgules (Automatic Semicolon Insertion ou ASI, capacité de JS à ne pas exiger les points-virgules dans la plupart des cas, NdT).
  • vim-jsx : coloration syntaxique et indentation du JSX.

Outils de construction

  • Create React App : une façon officielle de créer des applications React sans nécessiter de configuration.
  • nwb : une boîte à outils pour les applications React, Preact & Inferno et d’autres modules npm pour le web, sans configuration (jusqu’à ce que vous en ayez besoin).
  • Neutrino : créez et construisez des applications JavaScript modernes sans configuration initiale. Neutrino combine la puissance de webpack avec la simplicité des préréglages.
  • ESLint : un linter JS qui comprend la syntaxe JSX de façon native. Assurez-vous de télécharger l’extension eslint-plugin-react pour les règles spécifiques à React.
  • Structor : cet outil est un constructeur d’interfaces utilisateur pour les applications web React utilisant Node.js. Il remplace l’outil déprécié React UI Builder. Vous pouvez regarder des tutoriels vidéos de Structor. (Structor est lui-même déprécié et ses auteurs recommandent d’utiliser Webcodesk désormais, NdT.)
  • react-jsx : compilez et utilisez du JSX comme modèles autonomes qui peuvent être exécutés côté serveur ou côté client !
  • cjsx-codemod : écrivez du code JSX en Coffeescript !
  • ReactScript : écrivez du code React avec Coffeescript sans JSX !
  • jsxhint : prise en charge de l’outil JSHint. À noter que la compilation JSX ne change pas les numéros de ligne, l’analyse (linting) peut donc également être faite directement sur le code JS compilé.
  • reactify : transformation pour Browserify.
  • Babel : transformation autonome et adaptée à Browserify (Babel était anciennement appelé 6to5).
  • node-jsx : prise en charge de JSX dans Node.js.
  • react-hot-loader : chargeur pour webpack qui vous permet d’éditer le JSX et d’en voir immédiatement les effets dans votre navigateur sans avoir à recharger la page.
  • jsx-loader : chargeur pour webpack.
  • express-jsxtransform : middleware pour Express.
  • gradle-react-plugin : transforme les sources JSX au cours d’une construction faite avec Gradle.
  • grunt-react : tâche pour GruntJS.
  • gulp-react : extension pour GulpJS.
  • brunch-react : extension pour Brunch.
  • jsx-requirejs-plugin : extension pour RequireJS.
  • react-meteor : extension pour Meteor.
  • pyReact : pont entre Python et JSX.
  • react-rails : gem Ruby pour utiliser JSX avec Ruby on Rails.
  • react-laravel : paquet PHP pour utiliser React avec Laravel.
  • ReactJS.NET : bibliothèque .NET pour React et JSX.
  • sbt-reactjs : extension JSX du compilateur SBT / Play / Scala.
  • mimosa-react : extension pour Mimosa.
  • react-grails-asset-pipeline : fichiers de React et gestion de la précompilation des fichiers JSX pour Grails.
  • gore-gulp : enrobage autour de webpack, ESLint et mocha pour faciliter une utilisation sans configuration.
  • webpack : génère des modules CommonJS / AMD pour le navigateur. Il vous permet de découper votre base de code sur plusieurs bundles qui peuvent être chargés à la demande. Il se base sur des chargeurs pour traiter préalablement des fichiers tels que du JSON, Jade, Coffee, CSS, LESS, et bien sûr vos propres contenus.
  • webpack-bbq : transforme votre code présent dans src/ vers un dossier lib/, permet un rendu côté serveur et un rendu statique.
  • jsxtransformer : chaîne de compilation Java pour les fichiers JSX.
  • babylon-jsx : transforme le JSX en ES2015 avec babylon sans babel.
  • CRA Universal CLI : une interface en ligne de commande simple pour créer et construire des serveurs Express pour vos projets basés sur Create React App, intégrant le rendu côté serveur et le découpage dynamique de code.