Laravel 5.5 ReactJS Phần 1 - Cài đặt và sử dụng react router v4.

Bài đăng này đã không được cập nhật trong 6 năm

Laravel 5.5 React Preset

Laravel 5.5 có Frontend Preset mới là ReactJS. Trong bài viết này chúng ta sẽ sử dụng React Preset để sử dụng ReactJs trong Laravel app

Cài đặt Laravel 5.5

Tạo mới laravel project sử dụng composer command.

composer create-project --prefer-dist laravel/laravel blog

Sau khi cài đặt xong, chúng ta cần phải cài đặt các phụ thuộc JavaScript. Theo mặc định trong tệp pakage.json, vì vậy chúng ta chỉ cần gõ lệnh sau để cài đặt.

npm install

Cài đặt ReactJS

Cài đặt ReactJS Preset bằng command.

php artisan preset react

Trong CMD bạn có thể thấy dòng này:

React scaffolding installed successfully.
Please run “npm install && npm run dev” to compile your new scaffoldi

Tiếp theo, chuyển sang các thư mục cấu trúc sau đây

resources >> assets >> js Tên thư mục là các components và các tập tin khác là app.js và bootstrap.js.

Cập nhật resources >> views >> welcome.blade.php file và sao chép mã sau đây vào nó. Loại bỏ mã hiện tại.

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel</title>
    <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="example"></div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>

Cửa sổ CMD và gõ lệnh sau.

npm run dev

Nó sẽ biên dịch các file trong assets and copy đến public >> js >> app.js file.

Cài đặt react-router-dom

Cửa sổ CMD và gõ lệnh sau:

npm install react-router-dom --save

Tạo file RouterPath.js trong thư mục resources >> assets >> routes.

import React, {Component} from 'react';
import {Route, Switch} from 'react-router-dom';
import Home from '../views/Home';
import Topic from '../views/Topic';
import About from '../views/About';

class RouterPath extends Component {
    render() {
        return (
            <main>
                <Switch>
                    <Route exact path='/' component={Home}/>
                    <Route exact path='/about' component={About}/>
                    <Route exact path='/topic' component={Topic}/>
                </Switch>
            </main>
        )
    }
}

export default RouterPath

Tạo file Home.js, trong thư mục resources >> assets >> views.

import React, {Component} from 'react';

class Home extends Component {
    render() {
        return (<div>
            <h1>Welcome to Home!</h1>
        </div>)
    }
}

export default Home

Tạo file Topic.js, trong thư mục resources >> assets >> views.

import React, {Component} from 'react';

class Topic extends Component {
    render() {
        return (<div>
            <h1>Welcome to Topic!</h1>
        </div>)
    }
}

export default Topic

Tạo file About.js, trong thư mục resources >> assets >> views.

import React, {Component} from 'react';

class About extends Component {
    render() {
        return (<div>
            <h1>Welcome to About!</h1>
        </div>)
    }
}

export default About

File app.js trong thư mục resources >> assets

/**
 * 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/Example');

File Example.js trong thư mục resouces >> assets >> components

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {HashRouter , Link} from 'react-router-dom';
import RouterPath from '../routes/RouterPath';

export default class Example extends Component {
    render() {
        return (
            <HashRouter>
                <div>
                    <ul>
                        <li>
                            <Link to={'/'}>Home</Link>
                        </li>
                        <li>
                            <Link to={'/topic'}>Topic</Link>
                        </li>
                        <li>
                            <Link to={'/about'}>About</Link>
                        </li>
                    </ul>
                    <RouterPath/>
                </div>
            </HashRouter >
        )
    }
}

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

Xem kết quả tại: http://localhost/blog/public

Cảm ơn các bạn đã xem nguồn :

https://appdividend.com/2017/08/31/laravel-5-5-reactjs-tutorial/

https://reacttraining.com/react-router/web/example/basic

https://www.techiediaries.com/react-router-dom-v4/