در مقالات گذشته وب سایت صعود به معرفی و بررسی زبان برنامه نویسی PHP و فریم ورک محبوب آن یعنی laravel پرداختیم. اما در این مقاله کارشناسان گروه آموزش برنامه نویسی صعود قصد دارند تا روش نصب کتابخانه ی React.js در فریم ورک laravel را به شما آموزش دهند پس اگر قصد دارید همه چیز را در رابطه با موضوع آموزش نصب React.js در laravel بدانید در ادامه ی این مقاله با گروه آموزشی صعود همراه شوید.

لاراول به تازگی "laravel 9.19" را با یک تغییر اساسی منتشر کرده است. دیگر فایل webpack.mix.js در ریشه لاراول وجود ندارد در جای فایل webpack.mix.js فایل vite.config.js معرفی شده است.

آموزش نصب React.js در laravel

در این مقاله گروه آموزشی صعود نحوه نصب React js 3 را در لاراول 9.19 با vite برای شما آموزش میدهد. این مقاله به شما نشان می دهد که چگونه React را در لاراول 9 با آخرین به روز رسانی ها نصب کنید. اگر می خواهید نمونه ای از نصب react 3 را در laravel-vite ببینید، در جای مناسبی هستید. لاراول 9.19 با vite آخرین نسخه فریم ورک لاراول در نگارش این مقاله است. همانطور که می دانید لاراول محبوب ترین فریم ورک پی اچ پی است و استفاده از آن در مقیاس آسان و انعطاف پذیر است.

آموزش نصب React.js در laravel

React یک کتابخانه JavaScript front-end منبع بازOpen Source برای ساخت رابط های کاربری یا اجزای UI است. React.js توسط فیس بوک و جامعه ای از توسعه دهندگان و شرکت ها نگهداری می شود. React می تواند به عنوان پایه ای در توسعه اپلیکیشن های تک صفحه ای یا موبایلی استفاده شود.

در پایان این پست، می توانید یک برنامه React و Laravel 9.19 ایجاد کنید که توسط vite طراحی شده است. همچنین یاد خواهیم گرفت که چگونه یک کامپوننت react ایجاد کنیم و آن را با فایل لاراول 9  متصل کنیم. پیشنهاد کارشناسان وب سایت آموزش برنامه نویسی صعود این است که در رابطه با این موضوع حتما مقاله ی، Vite چیست؟ vite.js نسل جدید ابزار های Front-End را مطالعه کنید.

نحوه نصب React در laravel 9 با Vite

برای نصب React در فریم ورک laravel از مراحل زیر را انجام میدهیم:

  1. نصب لاراول 9 
  2. نصب NPM Dependencies   
  3. نصب React
  4. نصب پلاگین vitejs/plugin-react
  5. به روز رسانی vite.config.js
  6. Vite Dev Server Start
  7. ایجاد کامپوننت Reactjs
  8. به روز رسانی فایل app.js
  9. ایجاد Helper سفارشی برای Vite Assets
  10. متصل کردن Reactjs Component به فایل لاراول blade
  11. به روز رسانی فایل env
  12. راه اندازی Localhost

مرحله 1: نصب لاراول 9

ابتدا ترمینال را باز کنید و دستور زیر را برای ایجاد یک پروژه جدید لاراول اجرا کنید:

composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-react-vite

یا اگر Laravel Installer را به عنوان یک وابستگی Composer نصب کرده اید از دستور زیر استفاده کنید:

laravel new laravel9-react-vite

 

مرحله 2: نصب NPM Dependencies

برای نصب وابستگی های NPM دستور زیر را اجرا کنید:

npm install

 

مرحله 3: نصب React

اکنون پس از نصب node modules، باید react.js را در برنامه خود نصب کنیم، برای آن دستور زیر را در ترمینال npm install react@latest react-dom@latest اجرا کنید. آخرین نسخه reactjs و react-dom را نیز نصب خواهد کرد. ما از آن در فایل jsx استفاده خواهیم کرد.

npm install react@latest react-dom@latest

 

مرحله 4: نصب پلاگین vitejs/plugin-react

در آخرین نسخه لاراول 9 پلاگین vitejs/plugin-react را برای نصب react.js در لاراول نصب کنید. این افزونه وابستگی های مورد نیاز را برای اجرای برنامه reactjs در vite فراهم می کند. Vite یک دستور ساخت است که کد شما را با Rollup بسته بندی می کند و در پورت localhost:3000 اجرا می شود تا ویژگی Hot Refresh را ارائه دهد.

مرحله 5: به روز رسانی vite.config.js

آخرین نسخه 9.19 یک فایل vite.config.js را در ریشه برنامه برای پیکربندی دارایی های front-end از پیش تعیین شده import plugin-react و افزودن ()react به آرایه پلاگین ها در تابع defineConfig ارائه می دهد.

import reactRefresh from '@vitejs/plugin-react-refresh';

export default ({ command }) => ({

    base: command === 'serve' ? '' : '/build/',

    publicDir: 'fake_dir_so_nothing_gets_copied',

    build: {

        manifest: true,

        outDir: 'public/build',

        rollupOptions: {

            input: 'resources/js/app.js',

        },

    },

    plugins: [

        reactRefresh(),

    ],

});

 

