DISCOVERY

May 31st, 2018

React & Webpack Seed Project Part I: Building With React

React

JSX

+3 More

Since mid March a lot of my free time work has been dedicated to building React.js apps. In fact, I built this website in the past month and a half with the MERN stack - MongoDB, Express, React and Node.js. Before I started building this website I built a sample prototype application using two key technologies - React and Webpack. The knowledge I learned from this prototype helped jump start my work on the website. This discovery looks at the first technology used in the prototype application - React. I will look at the Webpack portion of the prototype in my next discovery post.

React is a library for generating views. A view is the UI of an application, and for a web application it is rendered HTML. In a traditional web application, the client side JavaScript code manipulates the HTML view through the Document Object Model (DOM) API. When using React on the client side, views are interacted with through a construct called the "Virtual DOM."

DISCOVERY

January 19th, 2019

React Lifecycles

React

Angular

+3 More

In a previous article I looked at lifecycles in the Angular framework. This post looks at lifecycles in React, a front-end library first released in 2013 by Facebook (after AngularJS and before Angular). If you want to learn more about React, I've written multiple posts about it in the past (including an introduction to the basics).

I enjoy working in React more than Angular nowadays. React feels simpler for developing website components. As this post reveals, the lifecycles of React components are equally simple.

DISCOVERY

January 31st, 2020

Exploring New Features in React 16.3

React

JavaScript

When I was interviewing for jobs in the fall, one interviewer asked me if I had React 16 experience. I said "yes", figuring I must have worked on React 16 features during my year and a half experience. I've worked with React since I created a React and Webpack seed application in March 2018. Since then I wrote jarombek.com (the website you are currently viewing) in React along with contributing to a client-facing React application for seven months at my job.

As the interview questions rolled on, it became obvious that I wasn't utilizing the latest React features. Luckily I aced the coding assignment and other technology questions, so the interview ended up going well.

DISCOVERY

June 30th, 2021

Styling React Components With JSS

JSS

React

+3 More

In my previous article on JSS, I discussed the improvements JSS makes over traditional CSS stylesheets and CSS preprocessors such as Sass. JSS utilizes the highly expressive JavaScript language, enables style reusability, dynamic styling, and provides name conflict resolution. Although JSS works with any front-end framework or library, it really shines when paired with React. In this article, I begin by discussing the basics of JSS in React applications. Then, I show sample code from my SaintsXCTF application, which is running in production and utilizes JSS for its stylesheets.

DISCOVERY

April 30th, 2018

React Dynamic JSX Elements

React

JSX

JavaScript

Recently I've spent a lot of time working with React.js for my upcoming website (which by the time you are reading this is completed!). One of the challenges I faced was dynamically deciding at runtime which JSX element to render. It turns out there is a pretty nice solution to this problem.

This is the first time I've posted about React.js. Therefore lets quickly review or initiate ourselves with the React library.

RETROSPECTIVE

July 31st, 2021

Building a GraphQL React Prototype

GraphQL

React

+5 More

Last year, I started using GraphQL at my job. I decided to create some GraphQL prototypes in my spare time, to get better acquainted with the GraphQL ecosystem. In 2018 I learned the basics of GraphQL and wrote two articles about my experience, but never dove into using GraphQL in real world applications. The GraphQL React prototype discussed in this article along with my Apollo prototype are the beginnings of that production application journey. In the future, I plan on using GraphQL for the API layer of my applications.

The GraphQL prototype discussed in this article is a React front-end application that connects to a GitHub GraphQL API. The API provides details about my repositories, and React displays those details in a dashboard. The dashboard is shown below.

RETROSPECTIVE

November 5th, 2020

Building a Reusable React Component Library

React

JavaScript

+2 More

Front-end applications, specifically those created with React, are built with small reusable JavaScript functions called components. Each component renders and handles the business logic for a small chunk of the application. Components have props, state, and elements that render on the screen.

For developers working on multiple React applications or working for an organization that uses React, there are benefits to using reusable component libraries. Component libraries are shared amongst applications and contain generic components such as buttons, accordions, and form elements. Besides the obvious benefit of code reuse, component libraries help enforce organizational style guides and allow developers to easily iterate on components used in all their applications. Component library setup is easy and can save a lot of front-end development time in the long run.

DISCOVERY

November 7th, 2018

Using D3 in React Part I - Project Integration

React

D3

+2 More

D3 (Data Driven Documents) is a JavaScript library for creating data visualizations on the web. One of the challenges with D3 is integrating it with React.js, a front-end JavaScript library written by Facebook. Complications occur because both React and D3 work by manipulating the DOM, and React manipulates the DOM through a layer of abstraction called the Virtual DOM. Projects containing two libraries that manipulate the DOM through different philosophies can lead to conflicts1.

Luckily I'm not the first person to encounter the issue of integrating React and D3. There are many solutions, and I chose to use a library called react-faux-dom. React-faux-dom creates a "fake" DOM implementation, tricking D3 into thinking its working with the real DOM2. In reality its delegating work to the Virtual DOM and React!

RETROSPECTIVE

February 5th, 2020

Unit, Integration, and Snapshot Testing in React with Jest and Enzyme

Jest

Enzyme

+6 More

In an article last fall I spoke about my change in mindset towards unit testing. In my early programming days I thought unit tests slowed down development to a fault. Nowadays they are mandatory in all my applications. Unit tests are assertions that a unit of code is working as expected in isolation of other components in the codebase. They promote code review, help catch recurring bugs, and ease the burden of upgrading and switching technologies.

For React applications, the de facto testing framework is Jest. Jest was written by Facebook with React unit testing in mind, making it a natural fit. Alongside Jest, Enzyme is used to test React components. Enzyme was created by AirBnB to render components for testing. It provides an API to traverse the rendered DOM nodes in a component and hook into stateful component instances.

RETROSPECTIVE

February 15th, 2020

Hosting a Static React Application on Amazon S3

AWS S3

AWS CloudFront

+3 More

Amazon S3 (Simple Storage Service) is an AWS service for storing objects. Since objects are files, S3 can be viewed as a filesystem accessible over HTTP. I often use S3 for storing images, fonts, and other assets for my applications. Some examples include my jarombek.com assets and my global shared assets.

Since Amazon S3 stores files and acts as a filesystem, it can also be used to host static websites.

DISCOVERY

November 10th, 2018

Using D3 in React Part II - D3 Data Visualization

React

D3

+3 More

My previous post explored integrating D3 with a React.js project. This post focuses on the D3 portion of the codebase, specifically how D3 builds a bar graph and updates it on data changes.

D3 is a data visualization library built in JavaScript. It binds text data to elements in the DOM1. D3 provides methods that are easily chained to bind data to elements in the browser.

DISCOVERY

June 4th, 2018

React & Webpack Seed Project Part II: Bundling With Webpack

Webpack

React

+5 More

I think Webpack is intimidating. There is so much configuration needed to bundle a web application that includes JavaScript, style sheets, images, fonts, non-JavaScript files, etc. Maintenance work on my Webpack config is never a task I look forward to. I have only used Webpack for a few months now, so hopefully some of the frustration eases over time.

Nonetheless, Webpack is important to know in the current state of web programming. I used Webpack for the first time to bundle my React prototype application (and went on to use it on the website you are currently viewing!). My previous discovery post went over the React portion of my prototype application. This post looks at the Webpack portion and some of the interesting configuration pieces. I'm not giving a tutorial on how to build a Webpack config - instead focusing on things I've learned about the bundler and my initial observations.