Saturday, December 21

Tag: react

5Nov By phpInfoNo Comments
Web Tricks

GraphQL On The Front-End (React And Apollo)

One of the main benefits of GraphQL is the client’s ability to request what they need from the server and receive that data exactly and predictably. Without much effort, one can easily pull nested data by just adding more properties to our queries instead of adding multiple endpoints. This prevents issues like over-fetching that can impact performance. Usually, to handle GraphQL on the client-side, we make use of the Apollo Client. It allows developers to define, handle, and make queries/mutations available within our application. It can also act as a state management tool with your client-side application. In this article, we’re going to learn how to handle real-time updates on the client-side using GraphQL. We’ll be learning how to do this with GraphQL Features like Cache Update, Subsc...
Read More
29Aug By phpInfoNo Comments
Web Tricks

React Children And Iteration Methods

The most obvious and common prop that developers work with within React is the children prop. In the majority of cases, there is no need to understand how the children prop looks like. But in some cases, we want to inspect the children prop to maybe wrap each child in another element/component or to reorder or slice them. In those cases inspecting how the children prop looks like becomes essential. In this article, we’ll look at a React utility React.Children.toArray which lets us prepare the children prop for inspection and iteration, some of its shortcomings and how to overcome them — through a small open-source package, to keep our React code function the way it is deterministically supposed to behave, keeping performance intact. If you know the basics of React and have at least an ide...
Read More
5Nov By phpInfoNo Comments
Web Tricks

Getting Started With Next.js

Lately, Next.js has termed itself The React Framework for Production, and with such bold claim comes a bevy of features that it offers to help you take your React websites from zero to production. These features would matter less if Next.js isn’t relatively easy to learn, and while the numerous features might mean more things and nuances to learn, its attempt at simplicity, power, and perhaps success at it is definitely something to have in your arsenal. As you settle in to learn about Next.js, there are some things you might already be familiar with and you might even be surprised at how it gives you a lot to work with that it might seem almost overwhelming at face value. Next.js is lit for static sites and it has been well-engineered for that purpose. But it also takes it further with i...
Read More
18Jun By phpInfoNo Comments
CSS Tricks, React

FLIP Animations in React

With a very recent Safari update, Web Animations API (WAAPI) is now supported without a flag in all modern browsers (except IE).  Here’s a handy Pen where you can check which features your browser supports. The WAAPI is a nice way to do animation (that needs to be done in JavaScript) because it’s native — meaning it requires no additional libraries to work. If you’re completely new to WAAPI, here’s a very good introduction by Dan Wilson. One of the most efficient approaches to animation is FLIP. FLIP requires a bit of JavaScript to do its thing. Let’s take a look at the intersection of using the WAAPI, FLIP, and integrating all that into React. But we’ll start without React first, then get to that. FLIP and WAAPI FLIP animations are made much easier by the WAAPI! Quick refresher on FLIP...
Read More
2May By phpInfoNo Comments
React

React Integration Testing: Greater Coverage, Fewer Tests

Integration tests are a natural fit for interactive websites, like ones you might build with React. They validate how a user interacts with your app without the overhead of end-to-end testing. This article follows an exercise that starts with a simple website, validates behavior with unit and integration tests, and demonstrates how integration testing delivers greater value from fewer lines of code. The content assumes a familiarity with React and testing in JavaScript. Experience with Jest and React Testing Library is helpful but not required. There are three types of tests: Unit tests verify one piece of code in isolation. They are easy to write, but can miss the big picture. End-to-end tests (E2E) use an automation framework — such as Cypress or Selenium — to interact with your s...
Read More
2May By phpInfoNo Comments
React

Using Formik to Handle Forms in React

There is no doubt that web forms play an integral role in our web site or applications. By default, they provide a useful set of elements and features — from legends and fieldsets to native validation and states — but they only get us so far when we start to consider the peculiarities of using them. For example, how can we manipulate the state of a form? How about different forms of validation? Even hooking a form up to post submissions is a daunting effort at times. Component-driven front-end libraries, like React, can ease the task of wiring web forms but can also get verbose and redundant. That’s why I want to introduce you to Formik, a small library that solves the three most annoying parts of writing forms in React: State manipulation Form validation (and error messages) Form ...
Read More
Using requestAnimationFrame with React Hooks
24Aug By phpInfoNo Comments
CSS Tricks, Web Tricks

