Tutorial CRUD API Rest – CodeIgniter 4 & React.js #1 Starter

CodeIgniter 4

Requisito -> Tener instalado Composer

https://github.com/codeigniter4/CodeIgniter4

Clonar github de codeigniter 4

git clone https://github.com/codeigniter4/CodeIgniter4.git
sudo chmod +777 -R CodeIgniter4
php spark serve

Webpack

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 -y

Dependencies / 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 --save

Y luego instalar webpack / Then install webpack:

npm install webpack webpack-cli --global

Crear 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.js

View

<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/

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *