Setup Laravel 5.4 Pour utiliser React

Je ne suis pas nouveau pour Laravel mais je suis nouveau pour les cadres JavaScript.

Je veux utiliser React dans une construction laravel mais je ne trouve aucune information sur la façon de faire cela.

J'ai Laravel 5.4. Je sais que C'est pré-emballé avec Vue et mélange Laravel au lieu de gorgée.

je suis le tutoriel ici: https://blog.tighten.co/adding-react-components-to-a-laravel-app mais ce n'est pas fait pour 5.4. Il mentionne la nécessité de mettre à jour le gulpfile mais, puisque Laravel 5.4 n'utilise pas Gulfp, il n'y en a pas!

est-ce que quelqu'un peut s'il vous plaît aider avec un petit tutoriel ou quelques étapes que j'ai besoin de répliquer afin de faire fonctionner React en 5.4?

J'ai googlé mais je ne peux trouver que des liens NPM, qui sont moins que utiles!

17
demandé sur Wildcard27 2017-04-05 13:14:47

2 réponses

merci à Joe d'avoir souligné la partie des documents dont j'avais besoin. Il y avait un peu plus à elle si décrira mes étapes ci-dessous pour aider quelqu'un d'autre.

  1. Supprimer node_modules dossier. Ce n'est pas nécessaire pour les constructions neuves, mais si vous avez suivi d'autres tutoriels et installé des choses dont vous n'avez pas besoin, cela vous évitera quelques maux de tête. Si vous n'avez pas de node_modules dossier, ignorez cette étape.

    remarque que ce qui précède step supprimera tout ce que vous avez installé en utilisant NPM.

  2. Exécuter npm install à partir de la racine de votre projet. Cela permettra d'installer tous les composants NPM utilisés par Laravel.

  3. Ouvrir webpack.mix.js et

    mix.js('resources/assets/js/app.js', 'public/js') 
    .sass('resources/assets/sass/app.scss', 'public/css');


    mix.react('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

  4. Exécuter npm run dev pour compiler le Javascript à partir de la leçon contenue dans la question ci-dessus. Vos sorties React JS devraient maintenant fonctionner.

  5. (optionnel) utiliser npm run watch pour compiler à la volée.

j'espère vraiment que cela aide quelqu'un d'autre comme beaucoup comme il m'a aidé!

24
répondu Wildcard27 2017-04-05 11:55:25

selon le docs, Réagir support est construit dans à Mélanger:

Mix peut installer automatiquement les plug-ins Babel nécessaires pour le support React. Pour commencer, remplacez votre mélange.js() avec le mélange.réagir():

mix.react('resources/assets/js/app.jsx', 'public/js');

dans les coulisses, Mix va télécharger et inclure le plugin babel-preset-react Babel approprié.

Je ne suis pas sûr à 100% si cela va automatiquement inclure réagir dans votre sortie bundle - je dirais non (dans ce cas, vous devrez utiliser une normale mix.js() appel à tirer).

5
répondu Joe Clay 2017-04-05 10:49:29