CodeIgniter
Route
app/Config/Routes.php
$routes->get('/customer', 'CustomerController::index');
$routes->get('/', 'Home::index');
$routes->get('/customer', 'CustomerController::index');
$routes->get('/customer/index', 'CustomerController::index');
$routes->get('/customer/form', 'CustomerController::index');
$routes->get('/customer/edit/(:num)', 'CustomerController::index');Controller
app/Controllers/CustomerController.php
<?php namespace App\Controllers;
use CodeIgniter\Controller;
class CustomerController extends Controller
{
public function index()
{
return view('customer');
}
}
View
app/Views/customer.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to CodeIgniter 4 + React.js!</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style> .navbar{margin-bottom: 20px;} </style>
</head>
<body>
<div class="container" style="padding:20px;">
<h1 style="text-align:center;">
<a href="/customer">
Full Stack - CodeIgniter 4 & React.js
</a>
</h1>
<hr>
<!-- components react -->
<div id="main-customer">
</div>
</div>
<script src="/dist/main.js" charset="utf-8"></script>
</body>
</html>React.js
React router
React Router es una colección de componentes de navegación que se componen declarativamente con su aplicación web
npm install react-router-domapp/components/app.js
require("./src/Main")app/components/src/customer/List.js
import React, { Component } from 'react';
export default class List extends Component {
render() {
return (
<section>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Address</th>
<th scope="col">Phone</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John Doe</td>
<td>john@example.com</td>
<td>California Cll 100</td>
<td>3101111111</td>
<td>
<a href="#" class="btn btn-light"> Edit </a>
<a href="#" class="btn btn-danger"> Delete </a>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>John Doe</td>
<td>john@example.com</td>
<td>California Cll 100</td>
<td>3101111111</td>
<td>
<a href="#" class="btn btn-light"> Edit </a>
<a href="#" class="btn btn-danger"> Delete </a>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>John Doe</td>
<td>john@example.com</td>
<td>California Cll 100</td>
<td>3101111111</td>
<td>
<a href="#" class="btn btn-light"> Edit </a>
<a href="#" class="btn btn-danger"> Delete </a>
</td>
</tr>
</tbody>
</table>
</section>
)
}
}
app/components/src/customer/Form.js
import React, { Component } from 'react';
export default class Form extends Component {
render() {
return (
<div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">Name customer</label>
<input type="text" class="form-control" placeholder="Name" />
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="email">Email</label>
<input type="email" class="form-control" placeholder="you@example.com" />
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="address">Address</label>
<input type="text" class="form-control" placeholder="1234 Main St" />
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="phone">Phone </label>
<input type="text" class="form-control" placeholder="123467890" />
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<button class="btn btn-primary btn-block" type="submit">Save</button>
</div>
</div>
</div>
)
}
}
app/components/src/customer/Edit.js
import React, { Component } from 'react';
export default class Edit extends Component {
render() {
let userId = this.props.match.params.id;
return (
<div>
<h4>Edit customer {userId} </h4>
<hr />
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">Name customer</label>
<input type="text" class="form-control"/>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="email">Email</label>
<input type="email" class="form-control" placeholder="you@example.com" />
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="address">Address</label>
<input type="text" class="form-control" placeholder="1234 Main St" />
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="address">Phone </label>
<input type="text" class="form-control" placeholder="123467890" />
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<button class="btn btn-primary btn-block" type="submit">Save</button>
</div>
</div>
</div>
)
}
}
app/components/src/Nav.js
import React, { Component } from 'react';
import { Link } from "react-router-dom";
export default class Nav extends Component {
render() {
return (
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
<div class="collapse navbar-collapse" id="navbarsExample09">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<Link class="nav-link" to="/customer/index">List </Link>
</li>
<li class="nav-item">
<Link class="nav-link" to="/customer/form">Create</Link>
</li>
<li class="nav-item">
<Link class="nav-link" to="/customer/edit/5">Edit</Link>
</li>
</ul>
</div>
</nav>
)
}
}
app/components/src/Main.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Nav from "./Nav"
import Form from "./customer/Form"
import List from "./customer/List"
import Edit from "./customer/Edit"
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
export default class Main extends Component {
render() {
return (
<Router>
<main>
<Nav/>
<Switch>
<Route path="/customer/index" exact component={List} />
<Route path="/customer/form" component={Form} />
<Route path="/customer/edit/:id" component={Edit} />
</Switch>
</main>
</Router>
)
}
}
// for <div id="main-customer"></div>
ReactDOM.render(<Main />, document.getElementById('main-customer'));
webpack.config.js
entry: './app/components/app.js',
