React.js Tutorials

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.

React.js Continued... State!

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.

React.js Continued... Components!

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 :'(

The target='_blank' vulnerability

For many years, I was a fan of using target="_blank" inside any anchor tags on my website that linked to external sites so it would keep the viewer still on my site in the background so they can easily come back to it later on. However, Ben Halpern describes the problem (with examples) of how it is an issue on this page and how the window/tab containing the origin website (i.e. the one with the target anchor tag) could be manipulated to trick the user into providing details to a fake equivalent site.

React.js Revisited

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!

npm package.json - Package From a Github Commit

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!?

JSX/ES6 Syntax Highlighting in Visual Studio 2015

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.

Griddle - A Grid/Table Component for React

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.

Getting Started with React.js

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.

Ribbon in .NET 4.5 using WPF and MVVM

I’ve been spending some time recently to learn WPF a bit better including the MVVM pattern to encourage the separation of concerns between the view and the logic behind it.

It’s been a steep learning curve (to say the least!) but today I spent a bit of time looking into getting an Office-esque ribbon bar onto the main window of my dummy application. At first I wasn’t too sure, but I soon realised it’s not too dissimilar to any other button.