react laravel Download – react laravel Quellcode herunterladen

react laravel

Andere Kategorien

0.14

Herunterladen

React-Laravel

Mit react-laravel können Sie ReactJS-Komponenten direkt aus Ihren Blade-Ansichten verwenden, mit optionalem serverseitigem Rendering, und sie dank unaufdringlichem JavaScript auf der Clientseite mit React verwenden.

Installation

V8js-Abhängigkeit

Es ist wichtig zu wissen, dass react-laravel eine indirekte Abhängigkeit von der PHP-Erweiterung v8js hat.

Hier können Sie sehen, wie Sie es installieren: So installieren Sie v8js.

Komponist

Setzen Sie die minimum-stability Ihrer composer.json auf dev und fügen Sie Folgendes hinzu:

  „Minimum-Stabilität“: „dev“

Führen Sie dann Folgendes aus:

  $ Composer benötigt talyssonoc/react-laravel:0.11

Danach sollten Sie dies zu Ihren Anbietern in der Datei config/app.php Ihrer Laravel-App hinzufügen:

  'ReactReactServiceProvider'

Und dann ausführen:

  PHP-Artist-Anbieter: veröffentlichen

Und die Datei react.php ist im config Ihrer App verfügbar.

Verwendung

Nach der Installation und Konfiguration können Sie die @react_component -Direktive in Ihren Ansichten verwenden.

Die @react_component Direktive akzeptiert drei Argumente:

  @react_component(<componentName>[, props, options]) //example
  @react_component('Message', [ 'title' => 'Hello, World' ], [ 'prerender' => true ]) // Beispiel für die Verwendung einer Namespace-Komponente
  @react_component('Acme.Message', [ 'title' => 'Hello, World' ], [ 'prerender' => true ])

componentName : Ist der Name der globalen Variablen, die Ihre Komponente enthält. Wenn Sie Namespace-Komponenten verwenden, können Sie für den Komponentennamen die Punktnotation verwenden.
props : Assoziativ der props , die an Ihre Komponente übergeben werden
options : Assoziatives Array von Optionen, die Sie an react-laravel übergeben können:

prerender : Weist React-Laravel an, Ihre Komponente serverseitig zu rendern und sie dann einfach auf der Clientseite bereitzustellen . Der Standardwert ist true .
tag : Das Tag des Elements, das Ihre Komponente enthält. Standardmäßig ist 'div' .
HTML-Attribute : Jedes andere gültige HTML-Attribut, das dem Wrapper-Element Ihrer Komponente hinzugefügt wird. Beispiel: 'id' => 'my_component' .

Alle Ihre Komponenten sollten sich in public/js/components.js befinden (Sie können es konfigurieren, siehe unten) und global sein.

Sie müssen react.js , react-dom.js und react_ujs.js (in dieser Reihenfolge) in Ihre Ansicht aufnehmen. Sie können diese Dateien mit Laravel-Elixir miteinander verketten.

react-laravel stellt eine ReactJS-Installation und die Datei react_us.js bereit. Sie befinden sich im Ordner public/vendor/react-laravel nachdem Sie react-laravel installiert und Folgendes ausgeführt haben:

  $ PHP Artisan Vendor:Publish --Force

Um die von react-laravel bereitgestellten Dateien und Ihre components.js -Datei zu verwenden, fügen Sie Folgendes zu Ihrer Ansicht hinzu:

  <script src="{{ asset('vendor/react-laravel/react.js') }}"></script>
  <script src="{{ asset('vendor/react-laravel/react-dom.js') }}"></script>
  <script src="{{ asset('js/components.js') }}"></script>
  <script src="{{ asset('vendor/react-laravel/react_ujs.js') }}"></script>

Wenn Sie eine andere Version als die von „react-laravel“ bereitgestellte verwenden (siehe composer.json ), müssen Sie diese konfigurieren (siehe unten).

Konfigurationen

Sie können die Einstellungen für react-laravel in der Datei config/react.php ändern:

  return ['source' => 'path_for_react.js','dom-source' => 'path_for_react-dom.js','dom-server-source' => 'path_for_react-dom-server.js','components' => [ 'path_for_file_tained_your_components.js' ]
  ];

Alle davon sind optional.

source : Standardmäßig ist public/vendor/react-laravel/react.js .
dom-source : Standardmäßig ist public/vendor/react-laravel/react-dom.js .
dom-server-source : Standardmäßig ist public/vendor/react-laravel/react-dom-server.js .
components : Standardmäßig ist public/js/components.js . Hier können mehrere Komponentendateien angegeben werden.