Rendering React component issues - javascript

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.

Related

How does a chained export work in react without the components in between actually rendering the component?

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

Unable to render simple react component

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;

get React' must be in scope when using JSX error when import component

I am writing this code and import React and Component in app/js file and also try to import app.js to index.js. but I get this error ' 'React' must be in scope when using JSX in index.js
app.js :
import React ,{Component} from 'react';
class App extends Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<h1>Hello Ashkan</h1>
</div>
);
}
}
export default App;
index.js
import ReactDOM from 'react-dom';
import App from './app'
ReactDOM.render(<App/>,document.getElementById('root'));
I got this error
./src/index.js
Line 6:'React' must be in scope when using JSX react/react-in-jsx-scope
You are using JSX in here (<App />):
ReactDOM.render(<App/>,document.getElementById('root'));
Whenever you use JSX React should be in scope.

How to import a File path in React Js?

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

import does not work in subfolder

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';

Categories