Building A Vue Front End For A Laravel API

Building A Vue Front End For A Laravel API

The previous article had us building a JSON Rest API using the Laravel Framework. In this tutorial, we’ll use Vuejs to build a front end which can consume the API we have in place. Instead of rendering blade files, we can use Vue components and AJAX to simply fetch the data we need to display from the API. We’ll even learn a little bit about customizing the CSS in Laravel using SCSS and Laravel Mix.…

Laravel API Resource Tutorial

Laravel API Resource Tutorial

In this tutorial we’ll build a full json crud api using Laravel and the new Eloquent API Resources feature. This approach is used when you want to build the entire back end of your application using Laravel, while leaving the front end to Vue, React, or Angular. By using Laravel and Eloquent API Resources, you can format your data responses however you like while also adding meta information, pagination links and information, custom data wrapping, conditional attributes, and relationships.…

Higher Order Functions In JavaScript

javascript higher order functions

Without fail, you are going to need to iterate or loop over data in your programs no matter the language. In JavaScript we have several loop constructs to do this, as well as the so called higher order functions. These higher order functions allow a more concise syntax to allow you to iterate over a collection while applying the logic of your choice to each item in the collection if you like.…

React useState Hook

react use state hook

There has been a paradigm shift in how React works with regard to state, classes, and functions. React now has a feature called hooks, and it looks like a game changer. From reading the react documentation, and watching React Conf, it looks like us web developers should become familiar with Hooks in React since they make for cleaner React code. Class components are still supported, but it looks like Hooks in combination with Function Components are the favored approach moving forward.…

Create A Navbar Component In React

react lift state navbar

In this tutorial we are going to add a NavBar component to the application we have been building in React. During this process we’ll need to do some refactoring in order to shift local state out of child components, and into the App parent component. By following this convention, we’ll need to raise events in the child components while handling them in the parent component. This allows our application to have a single source of truth.…

How To Delete An Item From An Array In React

How To Delete An Item From An Array In React

In this react tutorial we’ll review a few things and then look at how to delete an item from an array. The number of items in the array determines how many item components are displayed on the page. We want to be able to click a button on a specific item, and have React automatically remove it from the page. But first, let’s review a few key concepts in React.…

Composing React Components

composing react components

When we talk about composition, we are talking about using smaller pieces to assemble a larger cohesive unit. In React, elements are used to create components. In other words, common html pieces like divs, spans, forms, and so on are arranged together to create a component. In talking about composing components in React, we are referring to now taking one or more components and using them to build a larger part of the application.…