How to import JavaScript file in vite? - reactjs

I tried to import the notifications.js file in App.jsx, but it didn't work.I am using React and Vite.
I tried using import "./notifications" in App.jsx and in the App.jsx file I used tag name notifications. I expected to view the arrays in the notifications.js.

Usually you want to import something specific (like a function) from a JS file. First in your notifications.js file, you have to export such a function. Then in your App.jsx you import that function with the import statement like this:
import { MyFunction } from "./notifications"
or
import MyFunction from "./notifications" if the function is the default export.
You can read more about importing and exporting here

Related

What happens if two components import the same CSS file in React?

Let's say I have two React components:
import { React } from "react";
import "./styles.css";
function ComponentA() {
...
}
export default ComponentA;
import { React } from "react";
import "./styles.css";
function ComponentB() {
...
}
export default ComponentB;
Both of these components are importing the same CSS file styles.css. Now let's say that in my app, I'm importing both of these components, so App.js looks something like this:
import { ComponentA } from "./ComponentA";
import { ComponentB } from "./ComponentB";
function App() {
return (
<div className="App">
<ComponentA />
<ComponentB />
</div>
);
}
export default App;
What exactly happens here? Does my app import the same CSS file twice? And if so, do I just make the import on the App.js file instead?
It's as if it was only imported once.
When a module bundler like Webpack sees an import, it puts the following path in the list of files to process, if the path doesn't exist already. The file is only processed once, no matter how many times it's imported.
Note that with React apps, you will often see
import React from "react";
in tens or hundreds of files - React isn't created anew hundreds of times. Rather, the module is processed once, and then files that import it are given access to what React has exported.
Importing CSS files works the same way, in that they're only processed once no matter how many times an import exists for them (though they don't really have exports, just side-effects).
If both ComponentA and ComponentB depend on styles.css, feel free to keep importing styles.css in both - it doesn't hurt, and will make things easier to manage when you can see at a glance that both components directly depend on that CSS.

Importing file in reactjs

My project looks something like this
/src
/components
/Homepage
Homepage.js.
App.js
index.css
index.js
I want to import Homepage.js to App.js. I did
import About from './Components/./Homepage/Homepage'; but it doesn't work. Any ideas on how I should import it correctly
So if you would like to import Homepage.js to App.js, correct your import statement as below
import About from './components/Homepage/Homepage'
There is a small typo in your import statement which is failing. :)
I would suggest using VSCode, it helps a lot.
Make sure you have export default About in your Homepage.js, then you can use import About from './components/Homepage/Homepage'; in App.js
If you just use export About, then you can use import { About } from './components/Homepage/Homepage'; in App.js.
Make sure you exported the object or function.
Use the correct import path

Importing React Components and Images with require()

In React, what are the differences between loading an image vs. loading a component using require()?
When I load an image using require("image path"), it works. When I load a React component using require("component") I get an error.
For images in React, You need to require
<img src={require('../assests/logo.png')} />
But it is totally different case with components. You import React components bases on how you exported.
And use ES6 to import and export in reactjs
And there are two types of exports
Named Export
Named exports are useful to export several values at ones. During the import, it is important to use the same name.
// how to export
export function myfunc() {}
// how to import
import { myfunc } from './myfile';
Default export.
Default exports are useful to export only a single value. During the import, able to omit the curly bares and use any name.
// how to export
default export function() {}
// how to import
import anynameyouwant from './myfile';

how to import component in index.js in react.js

I have created component folder in src folder and tried to write simple greeting program for that I have created 3 files:
GreetUser.jsx
index.jsx
index.html
while compiling it is showing that could not find required index.js file.
I have written 3 files in Component folder and have imported GreetingUser module in the index.jsx file and while compiling it is showing that could not find required index.js file.
1.GreetingUser.jsx
import React , {component} from 'react';
class GreetUser extends component
{
render()
{
return <h1>Greetings from suraj!!!!</h1>;
}
}
export default GreetUser;
2.index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import * as serviceWorker from './serviceWorker';
import GreetUser from './Component/GreetUser.jsx';
ReactDOM.render(<GreetUser/>,document.getElementById('aaa'));
serviceWorker.unregister();
Could not find a required file.
Name: index.js
Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function.
index file must with .js extension and not jsx is not react component.
index.js file in a folder lets you perform an import from the folder implicitly without specifying the index.js in the import statement – just like how web servers will serve up the index.html in a folder without you needing to explicitly put the index.html in the URL.
You can modify webpack configuration if you need it.
You can look at additional answers: Renaming index.js to index.jsx in react app and Why does create-react-app creates both App.js and index.js?

Can't resolve './lib' in '/Users/johnnynolan/Repos/simple-component-library/src'

I'm trying to build a simple component library using React. The file structure is as follows:
-src
--index.js
--lib
---TextInput.css
---TextInput.js
In my index.js file I'm referencing the lib folder like this:
import React from 'react';
import { render } from "react-dom";
import { TextInput } from "./lib";
However, I get the following error:
Can't resolve './lib' in '/Users/johnnynolan/Repos/simple-component-library/src'
Does anyone know why this might be?
Duh...okay, I realised what I didn't do! I didn't have an index.js file within my lib folder so I could export the component, like so:
import TextInput from "./TextInput";
export { TextInput };
So the new file structure will look like this:
-src
--index.js
--lib
---index.js
---TextInput.css
---TextInput.js

Resources