Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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';
like image 850
american-ninja-warrior Avatar asked Oct 16 '18 19:10

american-ninja-warrior


People also ask

What is the meaning of symbol in React?

Symbols are unique data types and no two Symbols are never equal. This feature opens up one of many possibilities of using them in React applications to run code in child components by passing them as props.

What is the use of && in React?

Inline If with Logical && Operator It works because in JavaScript, true && expression always evaluates to expression , and false && expression always evaluates to false . Therefore, if the condition is true , the element right after && will appear in the output. If it is false , React will ignore and skip it.

What does this refers to in React?

"this" is the keyword, which holds reference to something, in this case, this is used within a class naming Foo, so when we use the keyword "this" inside the class it refers to class itself.

What is import asterisk in React?

Import an entire module's contents This inserts myModule into the current scope, containing all the exports from the module in the file located in /modules/my-module.


1 Answers

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.

like image 68
Jonathan Irwin Avatar answered Sep 28 '22 03:09

Jonathan Irwin