The React Newsletter

Hi <<First Name>>,

Quickly Consume a GraphQL API from React

React.js is one of the most popular front-end javascript frameworks today. For most of its life, React has connected to REST APIs to fetch or save data on a server. GraphQL is a query language that aims to replace REST APIs by providing consumers with a clear description of the data in the API. By combining these two technologies, you can quickly connect to an API with your React.js application. There are many packages available for connecting to a GraphQL API. One of the most popular is Apollo, however you can also use Axios, or even the built-in JavaScript fetch function. For this application, you will use Axios, but I encourage you to check out Apollo or any other GraphQL/React packages available.

To secure your application, you will be using Okta’s single sign-on provider. Okta provides a great set of tools to make integrating its service into a React application as simple as installing an npm package.

In React, you will learn to build an application using the public GraphQL API provided by Everbase. The data in this API contains some information regarding exchange rates in various currencies, as well as information about countries in which those currencies are used. For this application, you will allow the user to convert his/hermoney into another currency. Then you will show the user some information about what countries accept that currency.

A Tale of a React Newbie

When I first started working, I was almost completely new to React. I had only attended a few half-day courses during my years as a student and I was now assigned to a complex project written in React. However, some parts were written with modern React using Hooks and some parts were written with an older version of React.

I had no idea what Hooks were when I started out, and it didn't help that I couldn't tell the new and old React code apart. But, with a guiding hand from my colleague, we jumped right into it and started pair-programming on smaller tasks such as “Add a new button” or “Create a new filter”. These tasks were easy to start with, because I could study similar code from other places in the application and try to replicate the logic. Along the way, my colleague and mentor explained concepts such as hooks and components. I also used the React docs actively to better understand the theoretical concepts that were introduced to me and wrote down key takeaways from our solutions.

Next, we began refactoring older React into modern React. This helped me understand how Hooks work, and how they are actually used. It was mind-blowing to see how many lines of code that could now be replaced with a simple Hook. My experience with this approach was good. Because, after spending some time coding new functionality and at the same time trying to learn a new language, it was nice to focus more on syntax and understanding the different versions of React.

Create React App vs Next.js vs Gatsby

There are lots of options when building React applications so where do you start? Create React App is probably the most common starting point, but have you looked at Next.js and Gatsby? They are two frameworks built on top of React that bring features like building State Pages, Server Side Rendered Pages, built-in routing, etc.

Watch video

Dangers of using Objects in useState & useEffect ReactJS Hooks

Hooks have been around for almost two years now. They we’re added in React v16.8.0, and let you use state and other React features without writing a class.

In this article we won’t be going into much detail about what a hook is, its syntax, and so on and so forth. For that, you can visit the React documentation page where we think that the React team did a great job 👍🏾 and we couldn’t explain it better.

Making Draggable Components in React

As user interactivity becomes more prevalent in modern apps, it is sometimes nice to have draggable components implemented in your apps. Think of Trello or website builders like Wix. They have drag-and-drop elements which makes it easy and intuitive for users.

Hello everyone! In this article, I'll be illustrating some simple ways to make draggable components in React using the react-draggable package.

Svelte for Sites, React for Apps

First, I have to make a distinction between (Web) Sites and (Web) Apps. There are serious, intelligent people who insist that there isn't one. They want to build everything on the web with the same tech. Respectfully, they are wrong.

Web Sites primarily display content, while interaction is limited. First-load times are paramount since users may bounce and/or their limited data/power/CPU may deprive them of important information (see Alex Russell for math on a reasonable baseline but let's say you definitely want <200kb in the critical path). This was the web's original usecase - displaying information - and it is what HTML/CSS/Browsers are great at.

Web Apps primarily exist for interaction. CRUD apps, livestream apps, games, whatever. These apps tend to be heavier, which is unfortunate because that affects their performance. But even a 2MB JS app doesn't sound so bad when it is literally competing with a 200MB mobile app, and (let's say) you're developing a B2B app where everyone is on high power and high bandwidth devices anyway. You're typically also keeping apps open longer, so the first-load issue doesn't matter as much (and can be mitigated with service workers). The challenge is even higher once you account for the fact that the Web App must ship with it all the UI components and behaviors for it to work, whereas a typical native app will usually heavily lean on platform-provided components. The web platform still lacks a lot of standard components/APIs and developer experience needed to make writing great Web Apps easy - hence the gap is filled by frameworks.

React video courses

Because I need to pay my bills 😉