Sådan bruges React med Symfony 4

Introduktion

Symfony er en let og fleksibel ramme indbygget i PHP. Det leveres med nok værktøj og valgfrie bundter, som du basalt kan opbygge enhver form for webapplikation. En styrke ved Symfony er evnen til at opbygge en robust API-backend til at integreres med en javascript-frontend. Denne artikel giver trin til, hvordan du konfigurerer og kører et React-program på en Symfony-backend, som giver dig mulighed for at bruge Symfony's robuste databasestyrings- og sikkerhedsværktøjer med interaktiviteten i en frontend-ramme som React.

Værktøj

Følgende skal følges sammen med denne artikel

  • Symfony - Ansøgningsrammen
  • React - Frontend framework
  • Webpack Encore - Bygg værktøj til vores javascript og stilarter
  • Garn - Package manager til javascript afhængigheder
  • React Bundle - Tilbyder gengivelse på serversiden og passering af kvistparter
  • React on Rails - Påkrævet til React Bundle, gør det lettere at registrere React-komponenter i Javascript

Trin 1 - Saml vores værktøjer

Denne artikel dækker ikke, hvordan man starter en Symfony-applikation, men der er masser af gode ressourcer derude allerede inklusive de altid praktiske Symfony Docs.

Når Symfony-projektets skelet er oprettet, skal du kontrollere, at Webpack Encore er installeret. Kontroller package.json for at se, om den er installeret og ikke kørt

garn tilføj @ symfony / webpack-encore - dev

Dette vil bruge garn til at installere webpack encore og gøre det til en afhængighed.

Pakkehåndteringsgarnet kan bruges til at installere alle de nødvendige værktøjer til at oprette en React-app og kompilere den til javascript ved hjælp af webpack. Her er et eksempel på, hvordan afvigelsesafhængighedsblokken i package.json kan se ud, når alt er installeret (versionnumre behøver ikke at matche nøjagtigt).

"@ symfony / webpack-encore": "^ 0.19.0",
"babel-preset-es2015": "^ 6.24.1",
"babel-preset-react": "^ 6.24.1",
"babel-preset-stage-0": "^ 6.24.1",
"react": "^ 16.4.1",
"react-dom": "^ 16.4.1",
"react-on-rails": "^ 11.0.8",
"react-transit-group": "^ 2.3.1"

Afhængigt af omfanget af et projekt kan det være nødvendigt at være flere Symfony-afhængigheder, men det eneste umiddelbare krav er

komponist kræver limenius / reaktion-bundt

Dette skulle give et projekt alle de nødvendige værktøjer til at opbygge og køre en Symfony-applikation med en React front-end. Dernæst adresserer vi konfiguration af vores værktøjer.

Trin 2 - Konfiguration

Nu hvor vi har værktøjerne, er vi nødt til at få dem konfigureret og konfigureret korrekt til at udføre deres job.

React Bundle

For at starte er vi nødt til at konfigurere React Bundle til at gengive vores React-komponenter. En fordel, der straks opnås ved at bruge dette bundt, er gengivelse på serversiden. Dette betyder, at serveren vil arbejde med at udarbejde javascript og levere gengivet HTML, så snart siden indlæses, hvilket betyder, at der ikke er noget ekstra arbejde for browseren. Efter den indledende belastning vil React Bundle derefter dele eventuelle ændringer af javascriptet, der er downloadet af browseren på websiden.

Efter installationen med komponisten kan konfigurationen til React Bundle findes på config / pakker / limenius_react.yml. Det skal allerede se tæt på dette

limenius_react:
    default_rendering: "begge"
    serverside_rendering:
        fail_loud: falsk
        spor: falsk
        tilstand: "phpexecjs"
        server_bundle_path: "% kernel.project_dir% / var / webpack / server-bundle.js"
        server_socket_path: null

En forklaring på hver af disse muligheder findes i dokumentationen til React Bundle. Hovedfokus her er optionen theserver_bundle_path. Dette er den sti, hvor den kompilerede javascript-fil på serversiden kan findes. For at holde gengivelsesbelastningen på serveren så lille som muligt (og sørge for, at sider ikke går langsomt under indlæsning), skal denne fil være så lille som muligt og kun omfatte det javascript, der er nødvendigt for at gengive en side oprindeligt. Denne fil er genereret af Webpack Encore, som er vores næste emne.

