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. http://fb.me/react-polyfills 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]