Laravel 5.5 ReactJS Phần 1 - Cài đặt và sử dụng react router v4.
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 ...
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="awidth=device-awidth, 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/