Webpack Encore

Webpack Encore er et build-værktøj oprettet af teamet hos Symfony. Den er bygget oven på Webpack og giver mulighed for en hurtigere opsætning sammen med ekstra værktøjer og indstillinger, der er specielt oprettet til Symfony.

Konfigurationen til Webpack Encore kan findes i webpack.config.js i rodkataloget til et Symfony-projekt. En baseskabelon skal oprettes automatisk, når Encore er installeret, og skal se lignende ud

// webpack.config.js
lad Encore = kræve ('@ symfony / webpack-encore');
Encore
  // projektmappen, hvor kompilerede aktiver gemmes
  .setOutputPath ( 'offentlig / build /')
  // den offentlige sti, som webserveren bruger til at få adgang til det forrige bibliotek
  .setPublicPath ( '/ build')
  // den offentlige sti, du vil bruge i Symfony's aktiv () -funktion - f.eks. aktiv ( 'build / some_file.js')
  //.setManifestKeyPrefix('build/ ')
.cleanupOutputBeforeBuild ()
  .enableSourceMaps (! Encore.isProduction ())
// den følgende linje aktiverer hashede filnavne (f.eks. app.abc123.css)
  .enableVersioning (Encore.isProduction ())
  // tillader, at sass / scss-filer behandles
  .enableSassLoader ()
// React Pages Javascript
  .addEntry ('js / app', './assets/js/React/App/Startup/registration.js')
// Tilføj stilindgang
  .addStyleEntry ('css / app', './assets/scss/app.scss')
// Tilføj reaktionsindstilling
  .enableReactPreset ()
