I’m am new to React and need to understand a concept.
In my text editor there is a source file. Within the source folder I have created component folder as recommended by other sites. This comp folder holds my modules in jsx.
My question is, How do i import my app.js file to component folder modules. App.js is set as export default.
I believe i should use: import App from 'app'; and for other modules import ... from './src/comp/file.jsx'.
is any of this correct.
Your app.js doesn't export app.js per se, it exports whatever you export, probably a class or a function called App.
You probably don't want to import that (except maybe the root index.js did), but you might import another import another component into App, with something like:
import Header from './components/Header'
That's assuming that you have a file called index.js in the subfolder components/Header and that file is exporting the Header class/function.
Related
You can import file using index.js naming and pointing to folder where is that file.
- src
App.js
- Component
index.js
And when importing it will fallback to index.js
import Component from './Component'
Can I write the same but remaining file named as folder?
Both React and Solid follows JavaScript's import and export semantics and there are no extra rules or workarounds.
In JavaScript, pointing to a file or folder has no effect, you have to import and export items explicitly and there is no built-in fallback mechanism.
You can learn more about ES6 module rules at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules.
I have a components library and want to make my imports easier. So I aggregate the components using the following approach.
I use an index.js file in the root of my components folder and using
export {default as XComponent} from './x/y/z/XComponent'
export {default as YComponent} from './x/b/c/d/YComponent'
So now I can do and not have a large path to write
import {X} from '../components
Question . Will such an approach result in the situation that when I use the component library in another React app, if import one component, I actually import all of the components ? So the bundle size is large ?
I thought this wouldn't be the case
Thanks for any comments
Due to some limitations of using jQuery libraries, I need to import bootstrap 4 vanilla style into a couple of React projects. But I would like to create a single package that holds all the assets (such as importing BS4) and having the other React projects importing from this.
assets/package.json
"dependencies": {
"bootstrap": "^4.5.3"
}
index.js
import "bootstrap/dist/js/bootstrap.bundle"; //Does Work; Syntax is called importing with side effects, I believe
//import "bootstrap/dist/css/bootstrap.min.css"; //Unneeded, thanks to j1mbl3s pointing out we don't usually export CSS. I'm importing the CSS directly from the node_modules instead of the bundle
export * from "bootstrap/dist/js/bootstrap.bundle"; //Does NOT work
//export * from "bootstrap/dist/css/bootstrap.min.css"; //Unneeded, thanks to j1mbl3s pointing out we don't usually export CSS. I'm importing the CSS directly from the node_modules instead of the bundle
myReactApp1/package.json
"dependencies": {
"#bit/X.Y.Z.assets": "file./components/assets"
}
myReactApp1/App.js
import "#bit/X.Y.Z.assets" //Does NOT work
//import "bootstrap/dist/js/bootstrap.bundle"; //Does work; so essentially I want to replicate their export into my assets so that the version control is one central place
myReactApp1/App.scss
import "~#bit/X.Y.Z.assets/node_modules/bootstrap/scss/bootstrap" //Does work
How do I export a vanilla JS file in React, so that I can import it again?
What I'm trying to achieve is the following diagram, and respectively a non-compiling sandbox.
I'm looking to optimize my React folder structure.
It looks like this:
- components
- Header
- Header.tsx
- Header.styles.ts
- index.ts
The index.ts is just there to allow me to import the Header component with import { Header} from "components/Header. This works because I'm using babel-plugin-module-resolver. Now, since my folder name is always the same as the main file name inside my components folder, I would like to be able to import the header with import { Header } from "components" and have a Babel plugin resolve this to import { Header } from "components/Header/Header". This would mean I could remove the index.ts
Which Babel plugin can do this?
I'm already using babel-plugin-module-resolver to resolve the components folder. My problem is that i'm also using TypeScript so how do I tell the TypeScript compiler that this module is being resolved like this?
Please help me out. Thanks!
You should be able to just have your index.ts in your components take care of that normally. I don't think that this has anything to do with babel-plugin-module-resolver, it's just how index.ts/js files work in general. https://alligator.io/react/index-js-public-interfaces/
You should be able to get what you are looking for by doing the following in your index.ts file in your component directory:
You import your Header component and then directly export it.
import {Header} from './Header/Header'
export Header
Or you might be able to do a symmetrical export depending on your setup:
export {Header} from './Header/Header'
Currently I use sass, images, and jsx files and I would like to know if there is a standard.
For example, currently I'm doing this:
"/src
/components
App.jsx
App.scss
/Header
Header.jsx
Header.scss
/utils
index.js"
In my App.jsx (Example importations)
import Header from './Header.jsx
import appSass from './App.scss'
There are many ways good practices in organizing your files, I am currently going through a coding bootcamp and they showed us this process of organization:
/src
/components
/app
index.js
app.scss
/header
index.js
index.scss
/lib
util.js
/style
main.scss
_reset.scss
_vars.scss
_layout.scss
_base.scss
main.js
In your main.js you can import your app component with:
import App from './component/app'
and in your app.js (and other components) you will can import using:
import Header from './header'
I found this a nice way to keep things organize and makes your imports more uniformed where you aren't trying to figure out which directory level you are storing each component.
It also is a good way to organize sass files, inside the style directory you have all your sass files that has to do with the styling of your overall app. main.scss imports the other files and dictates which scss you want applied first (usually a reset/normalize). Each component directory will also contain a sass file that will dictate the styling for that single component.