class conflicts

Today I learned about how one can scope the css files of React components to the styling of only the components themselves using css modules. For example, App.css would contain styles only for App.js, Person.css, i.e., would only contain styles for Person.js, etc. I am using CRA for this project (for a change), and had to eject out of it in order to make the necessary changes in my CRA webpack. [Read More]

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]

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]