{"id":4028,"date":"2023-07-10T00:26:54","date_gmt":"2023-07-10T06:26:54","guid":{"rendered":"https:\/\/linuxitos.com\/main\/?p=4028"},"modified":"2023-07-19T22:29:20","modified_gmt":"2023-07-20T04:29:20","slug":"set-up-laravel-inertia-react","status":"publish","type":"post","link":"https:\/\/linuxitos.com\/main\/set-up-laravel-inertia-react\/","title":{"rendered":"Set Up Laravel + Inertia + React"},"content":{"rendered":"\n
\"\"<\/a><\/figure>\n\n\n\n

Contexto<\/h1>\n\n\n\n

Configuraci\u00f3n de entorno de desarrollo para Laravel, Inertia y React. Con la finalidad de iniciar desarrollos con laravel (PHP backend) y React (Front End).<\/p>\n\n\n\n

Laravel<\/a><\/h2>\n\n\n\n

Laravel es un framework de PHP que facilita el desarrollo de aplicaciones web. Su dise\u00f1o de software se basa en el patr\u00f3n MVC (Modelo Vista Controlador), por lo que proporcionar\u00e1 a tu c\u00f3digo una base estructurada con la que comenzar a desarrollar.<\/p>\n\n\n\n

Una de las grandes ventajas de Laravel es que cuenta con un amplio abanico de librer\u00edas y m\u00f3dulos para ampliar sus funcionalidades.<\/p>\n\n\n\n

M\u00e1s informaci\u00f3n<\/a><\/p>\n\n\n\n

Inertia<\/a><\/h2>\n\n\n\n

Es una librer\u00eda que combina lo mejor del server side render y client side render, permiti\u00e9ndonos construir SPAs usando el render cl\u00e1sico de vistas, controladores y el routing de nuestro backend, sin tener que definir una API y un sistema de routing en el frontend.<\/p>\n\n\n\n

El core de inertia es actuar como una librer\u00eda de routing en el cliente, nos permite hacer peticiones a nuestro servidor sin forzar un recarga de nuestra p\u00e1gina, esto es debido a que para trabajar con peticiones, por ejemplo ir a otra p\u00e1gina lo tenemos que hacer a trav\u00e9s de la directiva<\/p>\n\n\n\n

M\u00e1s informaci\u00f3n<\/a><\/p>\n\n\n\n

React JS<\/a><\/p>\n\n\n\n

Es una biblioteca para construir interfaces de usuario. React no es un framework \u2014 ni siquiera se limita a la web. React es utilizado con otras bibliotecas para renderizar en ciertos entornos. Por ejemplo, React Native puede usarse para desarrollar aplicaciones m\u00f3viles; React 360 permite crear aplicaciones de realidad virtual; adem\u00e1s de otras posibilidades.<\/p>\n\n\n\n

El objetivo principal de React es minimizar los errores que ocurren cuando los desarrolladores construyen interfaces de usuario. Esto lo hace mediante el uso de componentes \u2014 piezas de c\u00f3digo l\u00f3gicas y auto-contenidas que describen una parte de la interfaz del usuario. Estos componentes se pueden juntar para crear una interfaz de usuario completa, y React abstrae la mayor parte del trabajo de renderizado, permiti\u00e9ndote enfocarte en el dise\u00f1o de la interfaz.<\/p>\n\n\n\n

M\u00e1s informaci\u00f3n<\/a><\/p>\n\n\n\n

Configurando Proyecto Laravel<\/h1>\n\n\n\n

1.- Crear proyecto<\/h2>\n\n\n\n
composer create-project --prefer-dist laravel\/laravel laravel-one-react<\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
2.- Instalar requerimientos<\/h2>\n\n\n\n
composer require laravel\/breeze --dev<\/pre>\n\n\n\n
composer require inertiajs\/inertia-laravel<\/pre>\n\n\n\n
php artisan breeze:install react<\/pre>\n\n\n\n
Opcional si se requiere usar typescript<\/p>\n\n\n\n
php artisan breeze:install react --typescript<\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
3.- Migraci\u00f3n<\/h2>\n\n\n\n
php artisan migrate<\/pre>\n\n\n\n
4.- Iniciar servicios<\/h2>\n\n\n\n
php artisan serve<\/pre>\n\n\n\n
npm run dev<\/pre>\n\n\n\n
Para probar la aplicaci\u00f3n, abrir el navegador en la ruta: http:\/\/127.0.0.1:8000<\/a><\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
M\u00e1s adelante subir\u00e9 los cambios para obtener \u00e9ste resultado<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Fuentes:<\/p>\n\n\n\n
https:\/\/inertiajs.com\/title-and-meta<\/a><\/p>\n\n\n\n
https:\/\/tailwindcss.com\/docs\/object-position<\/a><\/p>\n\n\n\n
https:\/\/laravel.com\/docs\/10.x\/starter-kits#breeze-and-inertia<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Contexto Configuraci\u00f3n de entorno de desarrollo para Laravel, Inertia y React. Con la finalidad de iniciar desarrollos con laravel (PHP backend) y React (Front End). Laravel Laravel es un framework de PHP que facilita el desarrollo de aplicaciones web. Su dise\u00f1o de software se basa en el patr\u00f3n MVC (Modelo Vista Controlador), por lo que […]<\/p>\n","protected":false},"author":1,"featured_media":4029,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1889,1540,1543,7,1541,1890],"tags":[1640,1921,1922,1638,1639,1556,1920,1886],"class_list":["post-4028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web","category-develepmet","category-developer","category-fedora","category-web-developer","category-web-development","tag-framework","tag-inertia","tag-inertiajs","tag-laravel","tag-mvc","tag-php","tag-react","tag-reactjs"],"_links":{"self":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/4028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/comments?post=4028"}],"version-history":[{"count":3,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/4028\/revisions"}],"predecessor-version":[{"id":4056,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/4028\/revisions\/4056"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/media\/4029"}],"wp:attachment":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/media?parent=4028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/categories?post=4028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/tags?post=4028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}