CodeIgniter 4
Requisito -> Tener instalado Composer
https://github.com/codeigniter4/CodeIgniter4
Clonar github de codeigniter 4
git clone https://github.com/codeigniter4/CodeIgniter4.gitsudo chmod +777 -R CodeIgniter4php spark serveWebpack
Requisito > Tener instalado de Node.js y npm
Ahora vamos a crear un archivo package.json
Now we are going to create a package.json file
npm init -yDependencies / Dependencias
Instalaremos 6 dependencias necesarias para la aplicacion React que funcione correctamente. Todas las librerias lo usamos en una linea de instalar npm :
We will install 6 necessary dependencies for the React application to work correctly. All libraries use it in one line to install npm:
sudo npm install path @babel/core @babel/preset-react react babel-loader react-dom --saveY luego instalar webpack / Then install webpack:
npm install webpack webpack-cli --globalCrear un archivo webpack.config.js / create file webpack.config.js
var path = require('path');
module.exports = {
entry: './components/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
}
]
}
}React.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Root extends Component {
render() {
return (
<h1>Hello World from React</h1>
)
}
}
let container = document.getElementById('app');
let component = <Root />;
ReactDOM.render(component, container);Ejecutar webpacl / run webpack
webpack --config webpack.config.jsView
<div id="app"></div>
<script src="dist/main.js" charset="utf-8"></script>Comando para compilar webpack por cada modificaciones
sudo webpack --watch Template
<!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;">
Full Stack - CodeIgniter 4 & React.js
</h1>
<hr>
<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">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<main role="main">
<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">Phone</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John Doe</td>
<td>[email protected]</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">1</th>
<td>John Doe</td>
<td>[email protected]</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">1</th>
<td>John Doe</td>
<td>[email protected]</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>
<div>
<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="[email protected]" />
</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>
</main>
</div>
<script src="/dist/main.js" charset="utf-8"></script>
</body>
</html>
Tutorial part
#2 View
https://www.tutofox.com/codeigniter/tutorial-crud-api-rest-codeigniter-4-react-js-2-view/
#3 Model
https://www.tutofox.com/codeigniter/tutorial-crud-api-rest-codeigniter-4-react-js-3-model/
#4 Create
https://www.tutofox.com/codeigniter/tutorial-crud-api-rest-codeigniter-4-react-js-3-create/
#5 List
https://www.tutofox.com/codeigniter/tutorial-crud-api-rest-codeigniter-4-react-js-5-list/
#6 Edit
https://www.tutofox.com/codeigniter/tutorial-crud-api-rest-codeigniter-4-react-js-6-edit-get/
#7 Update
https://www.tutofox.com/codeigniter/tutorial-crud-api-rest-codeigniter-4-react-js-7-update/
#7 Delete
https://www.tutofox.com/codeigniter/tutorial-crud-api-rest-codeigniter-4-react-js-8-delete/
