Develop Reference

Module not found - importing React navbar class...but the file exists

It cannot find my navbar.js file for some reason, but its there!? Any help is appreciated
Just keeps showing -
Compiled with problems:X
ERROR in ./src/App.js 5:0-41
Module not found: Error: Can't resolve './components/navbar' in 'C:\Users\ekrus\OneDrive\Desktop\honeycomb\honeycomb\client\src'
The navbar.js file:
import React from 'React';
import ReactDOM from 'react-dom'
export default class Navbar extends React.Component {
render() {
return (
<div>
<ul className="nav">
<li className="nav-item slam-left">Brand</li>
<li className="nav-item">Home</li>
<li className="nav-item">About</li>
<li className="nav-item"><a className="contact" href="#">Contact</a></li>
</ul>
</div>
);
}
}
My App.js file:
import './App.css';
import Navbar from './components/navbar';
function App() {
return (
<Navbar />
);
}
export default App;

In your navbar.js you are exporting your component as a named export, and in your App.js you are trying to do a default import, which doesn't exist.
change your navbar component to start with export default class Navbar...
You can read more about named and default exports here
and here
Edit: After looking at the directory structure again, seems like you have the path of the navbar file off. The Navbar is in components/navbar/navbar.
so you should change your import statement to
import Navbar from "./componenets/navbar/navbar";
Edit 2:
I also noticed that in App.js you imported react from React, and it needs to be react, with a lowercase R.
change it to:
import React from 'react';

Returning Code from a TypeScript Module in React

I am trying to create a simple page which two main parts: Menu and Guide. In my App,tsx, I have:
import React from 'react';
import Guide from './Guide/Guide';
import './App.css';
function App() {
return (
<Guide />
);
}
export default App;
This is fine.
But, in the ./Guide/Guide.tsx, I have:
import React, { Component } from "react";
import Menu from "./Menu/Menu";
export default class Guide extends Component {
constructor(props: {}) {
super(props);
}
return (
<Menu />
);
}
Menu.tsx:
import React, { Component } from "react";
export default class Menu extends Component {
return (
<h1>Test</h1>
);
};
However I'm getting the error 'return', which lacks return-type annotation, implicitly has an 'any' return type..
What's going on here?
You can probably tell I'm very new to React and TypeScript!

In class component (such as your Guide and Menu components), you render some HTML code inside the render function. Insinde functional components (such as your App component), you render some HTML code inside the return function. Here you are mixing those 2 different syntax, that is why you are getting this error.
In order to fix this, simply replace your return function in the Menu and Guide components by the render function

Getting 'React' must be in scope when using JSX

I am new to react and I tried the following code
person.js
const element = <h1>Hello world</h1>;
export default element;
App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
function Hello() {
return Person.element;
}
class App extends Component {
render() {
return (
<div className="App">
<Hello></Hello>
</div>
);
}
}
export default App;
But getting the below errors
work/my-app/src/person/person.js
3:17 error 'React' must be in scope when using JSX react/react-in-jsx-scope
When I changed to a simple hello word as below, then it works fine.
person.js
const element = 'hello world';
export default element;
I tried with different ways by checking different forum
importing the ReactDom
in person.js changed to module.exports=element

The use of HTML within JS code is known as JSX. The <h1>...</h1> is JSX. You need to import React before you use JSX. Simply shift the import statements before any use of JSX.
person.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
const element = <h1>Hello world</h1>;
export default element;

You need to import React in every file that exports a component (App in this case).

The latest React 17 Version: No need to include React in the scope
If you are struggling with ESlint or run-time CRA warnings, follow these temporary steps to fix until CRA v4 is released: https://github.com/facebook/create-react-app/issues/9850

How can I use a variable in React JS render method?

I am learning React JS.
Now, I am using a variable in App.js file and want to use this variable in render() method in index.js file but it's showing me this error:
./src/index.js Line 7: 'bioData' is not defined no-undef
Search for the keywords to learn more about each error.
in App.js file I have this code:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import * as serviceWorker from './serviceWorker';
function Person (props) {
return (
<div className="p1">
<h1>{props.name}</h1>
<h3>{props.skill}</h3>
</div>
);
}
var bioData = (
<div>
<Person name="alex" skill="designer" />
<Person name="shibbir" skill="web developer" />
</div>
);
export default Person;
and In index.js file I have following code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Person from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(bioData, document.querySelector("root"));
serviceWorker.unregister();
can you tell me why it's showing that erro?

The problem is that you haven't imported bioData into index.js (or defined it locally). In modules, top-level declarations are not globals, modules have their own scope (thankfully). So var bioData in App.js doesn't define a global index.js sees.
If you want to use biodata in index.js, export it from App.js:
export var bioData = {/*...*/};
...and import it into index.js, perhaps on the line where you're importing Person:
import Person, { bioData } from './App';
Note that that's a named export/import. You asked in a comment whether you should use export default bioData; in App.js, but you can't, you already have a default export in App.js (Person). You can have only one default export (or none), and then as many named exports as you like (or none).
Side note: var is obsolete. Use let or const.
Side note 2, re this code:
ReactDOM.render(bioData, document.querySelector("root"));
Assuming you're trying to render to an id="root" element, it should be either document.getElementById("root") (more idiomatic) or document.querySelector("#root"), but not document.querySelector("root") (which looks for a <root>...</root> element).

Why does my React Component Export not work?

I was just getting into react and trying it out for myself. After hours of configuring webpack just to get a hello world on my screen I thought I could get going now but after trying to render another component from a file the next problem.
My main file is app.js, which renders everything:
import React from 'react';
import ReactDOM from 'react-dom';
import {Hello} from './hello';
ReactDOM.render(
<Hello/>,
document.getElementById('app')
);
The Hello component comes from my hello.js in the same folder:
import React from 'react';
class Hello extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
export default Hello;
It was rendering fine when I was doing everything just in app.js without the import/export. It also compiles fine. But there are a lot of errors now in the console. So what am I missing?
Thanks
Gerd

Because your export is default you don't need braces around your import component name:
import Hello from './hello';
Here's a verbose technical article from Axel Rauschmayer on the final ES6 modules syntax that you might find useful.
And here's a slightly less techy post about the same topic.

when you import the default class you use
import ClassName from 'something';
and when you import other classes you use
import {ClassName} from 'something';
an example:
in hello.js file
import React from 'react';
class Hello extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
class Other extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
export default Hello;
export Other;
in other file
import Hello, {Other} from './hello';
tip: you could also import the default class with other name
import Component, {Other} from './hello';