Ako nainštalovať React JS v Laravel na DreamHost

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.

Čítať:  5 spôsobov, ako identifikovať písma z webových stránok v systéme Android a iOS

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.

Čítať:  Ako získať nespracovaný SQL dotaz z Laravel Q...

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.

×

Získajte náš bulletin
Buďte prvý, kto získa najnovšie aktualizácie a návody.

Ďakujeme, že ste nás odoberali!

Nové Publikácie:

ODPORÚČANIE