.configureBabel (funktion (babelConfig) {
    // tilføj yderligere forudindstillinger
    babelConfig.presets.push (es2015 ');
    babelConfig.presets.push ( 'stadium-0');
  })
.enableBuildNotifications ()
.enablePostCssLoader ()
// oprette hashede filnavne (f.eks. app.abc123.css)
//. EnableVersioning ()
;
// eksportere den endelige konfiguration
module.exports = Encore.getWebpackConfig ();

Hver af disse indstillinger er fuldt ud defineret i dokumentationen til Webpack Encore, men de følgende indstillinger gælder direkte for opbygning af et React-program.

  • enableReactPreset () - Denne mulighed lader Webpack Encore vide, at applikationen skal behandle JSX i en React-app
  • configureBabel () - Det er her, der kan indstilles specifikke krav til Babel. Fra denne skrivning for at sikre, at en app korrekt kan sammenstille alle de ES6-funktioner, der foreslås at bruge med React, skal es2015- og stage-0-forudindstillinger være aktiveret.

Hvis der er andre javascript-filer, der er nødvendige for en app, der ikke relaterer til React, havner de sandsynligvis også i denne fil. I slutningen af ​​webstedets udvikling kan denne konfigurationsfil også indeholde indstillinger til autoprefixing, kompilering af SASS og versioneringsaktiver.

Da et flertal af denne kode ikke er nødvendigt for den server gengivne javascript-fil, der opretter en sides oprindelige struktur, skal der oprettes en separat webpack encore-konfigurationsfil, der kun indeholder det javascript, der er nødvendigt for at gengive en side.

Filen kan navngives hvad som helst, men til dette eksempel kaldes den webpack.config.serverside.js

Et eksempel på server-side webpack encore-konfigurationsfil kan se ud

var Encore = kræver ('@ symfony / webpack-encore');
Encore
  // katalog, hvor alle kompilerede aktiver gemmes
  .setOutputPath ( 'var / webpack /')
  // hvad er den offentlige sti til dette bibliotek (i forhold til dit projekts dokument root-dir)
  .setPublicPath ( '/')
  // tøm outputPath dir før hver build
  .cleanupOutputBeforeBuild ()
   
  // vises som app / Resources / webpack / server-bundle.js
  .addEntry ( 'server-bundle', '/ aktiver / js / React / ServerRender / registration.js')
  // Tilføj reaktionsindstilling
  .enableReactPreset ()
.configureBabel (funktion (babelConfig) {
    // tilføj yderligere forudindstillinger
    babelConfig.presets.push (es2015 ');
    babelConfig.presets.push ( 'stadium-0');
// der tilføjes ingen plugins som standard, men du kan tilføje nogle
    // babelConfig.plugins.push ('stylet-jsx / babel');
  })
.enableSourceMaps (! Encore.isProduction ())
;
// eksportere den endelige konfiguration
module.exports = Encore.getWebpackConfig ()

I denne fil er build-stien indstillet til var / wepack. Dette fortæller webpack at lægge alle kompilerede javascript-filer i var / webpack-biblioteket og svarer til konfigurationen, der er konfigureret til Symfony React Bundle.

Reager på skinner

React on Rails gør det lettere at registrere og bundte React-apps i separate filer. Det kræves også at udnytte gengivelse på serversiden i kvistskabeloner. Det eneste ekstra trin, der kræves for at implementere React on Rails, er at oprette en registry.js-fil til hver React-app i dit projekt. Et eksempel ser ud

importer ReactOnRails fra 'react-on-rails'
import ReactApp fra './ReactApp';
ReactOnRails.register ({ReactApp});

Det kan hjælpe med at organisere din React-app under et samlet bibliotek med to undermapper med navnet Startup and Containers. Startmappen indeholder javascript-filen med React-appklassen sammen med en registry.js. Container-biblioteket kan bruges til at indeholde hver af de komponenter, der bruges i hele din app. Et eksempel på denne struktur kan ses nedenfor

En prøvekatalogstruktur, der bruger React on Rails til en React-app, der hedder 'ApplicationApp'

Trin 3 - Tilføj reaktion til kvist

Det sidste trin er at tilføje React-appen til Symfony kvistskabeloner. Afhængigt af hvordan en applikation er opsat, kan den enten have flere kvistskabeloner, der hver har deres egen React-app, eller har en stor React-app, der bruger noget som React Router til at håndtere sidenavigation.

Tilføjelse af reaktion

Symfony React-bundtet har en kvistgenvej, der automatisk tilføjer en React-app til siden og giver også mulighed for, at javascriptet, der er gengivet af serveren, sendes på siden. Dette forhindrer ekstra indlæsningstid, når browseren oprindeligt gengiver en side. Genvej til kviste for at tilføje en React-app er

{{react_component ('ReactApp', {'props': {}})}}

Den første parameter til genvejen er navnet på React-appen, der blev registreret af React on Rails i registry.js.

Props-parameteren accepterer et objekt, der inkluderer alle data, der oprindeligt videresendes til React-appen. Dataobjekterne kan indstilles som kvistvariabler konfigureret i Symfony-controlleren

{{react_component ('ReactApp', {'props': {'data': data, 'data2': data2}})}}

Data, der er videregivet i kvistgenvejen, kan indsamles i konstruktorfunktionen i React-klassen, der er registreret af React on Rails. Dataene sendes i et objekt, der kan hentes fra props-parameteren som vist nedenfor

konstruktør (rekvisitter) {
  super();
  this.state = {
    data: JSON.parse (data), // Hvis der gives JSON-data
    data2: data2 // For andre typer data
  }
}

Brug af twig-genvejen viser den gengivne HTML, der er produceret af React-appen, men for at sikre, at appen fortsætter med at køre et script-tag, der peger på javascript-filen, der indeholder den kompilerede React-kode, er det påkrævet. Det kan tilføjes ved hjælp af normal Symfony / Twig-praksis som vist nedenfor

{% blokerer javascripts%}
  {{overordnet ()}}
  
{% endblock%}

Når alt er tilføjet, skal React-appen gengives, så snart siden indlæses med alle dets oprindelige data, og den skal køre som forventet.

Konklusion

Du skal nu have en fungerende React-app, der kører på dit Symfony-sted. Du kan registrere så mange reagerende apps, som det er nødvendigt for at holde din codebase modulopbygget, eller du kan bruge Symfony til kun at køre API'en bag en enkelt sides applikation. Hvis gearet korrekt, kan Symfony og React opbygge en applikation, der opfylder alle krav, du har til et nyt websted.