A while ago, I was working on a project based off the Atomic SPA Starter Kit, which uses TypeScript, React, and GraphQL. One of the features we needed to build was a file upload component that supported dragging and dropping a file from a separate window onto the UI. Read more on Creating a Drag-and-Drop File Uploader with React & TypeScript…
react
Migrating an Ejected Create React App to TypeScript
I love Create React App, and I also love TypeScript. That means I really love react-scripts-ts, which is a great way to spin up a new SPA for experimental purposes.
Read more on Migrating an Ejected Create React App to TypeScript…
Should You Use React Storybook?
Our team recently started using React Storybook for a large React app that we have been building. In this post, I’ll share what we learned and hopefully encourage you to consider incorporating Storybook into your next React project. Read more on Should You Use React Storybook?…
Practices for Harnessing SCSS with React
We have been hard at work on a client project using React. We haven’t made our way to implementing CSS Modules yet, but we’ve established a set of rules to help us keep the CSS in order.
Read more on Practices for Harnessing SCSS with React…
Testing React App SEO using Fetch as Google
When developing a website, you might be interested in understanding how well search engines can crawl and understand it. Google offers a tool called Fetch as Google that can help answer that question.
React and TypeScript – The Basics
React is great, and with TypeScript, it can be even better.
If you haven’t used TypeScript with React, you might be wondering how much work is required to get started, and how React development with TypeScript is different than JavaScript. I’m going to address these questions, covering everything I would have liked to find in one place when I was getting started with TypeScript—specifically, what is required to set up a React/TypeScript project, and how some of the basic React/Redux type definitions work. Read more on React and TypeScript – The Basics…
React + Reselect – Memoized Selectors for Efficient Rendering
If you are familiar with React, then you probably have a general understanding of its component lifecycle. As a general rule, whenever a component’s props change, React will re-render the component. Read more on React + Reselect – Memoized Selectors for Efficient Rendering…
Five Steps to Learn React Quickly
At Atomic Object, a lot of our teams have been using React lately. Because of this, we’ve designed some of our recent bootcamps to ramp new employees up on it. In this post, I’ll go over some of the steps I would recommend when introducing yourself to React.
Using D3 with React and TypeScript
Typically, when working in React, it’s best to split UI elements into separate, reusable parts. This allows for more modular code and finer control over each element.
However, this goes against the way D3 operates, which is to subsequently call dot operators, building up elements and groups of elements.
So how can we utilize D3 in a meaningful way while simultaneously breaking up our elements into individual components? I’m going to show you by working through an example implementing a force graph.
Read more on Using D3 with React and TypeScript…
Making Toast from Scratch in React-Redux
Getting UI elements for free is a good feeling. When it comes to popup notifications, other frameworks provide these components for free. For instance, Rails has flashes and Android has snackbars. React is a moving target, so pulling in external libraries can help simplify situations, but it may prevent extensibility later.
Read more on Making Toast from Scratch in React-Redux…