Jest, React and mocks

I use Facebook’s Jest to test my React applications. Yesterday, I ran a test to make sure that the changes I made to my Work component passed in my Portfolio React app. It did not! But as indicated in the iTerm2 console, it was not because of any errors in the Work component. It was because I am using a .pdf file in my About component, and Jest does not take kindly to it. [Read More]

Importing images in React

As some of you who are following my posts may already know, I have been working on a React version of my Front End Developer Portfolio. As much as I love my Jekyll version, I wanted to try new things. I also wanted to get going on my own projects using React while continuing my deep dive into various React workflows. I’ll be getting into the various changes I made to my developer toolkit related to the app’s workflow in other articles. [Read More]

React workflows update 1

React Workflows Presentation My React Workflow journey did not stop with my presentation on the topic the other day. I am working on a new rendition of my portfolio site using React, and while working on it, I checked another application I have hosted on gh-pages, and noticed that it did not have production quality code. I made the necessary changes to my webpack config, splitting my one original config there into two: webpack-dev. [Read More]

Flexbox sticky footer and React

Currently I am working on a React version of my portfolio site. I like my Jekyll version, but wanted to compare UX between React and Jekyll. I also wanted to add animation and interactivity which were not present in my Jekyll site. I came across a design challenge pretty quickly into the project. The “raised footer” issue. Pages which had little or no content meant a footer which failed to stay grounded to the bottom of the page. [Read More]

I gave my first presentation tonight

React Workflows Without Create React App Tonight I gave my first tech presentation (ever), and it was about creating your own React workflow without using create-react-app. I was nervous at first, but then after a minute or two, I relaxed and rode with it. 17 minutes into it, I was signaled that I only had 5 minutes left, and I still had 11 minutes to go. I had timed it quite a few times, and brought it down to 28 minutes. [Read More]

requestAnimationFrame & polyfill in React 16

If you read my previous post, “My first time using React 16.0”, you know that I got the following warning when I typed npm run test in Terminal: > react-universal-blog-app@1.0.0 test /Users/mariacam/Development/react-universal-blog-app > jest PASS src/sum.test.js PASS src/App.test.js ● Console console.error node_modules/fbjs/lib/warning.js:33 Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. Test Suites: 2 passed, 2 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 1. [Read More]

My first time using React 16.0

Yesterday I started working on a new React project which I am calling for the time being React Universal Blog. I set up my basic workflow, directory structure, and files. I set up for Jest testing, initially mocking out stylesheets and images to make sure everything was working properly. Later I’ll switch over to mocking CSS Modules, because I use them with POSTCSS. It’s not necessary to do that unless you intend to use Jest Snapshot Testing, and I do! [Read More]

My first tech presentation

I’m giving my first technical presentation @ReactNYC meetup this Thursday, September 28, 2017. 😅 And I’m using reveal.js for my slide presentation. The subject is “React Workflows without Create React App”. I’m trying a fun and new approach which won’t be revealed until the presentation itself, and people will be able to continue referring to it after the presentation is over! I’m sharing the stage with some really cool speakers (and topics): [Read More]

removing caps from css headers

I was wrapping up my React Workflows without Create React App presentation using reveal.js for the ReactNYC meetup this Thursday, September 28, 2017, and was not pleased with the way some of my slide titles came out. Many of them were made up of code, and they looked awfully funny all in caps! I had never thought about changing the styling of css headers before. I just passively accepted that headers were in caps. [Read More]

Deploying to gh pages with git subtree

So I just completed a todo app the other day using React. This was the second time I followed the course “Build Your First Production Quality React Application” on The first time I followed the course exactly, using create-react-app. However, I kept on encountering errors in the console. Probably some of them were due to errors on my part, but some definitely related to create-react-app. And the thing is, I wasn’t able to figure out what the issue was without running the eject command to see what was under the hood. [Read More]