Querying a GraphQL API in a React Web Application

GraphQL is becoming all the rage, what with being able to query an API like you can query a database. There are two aspects when it comes to GraphQL development, the first being around creating GraphQL APIs and the other around creating applications that can query those APIs.

If you’ve been keeping up, you’re probably already familiar with my courses, Web Services for the Go Developer, and Web Services for the JavaScript Developer. In these courses we saw how to create a GraphQL API. Looking at things in the other direction, you might remember my tutorials, Query a GraphQL API on Android and iOS with NativeScript and Angular, and Query A GraphQL API with Vue.js and Axios, which demonstrated how to query a GraphQL in an Angular or Vue.js application.

This time around we’re going to explore another popular framework. We’re going to see how to query a GraphQL API from within a React application using a variation of methods.

Scale, Crop, and Zoom Images in a React Web Application

If you’ve been keeping up with the blog, you might remember a few tutorials I wrote around the Cropper.js library for JavaScript applications. In these tutorials I demonstrated how to manipulate images in Angular as well as Vue.js web applications. While the tutorials were more or less the same, the framework was different, which resulted in some differences in the code used.

So what if we were building a React application and needed to manipulate images prior to uploading them to a server?

In this tutorial we’re going to see how to use Cropper.js to crop images within a React web application. While we won’t be uploading these images to a remote server for storage, such as a task can be easily accomplished with a bit of imagination.

Make HTTP Requests with Axios or Fetch in a React Web Application

In most client facing applications there’s a need to consume data from remote web services, also referred to as APIs. This is because there is a separation of backend and frontend logic in modern applications, not specific to the web. With JavaScript, there are quite a few options when it comes to making HTTP requests, some of which I explored in my previous tutorial titled, Execute HTTP Requests in JavaScript Applications.

What if we wanted to execute HTTP requests using a popular framework like React?

In this tutorial, we’re going to look at what it takes to make HTTP requests and consume data from remote web services using React and simple JavaScript.

Test Password Strength with RegEx in a React Application

While some organizations think it is up to the user to protect themselves by choosing strong usernames and passwords, the developer can help influence good password choices by including it in the design of the application. For example, the developer could include bars, percentages, or colors to help dictate quality of a password as the user enters it into a form.

A lot of us know a weak password is short and contains either alpha or numeric, but never both. We also know strong passwords include symbols as well as variations of character case-sensitivity. So how can we check for these things in the application?

In this tutorial we’re going to make use of regular expressions to test the quality of a password. This is going to be done with simple JavaScript in a React application.

Getting Started With Capacitor Using React

In February 2018 the Ionic team announced Capacitor. Capacitor allows you to make your frontend builds run everywhere, for example, iOS, Android, Electron and in the browser as a progressive web application (PWA).

Also, Capacitor provides a high-quality API to work with native functions within your apps. For example, you can get access to the camera and it means you still get this access to every platform.

In the official Capacitor documentation you can find a well-described tutorial on how to use Capacitor with Ionic, but in our tutorial, we will check how you can add Capacitor to your existing React app. We will create a simple React app with Capacitor and run it on iOS and in the browser as PWA.

Why RxJS Is The Hottest Way To Handle Async

Observables. Native To The Web Platform?

One of the common misconceptions in the web world is that RxJS is an “Angular thing”.

What most developers don’t realize is that Observables are on their way to becoming native to the web, and if you aren’t already using them to handle asynchrony, you are not adequately preparing yourself for the future.

The Best Way To Handle Asynchrony

RxJS allows you to solve hard problems with less code, promotes maintainability, readability, flexibility, and composability. These are just some of the reasons RxJS is the hottest way to handle async right now.

Learning how to handle asynchrony the reactive way instead of using promises and callbacks will also greatly reduce the probability that you are leaking resources. And because RxJS works with any framework (angular.js, react.js, ember.js, vue.js), node, and even without frameworks, it’s easy to future proof your applications and have confidence in using this technology.