Laravel prešla dlhú cestu. V súčasnosti majú vývojári prístup k množstvu špičkových responzívnych webových aplikácií, ktoré využívajú rámec – Inertia.js, Alpine.jsa Drôt pod prúdomaby sme vymenovali len niektoré.
Rámec však nestratil kontakt so svojou minulosťou. Stále je celkom jednoduché nastaviť Vue alebo React s projektom Laravel, čo je obzvlášť užitočné vývojári reakcií chcú pracovať s frontend frameworkami.
V tomto článku vás prevedieme bootstrapovaním najnovšieho projektu Laravel a integráciou Reactu s ním, takže všetky Laravel a React.js vývojári môžu pokračovať vo svojich projektoch.
Reagujte JS s Laravelom
React je open-source frontendová Javascript knižnica vyvinuté spoločnosťou Facebook. Laravel je full-stack PHP framework podľa vzoru MVC.
Nastavenie React s projektom Laravel je výnimočne jednoduché. Ak máte starú webovú stránku postavenú v PHP a chcete zmeniť frontend webu pomocou Reactu, môžete to ľahko urobiť. Ukážeme vám, ako na to na platforme DreamHost.
Nainštalujte React JS v Laravel na DreamHost
Nie je nič také jednoduché ako nasadenie aplikácií Laravel v cloude
S DreamHost môžete mať svoje aplikácie Laravel spustené na spravovaných cloudových serveroch v priebehu niekoľkých minút.
Nainštalujte projekt Laravel
Na demonštráciu metódy v tomto článku použijeme Laravel 8 (a túto verziu veľmi odporúčame pre jej vynikajúce bezpečnostné funkcie.)
Najprv nainštalujte úplne nový projekt Laravel. S DreamHost si môžete nainštalovať Laravel jedným kliknutím.
Vyberte svoj server a aplikáciu Laravel. Vyberte veľkosť servera PHP podľa návštevnosti vašej webovej stránky a umiestnenie podľa preferovaného regiónu.
Po dokončení všetkých týchto krokov môžete prejsť na kartu aplikácie a vybrať aplikáciu Laravel.
Potom spustite terminál SSH z karty Master Credentials a prihláste sa pomocou svojich poverení.
Aktualizujte verziu Composer spustením príkazu self-update. Nahradí vášho skladateľa.
Nainštalujte laravel/ui
laravel/ui je oficiálny balík, ktorý ponúka lešenie prihlasovacieho a registračného používateľského rozhrania pre React, Vue a jQuery vo vašom projekte Laravel.
Spustite tento príkaz na inštaláciu balíka laravel/ui skladateľ.
skladateľ vyžaduje laravel/ui
Nainštalujte React v Laravel
Teraz, keď ste si nainštalovali balík používateľského rozhrania skladateľa, spustíte príkaz uvedený nižšie a nainštalujete React v Laravel.
php artisan ui reagovat — auth
Nainštalujte požadované balíky
Predpokladám, že máte na svojom vývojovom stroji nainštalovaný uzol a NPM.
Pomocou tohto príkazu môžete skontrolovať inštaláciu uzla a NPM.
# pre uzol uzla -v # pre npm npm -v
Nasledujúci príkaz nainštaluje všetky balíky javascript potrebné pre náš projekt.
inštalácia npm
Vyššie uvedený príkaz vytvorí zložku node_modules a automaticky nainštaluje všetky balíky, ktoré sú registrované v súbore package.json.
Nastavte komponent React v Laravel 8
Ak teraz spustíte aplikáciu Laravel, zatiaľ sa nenačíta a nezobrazí komponent React v zobrazení Laravel.
Takže vytvorím komponent React vo vnútri resource/js/User.js a vložím doň nasledujúci kód.
Vo vnútri komponentu React sme definovali aj prvok ROOT DOM „user“. Načíta akýkoľvek prvok do modelu objektu dokumentu prehliadača.
Musíme zaregistrovať komponent React v súbore resources/js/app.js.
require(‘./bootstrap’); vyžadovať(‘./components/User’); require(‘./components/Example’);
V tomto kroku pridáme kompilovanú CSS cestu, React Root DOM a kompilované súbory JavaScriptu do rozloženia Laravel. Div s id=”user” je rovnaké id, ktoré sme deklarovali v document.getElementById(‘user’).
Umiestnite daný kód do šablóny views/welcome.blade.php.
Nakoniec musíme spustiť príkaz na kompiláciu súborov JavaScript a CSS pre Laravel a
Projekt React.js.
hodinky npm run
Váš kód bol skompilovaný. Teraz spustite tento príkaz a zobrazte svoju aplikáciu v prehliadači.
php remeselník slúžiť
Záver
Laravel nevyžaduje, aby ste používali žiadny špecifický rámec Javascript; pokiaľ ste ho správne nakonfigurovali, mal by fungovať akýkoľvek rámec. Tento článok vám slúži ako rýchly sprievodca, ako vyvinúť plne funkčnú aplikáciu React, aby ste mohli jednoducho nastaviť kreatívne front-end aplikácie v Laravel.
×