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"));
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
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!
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.
I am new to React, I am trying to integrate bootstrap with a new React project , Got my app setup using create-react-app, installed bootstrap and reactstrap using Yarn, this is my index.js file in the src/ folder
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
and here is my app.js file
import React, { Component } from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Navbar dark color="primary">
<div className="container">
<NavbarBrand href="/">my-brand</NavbarBrand>
</div>
</Navbar>
</div>
);
}
}
export default App;
Now, when I save and run the above code, I get the following errors :-
Uncaught Error: Cannot find module '../../../css-loader/lib/css-base.js'
./node_modules/reactstrap/dist/reactstrap.es.js
Can't resolve 'C:\Users\moswi\Desktop\re-confusion\node_modules\babel-loader\lib\index.js
Does somebody know what could be the problem?
thanks.
I had the same issue and what worked for me is the following:
Remove package-lock.json
Run npm install and then npm start again
Hope this helps