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.
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
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 ...
This is my first time using react and I'm using it with Django. I have an index.js that renders the Component App into an id=root element and in the App's body, I have placed an h1 tag and another Component called HomePage which has been imported. When I first start the server and the webpack, the App component updates normally for about 10 seconds but after that, any changes to the App.js doesn't update. The component HomePage however does update when the App component doesn't. My guess is that main.js isn't updating, any help would be appreciated.
index.js
//index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// import { render } from 'react-dom';
import App from './components/App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
App.js
import React, { Component } from 'react';
import HomePage from './HomePage';
function App(){
return(
<div>
<HomePage />
<h1>Welcome</h1>
</div>
);
}
export default App;
HomePage.js
import React, { Component } from 'react';
const HomePage = () => {
return (
<div>
<h1>Home </h1>
</div>
);
}
export default HomePage;
I solved my issue, seems that react is looking for the App.js in the src folder alongside index.js and I had mine in the Components folder with the other Components. after moving it to the src folder and updating the imports my App started updating normally.
This issue took me a while to resolve yesterday. These are some troubleshooting you may try:
Try going to a new directory and initiating another react app. You could also, compare files, boilerplate codes, and folder structure of another working app to see what might have gone wrong.
In your index.js, you could also try:
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(, document.getElementById("root"));
You could also try using a third-party react initialization tool like viteJs.
Bro, I had the exact same problem and, in my case, to solve it was pretty easy
I was saving the files of the components with CAPS LOCKS ON and importing them with CAPS LOCKS OFF
I saw a similiar error over here in your code:
import App from './components/App';
In windows, those kinds of problem are pretty common since we are dealing in a system there is not case sensitive
I hope I helped you!
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"));