DEV Community: Chris

How to setup pretty import paths in a create-react-app application

Chris — Mon, 05 Jul 2021 17:00:01 +0000

Pretty import paths?

We've all seen relative file import paths inside react applications. If you structure your apps like me you end up with terribly long paths to import other components. Auto-import can take care of that for you automatically, but isn't it hard to read and let's be honest, very, very error prone?

Webpack aliases

One way to solve this issue is adding webpack aliases. Now if you created your application using the create-react-app cli, you will notice that there isn't a webpack config to mess with unless you eject it running npm run eject, which will expose the entire configuration and makes you responsible of maintaining it. I prefer not ejecting my react application because I prefer the ease of use using react-scripts, so there must be another way.

Introducing craco

Create React App Configuration Override (CRACO) offers a way of overriding or extending configurations like webpack for example.

Bingo!

Install it running the following command

npm i @craco/craco

Next we need to configure craco. We do so adding a craco configuration file. Create the file craco.config.js in the root of the project and add the following content

const path = require('path');

module.exports = {
  webpack: {
    alias: { '@': path.resolve(__dirname, './src') },
  },
};

Let me explain how I intend to use this alias. I usually have a src/ folder in the root of the project containing all the components I use in a components/ subfolder. Other folders are helpers under helpers/ or custom hooks hooks/. The alias I am setting up will point to the src/ folder. So whenever I write import Component from '@/components/myComponent' it will resolve to 'src/components/myComponent', independent of the path I am currently work in.

The last thing to do is to run craco instead of react-scripts in our package.json scripts section:

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

This will load the craco config for you.

ESLint

When using ESLint you will notice red squiggly line whenever you start using the new import paths. This is because ESLint doesn't know how to deal with those. I am also using the import plugin eslint-plugin-import to keep import order clean and tidy.

Inside your eslint config add the following block to the settings key.

settings: {
  'import/resolver': {
    alias: {
      map: [['@', './src']],
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
    }
  },
},

The alias key here will tell ESLint about the alias key we've setup in our webpack config through craco. I also want to import the extensions listed above without typing out the extension, so that's what that part is for.

If you use the import plugin, don't forget to add that to the extends key:

extends: [
  'plugin:react/recommended', 
  'plugin:import/recommended', 
  'plugin:import/typescript'],

I also use Typescript, see next section on how to add support for aliases.

Last thing which is entirely optional if you don't care about import order, is to tell the import plugin where we want to place the import statements using aliases. You do so by adding a configuration to the import rule:

rules: {
  'import/order': [
    'error',
    {
      pathGroups: [
        {
          pattern: '@/**',
          group: 'parent',
          position: 'before',
        },
      ],
    },
  ],
},

This tells ESLint that all import paths matching the pattern key should be treated the same way as parent imports. Adding that last key position with value 'before' will move them over relative parent imports. You can read about what those keys do in the official docs of eslint-plugin-import

Typescript (Bonus)

Finally if you are using typescript, we also need to set up alias support as the TS compiler will complain about the alias paths not being valid.

For that open your tsconfig.json and add the following:

{
  "compilerOptions": {
    "paths": { "@/*": ["./src/*"] },
  }
}

