I'm trying to build a file template for a react component for my team at work.
I have built the file template according to what Intellij offers, but I get stuck in one thing:
How can I import files into my file template, but without knowing where I am regarding the root folder?
We do use absolute imports so I do use it inside my component file, but it doesn't work in my test file and I have something that calls AppMock that mocks the behavior of our app, and I can't import absolute on it.
Any solutions will be welcomed, thanks
I tried to look for import files relatively in my file template but I couldn't find anything that matches to my problem
Here is an example of what I talk about:
import { render, screen } from '#testing-library/react';
import user from '#testing-library/user-event';
import React from 'react';
import { $NAME } from './${NAME}';
import { noop } from 'lodash'
import { AppMock } from '../../../../../../config/jest/testHelpers/AppMock';
As you can see, the imports are external libraries, except AppMock because we don't work with absolute imports in test files, and because of that I didn't find a way to create a file template for test file.
Related
as you can see below my app.js file , because the website im coding contains numerous components, the importing part of the files is overwhelmingly has many lines , as a newbie to Reactjs i wanna ask if there is a more better and professional way to import all the components using less code. thanks
import Navbar from "./components/navbar/Navbar";
import Home from "./pages/Home";
import Socials from "./pages/Socials";
import ToolsServices from "./pages/ToolsServices";
import Marketplace from "./pages/Marketplace";
import NotFound from "./pages/NotFound";
import Locations from "./pages/Locations";
import CryptoIndex from "./pages/CryptoIndex";
import AllContextProviders from "./store/AllContextProviders";
Its pretty common to have multiple imports in this way. Generally in teams i've worked with we try to keen it in alphabetical order and also separate imports from node-modules to imports from src files.
Actually, I think that is common. I don't know what IDE you're using and WebStorm, the IDE I'm using, allows programmers to fold these "import lines".
So I'm new in ReactJS and wants to learn a couple of small things, and here is one. I wrote an import code on App.js like this:
import React, { Component } from 'react';
import './App.css';
import Axios from 'axios';
import Load from './Loading.js';
I created a custom file for a loading animation and it's imported from import Load from './Loading.js'
the './Loading.js' is the file name and location, and the Load is a const that is exported from the Loading.js file
So my question is, if the Load is a const that I've been exported on the js file I've wrote, then where is the { Component } from 'react' is located? I was trying to find it on the node_modules folder but got no clue. even the react.js file that I thought it was on the node_modules/react folder, I couldn't find it
Thank you before!
Component is declared inside react library, it's located inside the node_modules inside react's folder (maybe it's hard to find because the files are minified and packed) if you are using VsCode, you can click on the component and where the cursor is pointing on it then press F12 it will redirect you to the file where it's exactly declared.
I'm trying to use the select input tool for ReactJS (https://react-select.com/home#getting-started) so I can have a filter/search bar on my website. I copied and pasted the code from the link above into a new file in my src folder. At this point I had no errors, but when I import this filter file into my App.js file and run it, I get the following error:
Module not found: You attempted to import ../data which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Here are the imports for the filter file:
import React, { Component, Fragment } from 'react';
import Select from 'react-select';
import { colourOptions } from '../data';
import { Note } from '../styled-components';
The rest of the code is in the link above (I used the Single search, the first one that comes up). I've looked up several things and can't seem to figure out how to get rid of this error!
[EDIT] I don't even know where this data file is in my project or my computer. I've searched for it and I have a million data files, so I'm unsure of what to bring into my src folder. I'm also having the same problem with the styled-components import. When I search for that on my computer, nothing comes up.
import { colourOptions } from '../data';
The above import seems to be incorrect. You might have want to import the from the data.js which is in the same directory as of your App.js.
import { colourOptions } from './data';
This can help you solve the error. Also make sure the data.js file is in the same directory as of App.js.
hooks/index.js
export { default as useDialog } from './useDialog'
export { default as useCurrencies } from './useCurrencies'
export { default as useUser } from './useUser'
Let's imagine that I have 3 files in hooks folder (useDialog, useCurrencies, useUser) . I want to make the correct imports from this folder. Now I do imports like this :
import {useDialog} from 'hooks'
Is it correct way to import this file , or it is better to import it like import useDialog from 'hooks/useDialog' ? What is better for my bundle size ?
You can try yourself and compare the bundle sizes on production from before and after. I'm gonna explain how to do it if anyone needs it.
First do these steps with the code importing from the index: import {useDialog} from 'hooks'
yarn build
serve -s build
Open the local address (http://localhost:5000/) on incognito mode. Then open Inspect -> Coverage.
At the bottom you can see the size. e.g: 1.2MB of 2.1MB (55%) used so far 964kB unused
Then change your code and import directly from the file: import useDialog from 'hooks/useDialog', and repeat the build and check the size.
Maybe if the files are too small you are not going to notice a difference, but you will if there are any big files or files that imports a big external library.
I tried this comparison on my project and there was one file importing and using moment. I was not even using this component, but the bundle size was increased because I was importing another component from the same index.
Before I was always importing from a folder like 'hooks', but from now on I will always import directly from the file 'hooks/useDialog'.
I'm just sharing my experience! Please, compare the bundles on your own projects!
I have a files structure issue that I am trying to fix when referencing components into other components as imports.
The current files setup I have looks like this...
I am working on the file called security_passphrase.vue and within that file I reference 2 files to import as I need to use them there.
import dropdown from '../components/vue_form/dropdown.vue'
import formbutton from '../components/vue_form/form_button.vue'
The compiler cannot find the modules I am trying to load.
Error: Cannot find module '../../components/vue_form/dropdown.vue' from 'C:\wamp64\www\merchant-backend-new\merchant-backend\resources\assets\js\components\vue_form\concertina_form'
Error: Cannot find module '../../components/vue_form/form_button.vue'
from
'C:\wamp64\www\merchant-backend-new\merchant-backend\resources\assets\js\components\vue_form\concertina_form'
I have tried different ways to make this work but no success. The files I am trying to import are outside of the folder where the file is I am working with.
/concertina_form/security_passphrase.vue /vue_form/form_button.vue
/vue_form/dropdown.vue
Help will be great :)
import dropdown from '../dropdown.vue'
import formbutton from '../form_button.vue'
Should be the correct way to import these files, using ../ goes down one directory which will take you from the concertina_form directory to the vue_form directory.