Using requestAnimationFrame with React Hooks

Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way. TLDR: Pass an empty array as a second parameter for useEffect to avoid it running more than once and pass a function to your state’s setter function to make sure you always have the correct state. Also, use useRef for storing things like the timestamp and the request’s ID. useRef is not only for DOM references There are three ways to store variables within functional components: We can define a simple const or let whose value will always be reinitialized with every component re-rendering. We can use useState whose value persists across re-renderi...
Read More
Draggin and Droppin in React
17Aug By phpInfoNo Comments
CSS Tricks

Draggin and Droppin in React

The React ecosystem offers us a lot of libraries that all are focused on the interaction of drag and drop. We have react-dnd, react-beautiful-dnd, react-drag-n-drop and many more, but some of them require quite a lot of work to build even a simple drag and drop demo, and some do not provide you with more complex functionality (e.g. multiple drag and drop instances), and if they do, it becomes very complex. This is where react-sortable-hoc comes into play. ? This tutorial requires basic knowledge of React library and React hooks. This library has “HOC" in its name for a good reason. It provides higher-order components that extends a component with drag and drop functionality. Let’s walk through an implementation of its functionalities. Spinning up a project For this tutorial we are going ...
Read More
12May By phpInfoNo Comments
Web Tricks

Wrap a Vanilla JavaScript Package for Use in React

Complex web projects often require the use of 3rd party widgets. But what if you're using a framework while a widget is only available in pure JavaScript? To use a JavaScript widget in your project, the best approach would be to create a framework specific wrapper. That's what this article is about. At ag-Grid we focus on developing the fastest and most feature rich JavaScript data grid for web applications. It has no 3rd party dependencies and is specifically designed to deliver outstanding performance even if being used to display millions of records. To make integrations with React applications easier, we've implemented our own React grid wrapper. In this article, I'll show you how to wrap a 3rd party widget into a React component using ag-Grid as an example. I'll show you how we set u...
Read More
11May By phpInfoNo Comments
Web Tricks

React Starter: The Ways to Use React

Before we can jump into learning more about the specifics of React, it's important to talk about all the ways we can use React. This will give us a good mental overview to see how React can be added to any project. In a nutshell, it comes down to the following: React can be used by: Adding React to an existing site Using React to create a fully single page app Let's talk about the difference between an existing site and single page apps (SPA). React is a great fit for both scenarios. It's ability to scale based on the project, small or large, is one of the main reasons React is loved by so many. Adding React to an Existing Site If you've already got a website and want to add React, it's a two-step process. Usually you'll have a website that's served with a server-side language (PHP...
Read More
24Dec By phpInfoNo Comments
Web Tricks

How to Setup, Build and Deploy Native Apps with Vue

Vue-Native is a framework written by GeekyAnts, it is a framework built to deliver cross platform mobile native applications. It is inspired by the React-native API, hence it gives a developer the ability to build cross platform applications in Vue.js using React Native’s robust system. Vue Native was originally a fork from React-vue, a compiler that gave developers that ability to write Vue and React in the same codebase. In this article, we’ll build a simple application to introduce the APIs and components available in Vue native. We’ll be building a simple application that fetches the trending Gifs on Giphy, using the Giphy API. We’ll also display the Gif and details about it using components like ScrollView, Text, Image etc. Prerequisites To follow this tutorial, you’ll need to have ...
Read More
24Dec By phpInfoNo Comments
CSS Tricks

Animating Between Views in React

You know how some sites and web apps have that neat native feel when transitioning between two pages or views? Sarah Drasner has shown some good examples and even a Vue library to boot. These animations are the type of features that can turn a good user experience into a great one. But to achieve this in a React stack, it is necessary to couple crucial parts in your application: the routing logic and the animation tooling. Let’s start with animations. We’ll be building with React, and there are great options out there for us to leverage. Notably, the react-transition-group is the official package that handles elements entering and leaving the DOM. Let’s explore some relatively straightforward patterns we can apply, even to existing components. Transitions using react-transition-group Fir...
Read More
31Oct By phpInfoNo Comments
Web Tricks

4 Uses of JavaScript’s Array.map() You Should Know

From the classic forloop to the forEach() method, various techniques and methods used to iterate through datasets abound JavaScript. However, one of the more popular methods is the .map() method. .map() creates an array from calling a specific function on each item in the parent array. .map() is a non-mutating method in that it creates a new array as against mutating methods which only make changes to the calling array. This can be tricky to remember. In this post, we'll look at 4 noteworthy uses of the .map() in JavaScript. Let's begin!   Calling a Function on Each Item in an Array .map() as earlier stated accepts a callback function as one of its arguments and an important parameter of that function is the current value of the item being processed by the function. This is...
Read More