লারাভেল এ reactjs নিয়ে কাজ করা

লারাভেল এ reactjs নিয়ে কাজ করা :

Download Laravel7 & laravel7react boilarpalte

reactjs এর অনলাইন টুল :অনেক সময় html কোডেকে reactjs এর jsx এ কনভার্ট করার দরকার হয় আবার css কে react এ ভ্যালিড ভাবে লিখার জন্য ঝামেলায় পড়তে হয় তখন আমরা নিচের টুল গুলো ব্যবহার করবো। htmltojsx এন্ড css to reactjs

ভিজ্যুয়াল ষ্টুডিও কোড এ তাড়াতাড়ি reactjs কোড লিখার জন্য আমরা reactjs স্নিপেট এক্সটেনশনটি ইনস্টল করবো তাহলে যদি কোনো ক্লাস তৈরী করতে চাই তবে rcc লিখলে সম্পূর্ণ একটি ক্লাস তৈরী হয়ে যাবে আর ফাঙ্কশন লিখতে চাইলে rrc লিখলে সম্পূর্ণ একটি ফাঙ্কশন তৈরী হয়ে যাবে।

• ১.প্রথমে php ৭.২ ভার্সন এর ইনভেরনমেন্ট তৈরী করতে হবে। এজন্য আমরা Xamp,Wamp ,Uwamp ,Usbwebserver বা অন্য যেকোনো উপায়ে আমাদের সিস্টেম এ php কোড রান করার পরিবেশ তৈরী করতে পারি।
• ২.Composer ইনস্টল করতে হবে এবং ইনস্টল করার সময় অবশ্যই ইন্টারনেট কানেকশন লাগবে এবং php.exe ফাইলটি ইনস্টল এর সময় দেখিয়ে দিতে হবে।
• ৩.Nodejs এর রেকোমেন্ডেড ভার্সন ইনস্টল করতে হবে
• ৪.লারাভেল এ একটি প্রজেক্ট তৈরী করতে হবে এজন্য cli বা comand prump এ এই কোড টি রান করতে হবে : composer create-project –prefer-dist laravel/laravel projectname এবং ইন্টারনেট সংযোগ সহকারে কিছুক্ষন অপেক্ষা করতে হবে যতক্ষণ পর্যন্ত লারাভেল এ প্রজেক্ট তৈরী কমপ্লিট হয়। প্রজেক্ট তৈরী কমপ্লিট হলে সবুজ কালারে successfull লিখা আসবে।
• ৫.লারাভেল ৭ এ reactjs নিয়ে কাজ করার জন্য প্রথমে এই কোড প্রজেক্ট ফোল্ডার এ কম্যান্ড পরাম্প এর মাদ্ধমে রান করতে হবে : composer require laravel/ui এবং ইন্টারনেট সংযোগ সহকারে কিছুক্ষন অপেক্ষা করতে হবে যতক্ষণ পর্যন্ত কমপ্লিট না হয়।

• ৬.এবার এই কোড টি কমান্ড প্রৌম্প এর রান করতে হবে :php artisan ui react এবং ইন্টারনেট সংযোগ সহকারে কিছুক্ষন অপেক্ষা করতে হবে যতক্ষণ পর্যন্ত কমপ্লিট না হয়।
• ৭.এবার এই কোড টি কমান্ড প্রৌম্প এর রান করতে হবে :npm install এবং ইন্টারনেট সংযোগ সহকারে কিছুক্ষন অপেক্ষা করতে হবে যতক্ষণ পর্যন্ত কমপ্লিট না হয়।
• ৮.এবার এই কোড টি কমান্ড প্রৌম্প এর রান করতে হবে :npm run devএবং ইন্টারনেট সংযোগ সহকারে কিছুক্ষন অপেক্ষা করতে হবে যতক্ষণ পর্যন্ত কমপ্লিট না হয়।
• ৯.এবার এই কোড টি কমান্ড প্রৌম্প এর রান করতে হবে : php artisan serve
• ১০.এবার ব্রাউজার এ http://127.0.0.1:8000/ এই লিংক টি তে গেলে আমরা আমাদের লারাভেল প্রজেক্টটি দেখতে পাবো

১১.আমরা এবার এই ভিউ কে REACT দ্বারা পরিবর্তন করবো এজন্য resources/js/components/ ফোল্ডার এর মধ্যে index.js নাম এ একটি ফাইল তৈরী করবো।
১২. resources/js/components/ ফোল্ডার এর Example.js ফাইল এর সব কপি করে index.js ফাইল এ পেস্ট করে কিছু পরিবর্তন করবো।
১৩. resources/js/App.js ফাইল এ index.js কম্পোনেন্ট টি অ্যাড করবো এই কোড দিয়ে :require(‘./components/index’);
১৪. এবার আমরা view ফোল্ডার এর welcome ফাইল কে এডিট করবো এজন্য html বডি শেষ হওয়ার পর App.js ফাইল জাভাস্ক্রিপ্ট ফাইল হিসাবে অ্যাড করবো এভাবে

১৫. এবং এর মধ্যে যা লিখবো তাই আমাদের শো করবে
১৬.এবার প্রজেক্ট এর রুট ফোল্ডার এ cli বা কমান্ড পরাম্প এ এই কোড টি ইন্টারনেট সংযোগ সহকারে রান করে : npm run dev

১৭. এবার ব্রাউজার এ প্রজেক্ট টি রান আসবে