آموزش-نصب-React.js-در-laravel

مرحله 6: Vite Dev Server Start

اکنون پس از نصب reactjs، باید سرور dev را برای vite راه اندازی کنیم تا دستور زیر را اجرا کند و فایل resorce/js/app.js و فایل resource/css/app.css شما را تماشا کند. همچنین سرور ویتی را در http://localhost:3000 راه اندازی می کند. شما نمی توانید آن را در مرورگر باز کنید، همانطور که برای vite hot reload است و در پس زمینه اجرا می شود و دارایی های برنامه شما مانند js و CSS را تماشا می کند.

npm run dev

 

مرحله 7: ایجاد کردن کامپوننت Reactjs

در زیر پوشه Resource/js یک فایل با نام App.jsx ایجاد کنید و برای این مثال محتوایی بنویسید، مثلا: "React.js With Laravel Vite" می توانید آن را مطابق با نیاز خود تغییر دهید.

// resources/js/App.jsx

import React from 'react';

import { createRoot } from 'react-dom/client'

 

export default function App(){

    return(

        <h1>How To Install React in Laravel 9 with Vite</h1>

    );

}

if(document.getElementById('root')){

    createRoot(document.getElementById('root')).render(<App />)

}

 

مرحله 8: به روز کردن app.js در پوشه resources/js/app.js

وارد کردن app.js در پوشه resources/js/app.js

// resources/js/app.js

import './bootstrap';

import './App.jsx'

 

مرحله 9: راهنمای سفارشی برای Vite Assets ایجاد کنید

برای حل این مشکل، می توانیم localhost:3000 را پینگ کنیم. اگر وصل شد، می دانیم که سرور توسعه دهنده در حال اجرا است و می توانیم hot script را رندر کنیم.

این می تواند در یک فایل helpers.php قرار گیرد، نحوه تنظیم آن را در اینجا بیاموزید.

ابتدا، کدی را که در قالب Blade نوشته بودیم در یک تابع کمکی استخراج کنیم. در مرحله بعد، از نمای لاراول Http برای پینگ کردن localhost:3000 استفاده می کنیم. اگر وصل شد، می دانیم که سرور توسعه دهنده در حال اجرا است.

<?php

use Illuminate\Support\Facades\Http;

use Illuminate\Support\HtmlString;

function vite_assets(): HtmlString

{

    $devServerIsRunning = false;

    if (app()->environment('local')) {

        try {

            Http::get("http://localhost:3000");

            $devServerIsRunning = true;

        } catch (Exception) {

        }

    }   

    if ($devServerIsRunning) {

        return new HtmlString(<<<HTML

            <script type="module" src="http://localhost:3000/@vite/client"></script>

            <script type="module" src="http://localhost:3000/resources/js/app.js"></script>

        HTML);

    }

    $manifest = json_decode(file_get_contents(

        public_path('build/manifest.json')

    ), true);

    return new HtmlString(<<<HTML

        <script type="module" src="/build/{$manifest['resources/js/app.js']['file']}"></script>

        <link rel="stylesheet" href="/build/{$manifest['resources/js/app.js']['css'][0]}">

    HTML);

}

 

مرحله 10: متصل کردن React.js Component با فایل Blade

اکنون باید یک فایل blade ایجاد کنیم که در آن برنامه react.js بارگذاری شود. در پوشه sources/views نام فایل welcome.blade.php را باز کنید. @vite('resources/js/app.js') را در پایین فایل در فایل react.blade.php اضافه کنید تا تمام js هایی که برای اجرای کد Reactjs نیاز دارید بارگیری شود.

<!DOCTYPE html>

<html>

<head>

                <meta charset="utf-8">

                <meta name="viewport" content="width=device-width, initial-scale=1">

                <title>How To Install React in Laravel 9 with Vite</title>

    {{ vite_assets() }}

</head>

<body>

                <div id="root"></div>

</body>

</html>

 

مرحله 11: به روز کردن فایل .env

فایل .env را باز کنید و APP_URL را به روز کنید و APP_URL=http://localhost:8000 را تنظیم کنید. این عمل کمک خواهد کرد تا به‌روزرسانی‌های js و CSS را بررسی کرده و فوراً آنها را در مرورگر تغییر دهید.

APP_URL=http://localhost:8000

مرحله 12: راه اندازی localhost

سرور توسعه را راه اندازی کنید:

php artisan serve

و به لینک زیر بروید /http://localhost:8000

 

بابت خواندن این مقاله از شما متشکریم - گروه آموزشی صعود

در این مقاله گروه آموزش برنامه نویسی صعود به آموزش مرحله به مرحله ی نصب کتابخانه ی React.js در فریم ورک لاراول پرداختند، و نکات مهم در رابطه با نصب کتابخانه ی React.js در فریم ورک laravel را برای شما ارائه دادند همچنین شما میتوانید سوالات، انتقادات و پیشنهادات خود را در رابطه با موضوع آموزش نصب React.js در laravel از قسمت نظرات با کارشناسان ما در میان بگذارید. در صورت تمایل میتوانید صعود را در شبکه های اجتماعی تلگرام و اینستاگرام دنبال کنید.