I create an icons.js file that there are all icons imported from the "react icons package". so How can export this file so that all other components can use it?
Here is my icons.js file
import {BiStore} from 'react-icons/bi';
import {RiBarChartBoxLine} from 'react-icons/ri';
import {RiCalendarTodoLine} from 'react-icons/ri';
import {RiPaintBrushLine} from 'react-icons/ri';
import {RiDatabase2Line} from 'react-icons/ri';
...
LIST GOES ON
...
I try to use the icons.js file in all other components but I don't know how to import & export this file.
Related
Following this beginner React tutorial
https://www.youtube.com/watch?v=Ke90Tje7VS0&ab_channel=ProgrammingwithMosh
Have installed React and Babel and have React working on http://localhost:3000/ (default screen)
But when I try to change the default render to a Counter it does not render, my code seem to be identical to the tutorial, any help appreciated.
No errors showing on debug console.
Have two files index.js and counter.jsx
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import "./index.css";
import App from "./App"
import registerServiceWorker from "./registerServiceWorker";
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './components/counter';
ReactDom.render(<Counter />, document.getElementById("root"));
registerServiceWorker();
counter.jsx
import React, { Component } from 'react';
class Counter extends Component {
render() {
return <h1>Hello World</h1>;
}
}
export default Counter;
I am trying to aggregate all imports at one location and then export it for other components to use
I have a src/car folder with car.js and index.js inside it
code inside index.js is as below
import React from 'react';
import ReactDOM from 'react-dom';
export {React, ReactDOM}
code inside car.js is as below
import * as Wfmimport from './index';
export class Car extends Wfmimport.React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
my src/index.js has following code
import React from 'react';
import ReactDOM from 'react-dom';
import * as name from './car/car'
import './index.css';
ReactDOM.render(<name.Car />, document.getElementById('root'));
when I run the code, I get error "'React' must be in scope when using JSX react/react-in-jsx-scope when trying to do it from a index file"
can anyone help me what is that wrong which I am doing?
My goal is to reduce import statements and hence I am trying the above way
In my jest tests, I need to import everything that the tested component needs to work (which I do in my application's main.js). Since I have multiple test files, I need to "re-import" it in each file. Is there a way to import it all in a single file, and then import only this file?
import Component from '#/views/input-something'
import {mount, shallowMount} from '#vue/test-utils'
import {FontAwesomeIcon} from '#fortawesome/vue-fontawesome'
import {library} from '#fortawesome/fontawesome-svg-core'
import {fas} from '#fortawesome/free-solid-svg-icons'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'bootstrap/dist/css/bootstrap.css'
import BootstrapVue from 'bootstrap-vue'
import 'vue-select/dist/vue-select.css'
import Vuelidate from 'vuelidate'
import Vue from 'vue'
import './helpers/multi-ref-test-runner'
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.use(BootstrapVue)
Vue.use(Vuelidate)
library.add(fas)
// I wish to write everything above in a single file
window.confirm = function() { return false; }
describe('input-something', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(Component, {...});
});
it('it renders', () => {});
});
I expect to import everything I need in a file, like helper.js
Then in my test file I'd just do something like
import 'test-helpers/helper';
describe('input-something', () => {...})
EDIT 1
After a while I was able to import all I needed this way
/* imports.js */
import Component from '#/components/something'
import { mount } from '#vue/test-utils'
export { Component, mount }
/* my-test.js */
import { Component, mount } from './imports.js'
And adding this line to my .babelrc (to be able to work with jest)
"plugins": ["#babel/plugin-syntax-dynamic-import"]
And then I could use all the properties I imported.
Although it's working this way, I wanted to use these properties (Component, mount...) without having to implicitly import each one.
Is there a way to do it?
create a separate js file
import components or plugins or anything you want there
import that file in main.js file
For example:
this is my separate reuseableComponets.js
// I include components and plugins here
...
import Component from '#/views/input-something'
import {mount, shallowMount} from '#vue/test-utils'
import {FontAwesomeIcon} from '#fortawesome/vue-fontawesome'
...
Now in app.js
import('path to reuseableComponets.js')
That's it.
Use setupFilesAfterEnv in your jest.config.js to point to a script that sets up your tests. This file would be automatically invoked before your tests, so you wouldn't have to import it.
For example, you could move the setup code you had mentioned into a file named my-setup.js, and then configure Jest as follows:
// jest.config.js
module.exports = {
setupFilesAfterEnv: ['./my-setup.js'],
}
Instead of writing the following code in every reactnative's ".js" file, is it possible to write it in a single file and the export it so that i can use it in other js files just by importing this one file (containing all the component that I need to use)
import React from 'react';
import {
StyleSheet,
Text,
Image,
View
} from 'react-native';
Now instead of writing the above code in page1.js, page2.js, page3.js, how do i write it in a single file called "comp.js" and export it from there so that i only have to import comp.js in the page1.js, page2.js and page3.js file
It is possible but I recommend using index.js for that folder instead of that comp.js
In a folder you can create index.js and import all related js in that folder so you can import very easy
For example: I have my folder called Components
Create index.js in the folder Components
Import and export files
import comp1 from './comp1'
import comp2 from './comp2'
import comp3 from './comp3'
export { comp1, comp2, comp3 }
Import folder instead of each file and select only needed files import { comp1, comp2 } from '../Components'
I've started using es6 for a project, and quickly discovered that using import as such:
import {Account} from 'controllers/account'
import {Activity} from 'controllers/activity'
import {BillingEdit} from 'controllers/billing-edit'
import {BillingSummary} from 'controllers/billing-summary'
import {Billing} from 'controllers/billing'
import {BillingPlan} from 'controllers/billing-plan'
import {Components} from 'controllers/components'
import {Dashboard} from 'controllers/dashboard'
import {Devices} from 'controllers/devices'
import {Feedback} from 'controllers/feedback'
import {Frame} from 'controllers/frame'
import {Help} from 'controllers/help'
import {Login} from 'controllers/login'
import {Membership} from 'controllers/membership'
import {Navigation} from 'controllers/navigation'
import {Notifications} from 'controllers/notifications'
import {Password} from 'controllers/password'
import {Perks} from 'controllers/perks'
import {PlanIssues} from 'controllers/plan-issues'
import {PlanClaims} from 'controllers/plan.claims'
import {PlanContract} from 'controllers/plan.contract'
import {PlanDetails} from 'controllers/plan.details'
import {PlanDevices} from 'controllers/plan.devices'
import {Plan} from 'controllers/plan'
import {PlanTerms} from 'controllers/plan.terms'
import {PlanItems} from 'controllers/plan.items'
import {Plans} from 'controllers/plans'
import {Profile} from 'controllers/profile'
Is leading to redundancy, and will become difficult to maintain.
I can of course generate this dynamically by making a task that recurses through the directory, but I'm wondering if es6 has a solution to this problem
If you're happy including all controllers, then you could add a index.js in your controllers folder. In it you would do what you did here and include everything, then you would re-export it all as members of one object.
controllers/index.js
import {Account} from './account'
import {Activity} from './activity'
import {BillingEdit} from './billing-edit'
import {BillingSummary} from './billing-summary'
const controllers = {
Account,
Activity,
BillingEdit,
BillingSummary
}
export default controllers
app.js
import Controllers from './controllers'
// now you can access controllers like this
console.log(Controllers.Account)
console.log(Controllers.BillingSummary)
or you could import only the ones you need like so
app_alt.js
import { Account, Activity } from './controllers'
console.log(Account)
console.log(Activity)
or you can mix and match the approaches
app_mix.js
import Controllers, { Account, Activity } from './controllers'
console.log(Controllers.Account)
console.log(Account)
console.log(Controllers.BillingSummary)