লারাভেল reactjs এ বুটস্ট্র্যাপ এর css ও js নিয়ে কাজ করার জন্য : আমরা সবাই বুটস্ট্র্যাপ নিয়ে কাজ করতে অভ্ভাসতো তাই আমরা নিচের পদ্ধতি অবলম্বন করবো : প্রথমে প্রজেক্ট ফোল্ডারটি cmd তে ওপেন করে লিখবো
npm install –save bootstrap এবারের কিছুক্ষন অপেক্ষা করে কমপ্লিট হলে App.js ফাইল এ বুটস্ট্রাপটি ইম্পোর্ট করবো এভাবে import Bootstrap from ‘bootstrap/dist/css/bootstrap.min.css’; এবার cmd তে npm run dev লিখে এন্টার করলে reactjs অপ্পটি বিল্ড হবে এবার আমরা প্রজেক্ট এর ইউআরএল টি রিফ্রেশ করলে তার পরিবর্তন যে যেগুলো কম্পোনেন্ট এ আমরা বুটস্ট্র্যাপ এর ক্লাস বেবহার করেছি তা কাজ করছে

লারাভেল reactjs প্রজেক্ট এ রিএক্ট router নিয়ে কাজ করা : সামাদ তে রান করি npm install react-router-dom –save কিছুক্ষন অপেক্ষা করে কমপ্লিট হলে আমরা যে ফাইল এ রিএক্ট রাউটার বেবহার করবো সেই পেজ এ ইম্পোর্ট করি এভাবে : import {
BrowserRouter as Router,
Switch,
Route,
Link
} from “react-router-dom”;

১৮.. এবার আমরা লগইন ও রেজিস্ট্রেশন সিস্টেম তৈরী করবো যাতে অন্য কীয় আমাদের এপ্লিকেশন এ ঢুকতে না পারে এজন্য প্রথমে প্রজেক্ট ফোল্ডার এ গিয়ে
১.composer require laravel/ui এই কোড টি আমাদের লাগবে না কারণ আমরা পূর্বে রিএক্ট ইনস্টল করার পূর্বে এই কোড রান করে ওই গুলো নিয়ে চি এবার নিচের কোড রান করি
২.php artisan ui:auth এবার নিচের কোড রান করি
৩.php artisan ui react –auth (আমরা যদি vue বা bootstrap উসে করি তাহলে এই কোড গুলো রান করবো php artisan ui vue –auth
এবং php artisan ui bootstrap –auth
)
৪. এবার আমরা আমাদের প্রজেক্ট কে ডাটাবেস এর সাথে কনফিগার করবো এজন্য .env ফাইল এ ডাটাবেস কনফিগার করি
৫.এবার আমাদের এপ্লিকেশন migrate করার পালা অনেক সময় মাইগ্রেট করার সময় এরর শো করে এজন্য আমরা app\Providers\AppServiceProvider.php ফোল্ডার এ এই কোড টি লিখবো

use Illuminate\Support\Facades\Schema;
এবং boot ফাঙ্কশনটি এরকম হবে
public function boot()
{
Schema::defaultStringLength(191);
}
৬.এবার migrate করার জন্য এই কোড রান করি : php artisan migrate:fresh

১৯. এবার আমরা আমাদের ইউআরএল এ http://127.0.0.1:8000/home লিখলে নিচের একটি পেজ এর ড্যাশবোর্ড শো করবে

২০.এবার আমি যদি আমার resourse /views /home.blade.php ফাইল টি ওপেন করি তাহলে এরকম কোড দেখতে পাবো

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    You are logged in!
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

২১. এবার আমি এটাকে এভাবে মোডিফাই করবো

@extends('layouts.app')

@section('content')
<div class="container">
    <div id="example"></div>
</div>
@endsection

২২.এখানে দিয়েছি যাতে এখানে আমি react এর কম্পোনেন্ট নিয়ে কাজ করতে পারি

২৩. এবার আমি যদি ব্রাউসার রিফ্রেশ করি তাহলে আমি দেখতে পাবো যে example id এর মধ্যে Example component টি লোড হয়ে আছে।

২৪. এবার js/Component/Example.js ফাইল কে App.js ফাইল এ rename করি এবং তারমধ্যে কোড গুলো এরকম হবে

import React from 'react';
import ReactDOM from 'react-dom';

function Example() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Example Component</div>

                        <div className="card-body">I'm an example component!</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Example;

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

২৫ এবার js/Component/index.js ফাইল টি এরকম হবে

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// import App component
import App from './components/App'

// change the getElementId from example to app 
// render App component instead of Example
if (document.getElementById('root')) {
    ReactDOM.render(<App />, document.getElementById('root'));
}

২৬. এবার js/App.js যে ফাইল তা আছে তা এরকম হবে।

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

require('./components/index');

২৭. এবার home.blade.php ফাইলটি এরকম হবে যাতে আমরা example আইডি এর পরিবর্তে root এইড বেবহার করবো

@extends('layouts.app')

@section('content')
<div class="container">
    <div id="root"></div>
</div>
@endsection

২৮. এবার আমাদের js/Component/ ফোল্ডার এ বিভিন্ন কম্পোনেন্ট বানিয়ে বেবহার করার সময়

২৯.এটা করার জন্য react এ যেভাবে কম্পোনেন্ট নিয়ে কাজ করেছিলাম সেইভাবে এখানে কম্পোনেন্ট বানিয়ে কাজ করবো

৩০.এবার আমরা এখন থেকে একটি এপ্লিকেশন বানাবো এই And Eita টিউটোরিয়াল ফলো করে।

লারাভেল ও রিএক্ট এর crud স্টেপ বাই স্টেপ :
১. প্রথমে model,migration,controller তৈরী করে নেই ডেমো হিসাবে আমি Product নাম একটি রিসোর্সে কন্ট্রোলার এর সাথে মডেল তৈরী করলাম

php artisan make:model Product

product.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    //
    protected $fillable = ['title','body'];
}

product migration file

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('body');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

routes/api.php

Route::resource('products', 'ProductController');

laravel+reactjs crud link