Im working on an NFT minting frontend with react, but it's giving me issues (as always). For some reason, it only displays a blank white page, which I'm struggling to understand. This is my main.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)
and this is my App.jsx [it's A LOT more than just this, I'm just trying to get it to display any damn text :( ]
import { useState } from 'react'
import logo from './logo.svg'
import './App.css'
import Install from './components/Install'
function App() {
const [count, setCount] = useState(0)
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>Hello Vite + React!</p>
</header>
</div>
)
}
export default App
Any feedback would be appreciated
Maybe try to remove unused packages and components. For this case Install 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
Hi guys I am new to React .Just want to render my component into app component but unable to do so here is my code :
conditionalView.js:
import React, { Component } from 'react'
export class conditionalView extends Component {
render() {
return (
<div>
<h2>Conditional View</h2>
</div>
)
}
}
export default conditionalView
App.js
import logo from './logo.svg';
import './App.css';
import Bike from './bike';
import Car from './car';
import FnEvent from './FnEvent';
import ClsEvent from './ClsEvent';
import ClsEventBind from './ClsEventBind';
import conditionalView from './conditionalView';
function App() {
return (
<div className="App">
<header className="App-header">
{/* <img src={logo} className="App-logo" alt="logo" />
<Bike name="Caliber 125" />
<Car name="Maruti 800" /> */}
{/* <FnEvent />
<ClsEvent /> */}
{/* <ClsEventBind /> */}
<conditionalView />
</header>
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import reactDom from 'react-dom';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
Basically i want to render content of conditionView.js component into App.js but it is not picking up the content.
In react custom components are supposted to start with capital letters. For standard HTML elements, like div, span use lower case.
Also, no need to export twice from ConditionalView.
You can export at the same time of declaration along with the default keyword.
import React, { Component } from 'react'
export default class conditionalView extends Component {
render() {
return (
<div>
<h2>Conditional View</h2>
</div>
)
}
}
Your component should be PascalCase: ConditionalView, not conditionalView.
This might be happening because you are exporting component more than once
export class conditionalView extends Component {
remove the export keyword from here
React components should always start with a capital letter, so rename <conditionalView /> to <ConditionalView />,
and update the import statement too;
import ConditionalView from './conditionalView';
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'm a quite beginner to React and Redux...I need to use Match object in my application...but I'm getting the following error..
Attempted import error: 'Match' is not exported from 'react-router'.
Same error is given when tried with 'react-router-dom' as well.
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {Link} from 'react-router-dom'
import {Match} from 'react-router';
import GamesPage from './GamesPage'
//import './reducers/games'
function App() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
</div>
<p>
<Link to="games">Games</Link>
</p>
<Match pattern="/games" component={GamesPage} />
</div>
);
}
export default App;
Match was component in the alpha release of React Router v4.
In the beta, Match has been renamed Route (and its props have changed so that pattern is now path and exactly is exact).Instead you should use a Switch statement, which will only render the first Route (or Redirect) that is matched. You can add a pathless component as the last child of the Switch's routes and it will render when none of the preceding Route's match.
You can check out the API documentation for more details.
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {NavLink, Route} from 'react-router-dom'
import GamesPage from './GamesPage'
//import './reducers/games'
function App() {
return (
<div className="App">
<div className="App-header">
Sample application of react router dom
</div>
<Router>
<NavLink to="/games">Games</NavLink>
<Switch>
<Route path="/games" component={GamesPage} />
</Switch>
</Router>
</div>
);
}
export default App;