We Keep Coding

React - print content of imported component function

Trying to split some HTML chunks by dividing the HTML in smaller pieces, located in the components folder. (I know, HTML is not really html, it is JSX).
The outcome I am trying to achieve is to have the imported component [Navigation] to render its content.
I do understand that there might be tools for the code splitting.
Question: Why doesnt the code render the div navigation content?
Navigation.js
import React from 'react';
export default function Navigation() {
return (
<div className="navigation">
<ul>
<li>
Google
</li>
</ul>
</div>
);
}
App.js
import React from 'react';
import './App.css';
import Navigation from './components/Navigation';
class App extends React.Component {
render() {
Navigation();
return (
<div>
Hello from component - Class!
</div>
);
}
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

Your component is not rendering because u call de function outside the return statement.
For a component render, you need to return the component inside the
render function;
Example:
render () {
return <Component/>
}
When u call this:
render() {
Navigation(); // see, the navigation is outside the return statemente
return (
<div>
<p>Hello from component - Class!</P>
</div>
)
}
try this:
import React from 'react';
import './App.css';
import Navigation from './components/Navigation';
class App extends React.Component {
render() {
return (
<div>
<Navigation/>
<p>Hello from component - Class!</P>
</div>
)
}
}
export default App;

How to solve import error after npm start

Just started using react and i am following a tutorial. I have the same code as him but i am getting the following error.
./src/index.js
Attempted import error: './components/App' does not contain a default export (imported as 'App')###
Here are my index and component file.
my index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(
<App/ >,document.getElementById('root')
)
my App.js
import React, {Component} from 'react';
class App extends Component {
render(){
return(
<div>Ageteller Component</div>
)
}
}

You need to export your App component.
Under the component put export default App
It should look like:
import React, {Component} from 'react';
class App extends Component {
render(){
return(
<div>Ageteller Component</div>
)
}
}
export default App

export the App Component
Try following
import React, {Component} from 'react';
export default class App extends Component {
render(){
return(
<div>Ageteller Component</div>
)
}
}

Error while exporting Component in React.js

I was exporting a React.js Component (Comp.jsx) to App.js (the main file) and
got this error.
Error: ./src/App.js Attempted import error: './Components/Comp.jsx' does not contain a default export (imported as 'Comp').
Comp.jsx
import React from 'react'
import ReactDOM from 'react-dom'
function MyInfo() {
return (
<div>
<h1>My Name</h1>
<p>This is a Para</p>
</div>
)
}
ReactDOM.render(<MyInfo/>,document.getElementById('root'))
App.js
import React from 'react';
import Comp from './Components/Comp.jsx';
function App() {
return (
<Comp>Hello World</Comp>
);
}
export default App;

You must also export the MyInfo Component.
The MyInfo Component/function is only declared and not exported.
Put
export default MyInfo
at the bottom of the Comp.jsx file
or
export default function MyInfo()...
where the function is declared
. This way the MyInfo component can be imported and used in other files.
Also the ReactDOM.render must be in the App.jsx file. See https://codesandbox.io/s/reverent-fermi-44r26

Instead of:
ReactDOM.render(<MyInfo/>,document.getElementById('root'))
Move that to App.js file and render App.
App.js
ReactDOM.render(<App/>,document.getElementById('root'))
OR
Add export default in Comp.jsx.
Comp.jsx
import React from 'react'
import ReactDOM from 'react-dom'
// \/ here
export default function MyInfo() {
return (
<div>
<h1>My Name</h1>
<p>This is a Para</p>
</div>
)
}
ReactDOM.render(<MyInfo/>,document.getElementById('root'))

Problem with exporting/importing React component

I'm trying to create a React component for a navigation bar.
This component I'd like to import from a separate file into my App.js.
Currently, the component should just return a simple 'Hello world' paragraph, but I have trouble getting this to work.
I have written the following code into a file located at src/components/navbar.js:
import React from 'react';
export default class navBar extends React.Component {
render() {
return (
<p>Hello world.</p>
)
}
}
Now I'd like to import this component from my src/App.js, which looks like this:
import React, { Component } from 'react';
import './App.css';
import navBar from './components/navbar.js'
class App extends Component {
render() {
return (
<navBar/>
);
}
}
export default App;
If I compile and open the site, nothing's there, which confuses me.
I'd be very thankful for any help!
EDIT:
It's been suggested that the problem is that <App /> is not being rendered anywhere. I don't believe that's the case, since there's another file being created by default (index.js), which looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
I have also tried putting the paragraph (and the entire navbar) directly into src/App.js.
After compiling I could see the expected results in the browser, so the problem should lie with the exporting/importing.

In JSX, lower case tags are considered to be simple HTML/SVG elements. You can use lower case only if you use accessors (so with a dot like bla.blabla).
You can read about it here for example.
So in your case you must change the class name navBar to NavBar and then in the render method:
render() {
return (
<NavBar/>
);
}

Here is a full working example:
** Note: NavBar.js shoud start with a Capital letter.
App.js
import React from "react";
import ReactDOM from "react-dom";
import NavBar from "./components/NavBar";
function App() {
return (
<div className="App">
<NavBar />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
NavBar.js
import React from "react";
export default class NavBar extends React.Component {
render() {
return (
<div>
<p>Hello world.</p>
</div>
);
}
}

Error import component

I have this error when i import my component
Module not found: Can't resolve '../src/components/Menu' in '/Users/userName/Documents/folder/repository/Project/src/pages/Home'
src
components
Menu
Menu.css
Menu.js
pages
Home.css
Home.js
Menu.js
import React, { Component } from 'react';
import './Menu.css';
class Menu extends Component {
render() {
return (
<div className="menu">
<h1>Je suis un Menu</h1>
</div>
);
}
}
export default Menu;
Home.js
import React, { Component } from 'react';
import './Home.css';
import Menu from './../components/Menu';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
msg: 'Hello from the state of Home'
}
}
render() {
return (
<div className="home">
<h1 className="text">Welcome to the Home Page</h1>
<p>{this.state.msg}</p>
<Menu/>
</div>
);
}
}
export default Home;

You need to import from one level deeper:
import Menu from './../components/Menu/Menu';
You have a folder called Menu and the file you want is inside called Menu.js.

That's because '../src/components/Menu' doesn't point to your file.
Either use the path
'../src/components/Menu/Menu'
Or, if you want to use your original path, rename your Menu.js file to index.js.
In my experience the latter tends to be more popular due to it's inclusion in the hugely useful Airbnb JSX style guide.