A feature of Jest allows for the running of all *.test.js files throughout your project, regardless of their location. Due to this, some teams have discovered the benefits of co-locating unit tests with the units they are testing.

When you are building any portion of your application, you should inherently be concerned with how you will test that section. And although you can obtain this focus through a project-wide tests/ directory, colocating unit tests with the units they are testing brings you closer mentally to the fundamental values of TDD.

When you are working on a unit of your application…

Editing the Config

Relative paths can quickly become a hassle, especially in large apps. To allow the use of non-relative paths, simply add the following to the resolve block of your webpack configuration file (located in /config of an ejected create-react-app).

root: [ path.resolve('./src') ]

Note, some newer versions of create-react-app may require you to also import path into the webpack configuration file.

var path = require(‘path’);

The Results

This allows you to do imports such as

import Navigation from "containers/Navigation/Container"

rather than…

import Navigation from "../../../containers/Navigation/Container"

An import starting with ./ or ../ will be relative. An import path with no prefix will search the src directory recursively. Anything else will search node_modules.

For example, import { Link } from "react-router" will still work.

Example Code

Recently, the React team and a number of contributors released a fantastic tool for creating configuration-less React applications based on a set of minimal ideas to help beginners dive into building React applications without having to worry about tooling a beginner may find daunting.

There are two ways you can add Sass or Scss to a create-react-app project.

Install With: NPM Scripts

This method is simpler and can work without ejecting your project. If you prefer not to eject, use this method. Click here to view the project’s official guide on how to install Sass or Scss using NPM Scripts.

Install With: Webpack

This method is not…

If the idea behind a system is flawed initially, UX improvements on the system are appreciated, but make no improvements to the core problem — the idea of the system itself. The addition of reactions and templates simply iterate on an idea that most likely should be recreated entirely. Github Issues have grown facilitate bug tracking, feature requests, discussion boards, general questions, and even task management or project planning.

Pull Request Project Management

Turning off issues may be the only solution currently, but what developers need is true project management software. A lot of the solutions I have been seeing have basically been reimplementing…

I started 2015 with strong types — and ended with none.

Throughout the first half of 2015, I was a Java programmer. I favored tightly-coupled object-oriented hierarchies and loved abstraction — and now? Not so much. By May I had written my largest project yet, with Github reporting 99 commits and 14,000 lines of written code. I was proud, but also tired and easily distracted. My distraction and desire to learn a new language led me down unfamiliar paths… Don’t tell the JVM, but I started writing Node.

I felt like a traveler lost at sea.

In Java, I never…

Shortly before the Christmas of 2015, Pete Hunt engaged the Javascript community on Twitter, asking where newcomers to React experienced the most difficulty.

After seeing a call from responders for an article summarizing responses, and after reading Eric Clemmons’ post on Javascript Fatigue, I decided to do some analysis of the original tweet’s responses. To get an idea of the content of the replies, I did a word count of all responses using the code here.

  • Tools and Tooling: Mentioned 22 times
  • Redux and Flux: Mentioned 16 times
  • Webpack Alone: Mentioned 12 times
  • Babel Alone: Mentioned 5 times

To run…

Connor Elsea

Founder of Elsea Labs. Junior Developer at NewAperio. ❤ React, Redux, JavaScript.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store