node-sass and Node 9.1.0

So the other day I discovered that I could use Scss and CSS Modules in React applications, and how to configure my own webpack-dev.config.js and webpack-prod.config.js. It’s pretty much the same configuration as with CRA (create-react-app), but with the addition of SCSS configuration on top of CSS. I have already tested it and it works like a charm. But this is not the subject of this post. Here I want to talk about node-sass compatibility with React 16. [Read More]

Radium and Jest

I just completed a React image slider app using Jest for testing and Radium for React inline styles, and I thought I would share my experience so that others who may use the two tools together wouldn’t be surprised when certain things took place. As some of you may already know, there is a certain amount of configuration involved in making Radium work for you. First you have to install it. [Read More]

Spectacle V4

This past Saturday I presented at React Camp, which was a part of Open Camps NYC. I used a presentation deck called Spectacle, created by Formidable Labs. I chose to use the Spectacle boilerplate because of its flexibility. What was so cool about Spectacle is that it is written with React. The presentation went really well. The slide deck looked great. I (and others) had been concerned that my font would not be large enough, but there was totally no problem there. [Read More]

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]