A Look Into React Hooks

Nick Brown Articles, JavaScript, React, Single-Page Application 1 Comment

There are two ways to create React components, using functions or classes. A common question when learning React is often “When do I use which?” Luckily, this is a question that might eventually become obsolete with the release of React version 16.8 as it includes hooks.

Hooks provide a way to use functionality such as state and context that could only be achieved through classes previously to be easily done with functional components.

In this blog, we’ll introduce React hooks and show some code examples of those hooks in action. Specifically, we will take a simple class component and convert it to a function with hooks, have an in-depth look at hooks useState and useEffect, and create a custom hook. Let’s get started!

Part 4: Adding Smaller SPAs to An Existing Application

Chris Berry Articles, JavaScript, Node.js, Single-Page Application, solidfoundationsseries, Tutorial, Vue.js Leave a Comment

In our prior segments of this series, we addressed being able to add in pages to the application and have them automatically registered with the navigation. We also discussed having Markdown content associated with different pages of the application.

In this segment, we will talk about the philosophy of using smaller single-page applications in place of large ones. We’ll discuss how to add in a single-page application to this application. And we will dive into a couple of the example single-page applications and talk about how they were built specifically….

—

This is an in-depth learning series focused on a specific application: a JavaScript-based suite of single-page applications optimized for use in a microservice environment. We focus on telling the story of “why” and “how” it was built. 

Part 2: Navigation​ Setup with Node + Express ​

Chris Berry Articles, JavaScript, Microservices, Node.js, Single-Page Application, solidfoundationsseries, Tutorial, Vue.js Leave a Comment

This is an in-depth learning series focused on a specific application: a JavaScript-based suite of single-page applications optimized for use in a microservice environment. We focus on telling the story of “why” and “how” it was built.

In part one, we reviewed how the base application was created by using the Express Generator command line tool. We also reviewed the folder layout, look and feel, and an overview of what each section of the application does. In this post, we’re going to dive in a little deeper to the application and explain the why and how of the navigation setup for this application….

Part 3: Using Node​ and Markdown​ + the Package Showdown

Chris Berry Articles, JavaScript, Node.js, Single-Page Application, solidfoundationsseries, Tutorial, Vue.js Leave a Comment

This is an in-depth learning series focused on a specific application: a JavaScript-based suite of single-page applications optimized for use in a microservice environment. We focus on telling the story of “why” and “how” it was built. 

In Part 2 of our Solid Foundations Learning Series, we covered quite a bit of ground surrounding the discovery of Handlebars files, creating navigation based off of those files, and the routing back to the server based on those files.

Now we’re going to dive back into the Handlebars pages and find out how we’re getting content into the pages when they’re rendered by the server.

Lean Mean Vue Machine

Chris Berry Articles, Development Technologies & Tools, JavaScript, Vue.js Leave a Comment

The year is 2019 and Command Line Interfaces abound for many of the big name JavaScript frameworks such as Angular CLI, Create React App, and the Vue CLI.

But wouldn’t it be nice to go back to the days when you could just drop a simple script tag on a page and be able to run an application? Well, here is my attempt in trying to accomplish just that.

In this post, we create a working Vue.js web application with standard CRUD functionality and deploy it without any extra dependencies other than the actual application itself.