As mentioned before this maps paths like @/* to my src/ folder.

Conclusion

Completing the steps described above will give you cleaner import paths and reproducible and saner import order. You don't necessarily need the import order, but it's good practice and helps keeping your code more organized.

Master Vue's render function by creating a custom grid component

Chris — Wed, 24 Jul 2019 17:44:59 +0000

For those of you writing Frontend applications with ReactJs, you are probably familiar with render functions to control what is rendered once the component is ready.

In Vue you usually go for its template solution to control what is being rendered. It is really powerful and offers lots of custom directives, which are prefixed by a v-. You can for example conditionally render a DOM node depending on your current state.

While this already offers a great amount of flexibility, you may sometimes reach for Vue's render function to fully control the html being rendered. Imagine having to apply custom class attributes to children being passed to your custom component.

This is exactly what we will be going for in this tutorial.

I will be utilizing Tailwind CSS, as it offers everything we will need for a basic flexbox grid. I found the class names it is using very intuitive and its utility-first approach goes very well with Vue components.

The render function

Using render gives you control over a function that is called createElement, or h for short.

Hint: In this tutorial I will be naming the createElement function h.

A very simple example of a render function can look like the following:

The example above will render an h1 element with the content of "This is a heading". Pretty straightforward.

createElement syntax

So let's have a look of how createElement works and what can be supplied.

As you can see, the function accepts 3 arguments:

The HTML tag name that should be rendered
The data object, which defines how to configure this element. You can find more information about it here.
The children

With this information, let's create a basic grid component.

This component doesn't do much yet. It simply renders a div element with a class of "flex" and no children.

I would like the grid to render anything what I pass in. Vue uses the concept of slots for this. To read the default prop in Vue, you can use this.$slots.default

Great, this will render the children the pass into the grid component.

So how do we make the grid more flexible? We would like to the tell the grid of many columns it consists of. This way we know which class names to apply. So it sounds like we need a prop in our grid component:

I am using prop validation here, to make sure we are not using any arbitrary class name that the default tailwind configuration doesn't support. By default it uses w-1/2 through w-1/6.

Apply the class names to children

As we don't want to modify the children directly, we will add an additional wrapper around each child and apply the tailwind class names to them. This way we don't have to mess with the child elements directly, which might potentially mess them up:

This reads as follows:

Create a div element with class "flex"
Map over the default slot and for each child create a new div with a class depending on the cols prop and put the actual child inside of that.

Example usage

So how do you actually use this component in your application?

To make clear what is rendered, this is the final HTML:

Please note that passing in :cols="3", but only 2 children will mess up the layout. You could easily account for that by checking before you render. Depending on your requirements, you could not render nothing or just spit out a console.error/warning.

Troubleshooting

I noticed this.$slot.default consisting of 3 children instead of the expected 2. This was because there has been a space character somewhere between the components. To account for this I added an additional filter before iterating the children:

Getting Prettier, Eslint and Vscode to work together

Chris — Wed, 24 Jul 2019 13:55:40 +0000

For quite a while I've tried getting Prettier, Eslint and Vscode to work together, but never found a solution that satisfied me. Now, as I'm working on a new React project in my day job, I finally found some time to make it work.

Wait what are Eslint and Prettier?

Eslint is a javascript linter that can help you find syntax or other errors. Eslint can be extended by plugging in pre-defined configs or completely configuring it yourself. Paired with the plugin for vscode, it can show you errors as you type.

Prettier is a code formatter for quite a few languages, including javascript. You can have code being automatically or optionally formatted with it.

Prerequisites

I assume you have basic knowledge about NPM and Vscode, as I won't cover it here. You need to have:

Vscode installed
NodeJS and NPM installed

Install Vscode plugins

First of all install the Vscode plugins ESLint and Prettier - Code formatter and make sure they're enabled.

Install dependencies

npm i -D eslint eslint-config-prettier eslint-plugin-prettier prettier

Setup the config files

Create an .eslintrc file in your project root.

In here we basically tell Eslint to:

Extend from the recommended prettier config
Register the Prettier plugin we installed
Show Prettier errors as errors

{
  "extends": [
    "plugin:prettier/recommended"
  ],

  "plugins": ["prettier"],

  "rules": {
    "prettier/prettier": "error"
  }
}

Note: Your eslint config can include many more rules. I'm keeping it simple and easy to grasp.

Next create a .prettierrc file in your project root.

You can tweak these settings, or add new ones as you like:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

Enable formatOnSave in Vscode

Look for formatOnSave and check the checkbox, or add this line to settings.json:

"editor.formatOnSave": true,

Try it out

If you kept the .prettierrc file like above, Vscode should now:

indent your code with 2 spaces
use single quotes instead of double
add semicolons add the end of each line

If you're having trouble try restarting Vscode.

Hi, I'm Chris ðŸ‘ ”ðŸ’»

Chris — Fri, 19 May 2017 05:24:05 +0000

I have been coding for 5 years.

You can find me on Twitter as @chgldev

I mostly program in these languages: Javascript, Perl, PHP.

I am currently learning more about VueJS .

Nice to meet you.