Javascript

Rendering an array of data as a clickable list using React.js

· Reading time: ~2 minute(s) (348 words) programming javascript reactjs

React.js is great for quickly rendering arrays of data in a tabular format, and there’s loads of grid-like packages out there in npm, but sometimes you just need to hand-crank something yourself. Which is fine, until you want the row to be clickable…

So how would you usually render a page from an array of data? Well, I’d probably start with some form of iterating the array and building up the content that way. I’ll explain how I’d go about doing this now.

(Continue reading)

React.js Tutorials

· Reading time: ~1 minute(s) (135 words) programming javascript reactjs

I’ve created a few pages on here which are now growing into a bit of a tutorial, so thought I’d collate the links into one post (and append links to any new related posts in the future) so it’s easier to follow.

So to start off, I’ll rewind back to November 2015, when I created my Getting Started with React.js post. This was using JSX and ES5, along with Browserify to “compile” the code to “Vanilla JS” which the web browsers support. Fast forward now back to this year (2017), and I’ve created an update post to that, along with a few subsequent posts that take the journey a few steps further.

(Continue reading)

React.js Continued... State!

· Reading time: ~5 minute(s) (903 words) programming javascript reactjs

This time I’ll be looking at State. What it is and how to use it… Like last time, we’ll be continuing with the code from the previous post.

Last time we created 2 components, home (which was a stateful component) and header (which was a stateless component). This time we’re going to handle state within the home component by calling an API. As in previous posts, I’ll be using the UK Police API as it doesn’t require any authentication (or at least it doesn’t at the moment, that could change!) which cuts down on fluff.

(Continue reading)

React.js Continued... Components!

· Reading time: ~5 minute(s) (900 words) programming javascript reactjs

It’s time to continue on from my React.js Revisited post that I made a few days ago. This time we’ll look at creating some components…

So what exactly is a “Component” in the context of React.js? In my head, I visualise React.js a little like Web UI Lego. The idea is you build your web application in blocks which are then built in a way which suits you and your application. A component is therefore like your Lego brick. They can be the bigger 4x2 stud ones, or those tiny 1 stud ones that cripple you when you stand on it with bare feet at night :'(

(Continue reading)

React.js Revisited

· Reading time: ~7 minute(s) (1314 words) programming javascript reactjs

Edit 05/03/2017 - My son has kindly followed this mini tutorial and has pointed out a few areas where I didn’t make much sense. All part of learning! But I’ve updated those areas below.

It’s been a while since I wrote up my beginner guide to React.js and I’ve been thinking it’s time to revisit it as things have changed since then with better tooling and ES6 support etc. so here I am!

(Continue reading)

npm package.json - Package From a Github Commit

· Reading time: ~2 minute(s) (283 words) programming javascript reactjs npm

Sometimes the version of an npm package has some functionality you want, but it has issues which break other stuff. What do you do? Pull the repo and build it yourself and shoehorn it in? Let’s see…

For my example, I’ll use the griddle-react package.

I quite like the Griddle component (griddle-react), I’ve posted about it in the past, and use it both at work and in side-projects at home whenever tabular data needs to be displayed as it’s quick and simple. However, I’ve had it occur twice where a bug is present in the current npm package version, but since the package was pushed to npm, the bug has been fixed in the Github repository. How do I get this version into my project!?

(Continue reading)

JSX/ES6 Syntax Highlighting in Visual Studio 2015

· Reading time: ~3 minute(s) (538 words) programming javascript reactjs visualstudio

Visual Studio 2015 (by default) isn’t exactly crash hot for editing JavaScript, especially JSX/ES6 for React etc.

A lot of developers seem to opt for alternative IDEs/editors for writing JavaScript code instead of staying in Visual Studio, however it’s often more effort to manage multiple IDEs for one project. I’ve tried a few things myself to get things working, some of the steps below are courtesy of Nick Dewitt on this StackOverflow post.

(Continue reading)

Griddle - A Grid/Table Component for React

· Reading time: ~3 minute(s) (501 words) programming javascript reactjs griddle

We had a requirement at work to display some tabular data that is retrieved from a web service as a JSON object. As we have recently started using React, it made sense to find a decent component that suited what we needed and after a bit of browsing, we found Griddle.

Unfortunately, their documentation; while it wasn’t bad, it’s not the best I’ve seen so I thought I’d throw something together to show how to get it working quickly and using a publicly available API, so anyone should be able to follow.

(Continue reading)

Getting Started with React.js

· Reading time: ~1 minute(s) (121 words) programming javascript reactjs

I’ve recently reviewed some of my blog content and found that some of it is advising of a way to do things in a way that I would no longer suggest. This article in particular focused around using Browserify and also installing npm packages globally; neither of which I’ve used/done for a long time.

I did write a “revisited” post a few years after this one, which is much more relevant and you can view that here: React JS Revisited.

(Continue reading)