Console says that it can't find the module in the directory. I've read about relative paths and tried to redirect but it doesn't seem to work. I am trying to import a header into the app.js file and then show that app.js file into the index.js file.
My index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from '../components/ui/App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
my app.js:
import React from 'react';
import Header from './components/ui/Header';
function App() {
return (
<div className="App">
<Header />
Hello!
</div>
);
}
export default App;
What am I doing wrong here?
Well, first of all, why not share the screenshot of the project structure.
Second, try this one.
import App from '../components/ui/app.js';
Third, check your header.js to check that it has export default ...
Related
I am using VSCode to create a react app, I have multiple folders as shown in the first image:
This is my App.jsx
import React from "react";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Note from "./components/Note";
function App() {
return (
<div>
<Header />
<Footer />
<Note />
</div>
);
}
export default App;
This is my Index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(<App />, document.document.getElementById("root"));
reportWebVitals();
This is my Header.jsx
import React from "react";
function Header() {
return (
<header>
<h1>Keeper</h1>
</header>
);
}
export default Header;
This is my Footer.jsx
import React from "react";
function Footer() {
const date = new Date();
const curretYear = date.getFullYear();
return (
<footer>
<p>copyright ⓒ {curretYear}</p>;
</footer>
);
}
export default Footer;
I am trying to learn react on VSCode, the same code works on Codesandbox, but I can't get it to work on my VSCode, and I am not getting any errors in the terminal. I am learning React and I would like the help.
Your import paths in App.jsx appear to be wrong try ./Header etc. Remember that import paths are relative and since the imported modules are on the same level as App.jsx, you don't need to go through the components folder
I am using React 18 and very new to it, I get the following error
Compiled with problems:X
ERROR
src\index.js
Line 5:14: 'App' is not defined react/jsx-no-undef
Search for the keywords to learn more about each error.
Following is my code and necessary screenshot
index.js
import React from 'react';
import ReactDOM from "react-dom/client";
import App from './App';
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />);
App.js
import React from 'react';
import { About, Footer, Header, Skills, Testimonial, Work } from './container';
import { Navbar } from './components';
import './App.scss';
const App = () => (
<div className="app">
<Navbar />
<Header />
<About />
<Work />
<Skills />
<Testimonial />
<Footer />
</div>
);
export default App;
Following is my file structure
Folder structure
Any help would be appreciated
Update: I have done that, and I thought I was missing that. But I get hit with more error in the Console, regarding the App
Following is the screenshot
Error
When I type npm start in terminal, in localhost:3000 in browser, it opens index.js instead of App.js, I want to open App.js, how do I fix this?
First of all: Welcome to StackOverflow!
Usually your index.js renders your app.js. Then the content of the index.js would look similiar to this:
import ReactDOM from 'react-dom';
ReactDOM.render(
<App />
);
And your app.js content would look similiar to:
import React from 'react';
const App = () => {
return(
<div>I am the app content.</div>
)
};
export default App;
So your browser would still start the index.js but renders the content of your app.js which contains the <App /> Component.
I have set up React with my Laravel project. In the resources > js folder I have an App.js and an index.js. I also have an Example.js file in resources > js > components folder. What I am trying to do is to import my Example.js into the App.js, then import App.js into the index.js and render it into my blade template. The problem is that it's not showing anything inside of my root div on the page.
Here's the code in my Example.js file:
import React from 'react';
function Example() {
return (
<div>
TEST
</div>
);
}
export default Example;
This is the code I have inside App.js:
import React from "react";
import Example from "./components/Example";
function App() {
return (
<Example/>
)
}
export default App;
And this is index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App";
ReactDOM.render(<App/>, document.getElementById("root"));
First of all, I am truly new in reactjs. I am trying to design my react project using bootstrap. For some reasons it's not working as it should be. Below is my code:
App.js
import React from 'react';
import './App.css';
import Menu from '../components/Menu/Menu';
function App() {
return (
<div className="App">
<Menu />
</div>
);
}
export default App;
Menu.js
import React from 'react'
import * as ReactBootstrap from 'react-bootstrap'
const Menu = () => {
return (
<div id="menu_container">
<ReactBootstrap.Navbar bg="dark" variant="dark">
<ReactBootstrap.Navbar.Brand href="#home">Navbar</ReactBootstrap.Navbar.Brand>
<ReactBootstrap.Nav className="mr-auto">
<ReactBootstrap.Nav.Link href="#home">Home</ReactBootstrap.Nav.Link>
<ReactBootstrap.Nav.Link href="#features">Features</ReactBootstrap.Nav.Link>
<ReactBootstrap.Nav.Link href="#pricing">Pricing</ReactBootstrap.Nav.Link>
</ReactBootstrap.Nav>
<ReactBootstrap.Form inline>
<ReactBootstrap.FormControl type="text" placeholder="Search" className="mr-sm-2" />
<ReactBootstrap.Button variant="outline-light">Search</ReactBootstrap.Button>
</ReactBootstrap.Form>
</ReactBootstrap.Navbar>
</div>
)
}
export default Menu;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './containers/App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
Current Output:
Current output
Output I want:
Output I want
Make sure you add the CDN link in index.html.
Although you found it this would help others.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"/>
or add this in app.css
#import "bootstrap/dist/css/bootstrap.css";
You have some .css files that are imported in App.js and index.js. Maybe they are overriding some bootstrap rules.
I took your code here https://codesandbox.io/s/test-react-bootstrap-75rsd, removed the App.css and index.css imports and it looks just as you want.