Categories
React

Understanding the React Context API & useContext Hook

Passing data (i.e. props) between components has always been one of those things with React that’s just a little… annoying.

Once again, though, the React team have provided an alternative approach that makes this a breeze. That solution is Context.

Categories
Project React

Project Summary: Random Country Fact Generator

As part of the React course I’ve been taking on Udemy, it introduced me to the REST Countries API (and how to access APIs with fetch, etc). Since finding out how easy it is to get data from an API like that, I knew I needed to create a project with it for some unguided learning.

I’ve got a few ideas for apps that will use the API, but I thought I’m best starting with the smallest, most straightforward one first.

Check it out here (and the code here).

Categories
Project React

Project Summary: URL Deconstructor

In my day job there’s been a number of times where I’ve been working on an analytics tracking issue and I’m either looking to understand the general structure of a given URL or I’m searching through 1,000+ characters of tokens and UTMs and redirect paths looking for a specific string of text.

I’ll be honest, I’ve sat there and manually split the URL out into all of its component pieces in order to make sense of the query string keys and values. It was painful. Really painful.

So, what do you do when you feel that sort of pain? That pain of knowing there must be an easier way…

Well, you solve the problem with code!

Categories
React

A Quick Intro to useReducer() (with an Example)

useState is a nice and simple hook for managing state in functional components (as opposed to setState in class components). But as the complexities of your application grow, you’ll find yourself needing something a little more powerful.

Say “hello” to useReducer!

Categories
JavaScript Project React

A Tale of Two ‘To Do’ Apps: 5 Things I Learned

I recently followed two tutorials from the very endearing Dev Ed on YouTube where he created the very same To Do app in different ways; once in vanilla Javascript and again in React. It only took an hour or two to make each one, but it was a really interesting process.

Here’s what I learned…

Categories
GitHub React

Serving a Create React App Project via GitHub Pages

Being new to GitHub Pages, I experienced a couple of issues in the process of getting a Create React App project live.

Here’s how I got it working…

Categories
React

Quick Guide to React’s useEffect() Hook (with Examples)

The useEffect() hook is probably one of the more complex or difficult to understand hooks in React. However, it’s very powerful and is essentially a critical piece of the framework used when fetching data from APIs, using timers and more.

With that in mind, it’s worth getting your head around it.

Categories
React

React Refs & useRef() Explained (with Examples)

If we ever need to work with a DOM element directly (as opposed to managing state via React), Refs are what we need!

Categories
React

React Portals Explained (with Examples)

Let’s take a look at Portals – the handy way to get your component from A to B!

Categories
APIs ES6 JavaScript

Asynchronous Javascript: fetch, Promises and async / await

Understanding asynchronous javascript – and working with APIs generally – can really take your horizons to a whole new level. There are countless APIs out there that suddenly become available to you; whether that’s free datasets or triggering functionality in your favourite product.

The world is your lobster!