CODEWITHSUNDEEP
reactjstypescript
american-ninja-warrior
american-ninja-warrior

Reputation: 8215

What does the @ symbol mean in a react import statement

I'm working on a ruby on rails application with a react js frontend.

What does the @ signify here

import ProductCard from '@components/search/ProductCard';

Upvotes: 43

Views: 29114

Answers (1)

Jonathan Irwin
Jonathan Irwin

Reputation: 5767

Path mappings are aliases that point to specific folders

If you are using Typescript (which the tag suggests you are) it's possible to setup "path mapping" in your tsconfig.json

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

This will create an alias for "@components" that points to a specific folder.

Read more about it here: https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

Other possibilities

It could be a scoped package like @types/xxx but this is unlikely in the given case.

Upvotes: 60

Related Questions