I have to import multiple files in my App.js . My folder structure is
/src
/components
layout.js
App.js
index.css
index.js
Here i want to import layout.js file from App.js. My code is
import React from 'react';
import Layout from './components/layout';
class App extends React.Component{
render(){
return (
<div>
<p>Hi</p>
</div>
);
}
}
export default App;
In my code, how to import layout.js file ?
Ideally, your layout is a component which you can simply import into your main. One good pratcise when creating new component is to create a separate folder inside components folder and create index.js. By doing so you can import components like below:
/src
/components
/layout
index.js
App.js
index.css
index.js
import React from 'react';
import Layout from './components/layout';
class App extends React.Component{
render(){
return (
<div>
<p>Hi</p>
<Layout/>
</div>
);
}
}
export default App;
It looks like you imported Layout correctly. If it is not working, perhaps you forgot to export default Layout in layout.js?
You need to use webpack's resolve.extensions to import file paths that don't end in .js
Related
I'm new to Next.js. Currently I'm building up a site that used the Jarallax library. This library has to be dynamically imported like so
import Head from "next/head";
import dynamic from "next/dynamic";
const Jarallax = dynamic(() => import("../components/Jarallax"), {
ssr: false,
});
import JarallaxImage from "../components/JarallaxImage";
export default function Index() {
return (
<>
<Head>
<title>Next.js Example</title>
</Head>
<div className="section">
<h1>Next.js Example</h1>
</div>
<Jarallax speed={0.2}>
<JarallaxImage
src="https://jarallax.nkdev.info/images/image1.jpg"
alt=""
/>
</Jarallax>
<Jarallax speed={0.2} videoSrc="https://youtu.be/mru3Q5m4lkY"></Jarallax>
<div className="section"></div>
</>
);
}
This works perfectly when in the index.js file, in the /pages directory. However, I would like to use the Jarallax library in a component (located outside of the /pages directory). For some reason it no longer works. For example, if I make a component (outside of the /pages dir) with the same code as above, then try to dynamically import that component into a page...it doesn't work.
Is there something obvious about dynamic imports in Next.js that I am missing. Do they only work for components in the /pages dir?
Try to create separate index.ts file in components/Jarallax folder (the same folder as your component) and export default dynamic import
index.ts
import dynamic from "next/dynamic";
export default dynamic(() => import("./Jarallax"), { ssr: false });
and then use simple import where you need this component
import Jarallax from "../components/Jarallax";
I understood the point that chaining of components can be done by having functional component in every files and importing the components at every parent level.
eg A imports B imports C
Lets say we have these 3 files App.js, Home.js and HomeContainer.js
where App imports Home imports Homecontainer
App.js
import './App.css';
import HomeContainer from './containers/HomeContainer';
function App() {
return (
<div className="App">
<HomeContainer/>
</div>
);
}
export default App;
HomeContainer.js
import Home from "../components/Home";
function HomeContainer(props) {
return (
<div>
<Home/>
</div>
)
}
export default HomeContainer
Home.js
import React from 'react';
function Home(props) {
return (
<div>
<h1>Home</h1>
</div>
)
}
export default Home;
Up until now everything was okay but lets say instead of creating a function component for HomeContainer I exported Home component directly, I see even then it is working.
HomeContainer.js becomes
import Home from "../components/Home";
export default Home
I want to know how exactly this is working, because APP.js is rendering the HomeContainer component but HomeContainer component is not rendering anything like <Home/> but still Home component gets rendered in the APP.js.
I expected App to render first functional component HomeContainer which in turn renders Home component. But even when we don't create a functional component and directly export it, its getting rendered in App.js as Home component when our HomeComponent is not even rendering it using the command <Home/>
How exactly export default in HomeComponent.js is rendering the component Home in parent App.js
When using export default, it doesn't matter what name you give to the imported module.
You are just pointing an identifier to whatever the default export is at the specified path.
Default export
In this example, it does not need to be Home, it can be SomeOtherIdentifier and it will still work.
App.js
import './App.css';
import SomeOtherIdentifier from './containers/HomeContainer';
function App() {
return (
<div className="App">
<SomeOtherIdentifier/>
</div>
);
}
export default App;
HomeContainer.js
import Home from "../components/Home";
export default Home
Named export
On the other hand, if you were to use a named export, you would need to import the module with the same name.
App.js
import './App.css';
import { HomeContainer } from './containers/HomeContainer';
function App() {
return (
<div className="App">
<HomeContainer/>
</div>
);
}
export default App;
HomeContainer.js
import Home from "../components/Home";
export { HomeContainer }
Or you could use the as keyword to alias the imported module to another name.
App.js
import './App.css';
import { HomeContainer as SomeOtherIdentifier } from './containers/HomeContainer';
function App() {
return (
<div className="App">
<SomeOtherIdentifier/>
</div>
);
}
export default App;
HomeContainer.js
import Home from "../components/Home";
export { HomeContainer }
The HomeComponent.js is rendering the Home because you told it to do so! You're importing and exporting Home in it.
Think of the second HomeComponent.js as a middleman. It imports and exports another component (module). It's a common thing in JS projects.
See these for complete details:
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
https://javascript.info/import-export
I am new to React. I have create new react app using following command.
create-react-app app-name --scripts-version custom-react-scripts-version
Inside src folder of that app i have created 2 new folders say Grid and Title and created files Grid.js and Title.js in respected folder.
Grid.js
import React from 'React';
export default class Grid extends React.Component {
render() {
return (
<div>
<h1>Grid</h1>
</div>
);
}
}
Title.js
import React from 'React';
const Title = () => {
return (
<div>
<h1>Title</h1>
</div>
);
}
export default Title;
Now, i try to import both into App.js file it won't.
import Title from './Title/Title';
import Grid from './Grid/Grid';
It shows following error.
Failed to compile.
./src/Grid/Grid.js
Module not found: D:\ReactAppCSS\node_modules\React\index.js does not match the corresponding path on disk react.
Same for Title.js.
Any help would greatly appreciated.
import React from 'react'
react is the package name!
I'm having trouble rendering. Here is how I set up my files so far. First here is the app.js file:
import React from 'react';
import MainPage from './MainPage';
export class App extends React.Component {
render() {
return (
<div>
<MainPage />
</div>
)
}
}
Here is the second associated file called index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
ReactDOM.render(<App />, document.getElementById('app'));
Lastly in the MainPage component I'm importing this:
import App from "./app";
Is there a reason why this doesn't work with the file structure set as is? I know I can just put the ReacDOM.render in the app.js file as an alternative, but due to unit testing purposes, the file structure has to be similar to this.
You're trying to import the default export of the file app.js with this :
import App from "./app";
But you're using a simple export in you app.js file :
export class App extends React.Component {
So to import this class the syntax is (like in your index.js) :
import { App } from "./App";
Btw in your case you're importing a parent component in the child, you shouldn't do that.
You have already imported App.js and rendering it via ReactDOM. You don't need to import it in MainPage as App is the parent of your MainPage. Currently your import statement in MainPage is wrong. Even if it was correct, you would get into cyclic imports. App -> MainApp -> App -> MainPage and so on.
MainPage should render your usual content. Change MainPage to something:
import React from 'react';
export default class MainPage extends React.Component {
render() {
return (
<div>
<h1>This is Main Page</h1>
</div>
)
}
}
Note default after the export.
When I use
import React from 'react';
import ReactDOM from 'react-dom';
require('./styles.css');
import App from './components/App';
import Test from './components/Test';
ReactDOM.render(
<App />,
document.getElementById('root')
);
webpack found the Test module however, in app component:
import React from 'react';
import Test from './components/Test';
export class App extends React.Component {
render() {
return (
<div className='container'>
<Test />
</div>
)
}
}
import Test does not work it says:
ERROR in ./src/components/App.js
Module not found: Error: Can't resolve './components/Test'
it works when I use require though
var Test = require('./Test');
You are importing from a wrong directory. From looking at your first code, you have both App and Test in the same components directory. The error comes because your import looks for a components folder inside the components folder. So if you want it to be imported into App, you should be specifying the relative path from your current folder. i.e) ./
Try this in your App class or App.js file
import Test from './Test';