May 31st, 2018
React & Webpack Seed Project Part I: Building With React
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.
January 19th, 2019
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.
January 31st, 2020
Exploring New Features in React 16.3
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.
June 30th, 2021
Styling React Components With JSS
April 30th, 2018
React Dynamic JSX Elements
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.
July 31st, 2021
Building a GraphQL React Prototype
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.
November 5th, 2020
Building a Reusable React Component Library
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.
December 3rd, 2021
Redux in a TypeScript React Application: Following the Ducks Pattern
Redux is a state management pattern that is commonly used in complex React applications. Redux, based on the Flux design pattern, is helpful when application state is shared between many pages of a website and is updated frequently1. In my saintsxctf.com website, Redux stores and uses application state across all my webpages. SaintsXCTF is a good example of a website that can benefit from Redux; it needs login information, user preferences, team memberships, group memberships, and more to be shared amongst all pages.
In this article, I start by going over the basics of Redux. I'll also explain the “ducks pattern”, which is an approach to writing Redux code. Then, I'll walk through the Redux configuration and code in my SaintsXCTF application. All the code for my SaintsXCTF web application is available in a GitHub repository.
November 7th, 2018
Using D3 in React Part I - Project Integration
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!
November 15th, 2021
Building a Web Application with React and TypeScript
I recently rewrote my web application saintsxctf.com using React and TypeScript. This article looks at how the application is configured and walks through some React code. All the code for the website exists in a GitHub repository.
February 5th, 2020
Unit, Integration, and Snapshot Testing in React with Jest and Enzyme
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.
February 15th, 2020
Hosting a Static React Application on Amazon S3
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.