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.
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!
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.
November 10th, 2018
Using D3 in React Part II - D3 Data Visualization
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.
June 4th, 2018
React & Webpack Seed Project Part II: Bundling With Webpack
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.