This is my App.js and earlier I was using Suspense but it does not seem to be working as it is not able to load the image and the font after the loader.
import React, { Suspense } from 'react';
import './App.css';
import SyncLoader from "react-spinners/SyncLoader";
const Newhome = React.lazy(() => import('./COMPONENTS/Newhome'));
function App() {
return (
<>
{
window.onload = <Newhome/>
}
{/* <Suspense className='App' fallback={
<SyncLoader size={'20px'} color='#FF5757' className='loader App'/>
}>
<Newhome />
</Suspense> */}
</>
);
}
export default App;
I have commented the Suspense tag part for now.
What can do so that the image, jsx, fonts, and everything loads and then the page is shown?
Related
This is my App.js. Here, I call the "Profile" Component.
import './App.css';
import Profile from "./Profile"
function App() {
return (
<div className="App">
<Profile />
</div>
);
}
export default App;
Then, inside Profile.js, I call Card component and inside the Card component, I've enclosed an image.
import React from 'react'
import Card from './Card'
import styles from "./Profile.module.css"
import image1 from "./assets/profile1.png"
const Profile = () => {
return (
<Card>
<div>
<img src={image1} alt="" />
</div>
</Card>
)
}
export default Profile
Inside of Card component, I've just applied some CSS to make it look like a Card.
import React from 'react'
import styles from "./Card.module.css"
const Card = () => {
return (
<div className={styles.card}>
</div>
)
}export default Card
This is my folder structure.
I'm really confused why the image isn't getting showed up. Currently this is the output I'm getting.
I've restarted the server as well. But it's not getting fixed.
your card doesn't have a child component return maybe that could be the problem
import React from 'react'
import styles from "./Card.module.css"
const Card = ({children}) => {
return (
<div className={styles.card}>
{children}
</div>
)
}
export default Card
try this
I tried this .. in my react js to let my browser speak but it is not working on my chrome
import logo from './logo.svg';
import './App.css';
import { useEffect } from 'react';
function App() {
useEffect(() => {
let utterance = new SpeechSynthesisUtterance("Hello Wrold! Ready to Navigate!");
speechSynthesis.speak(utterance);
}, [])
return (
<div className="App">
<header className="App-header">
</header>
</div>
);
}
export default App;
is there a way i can just play without a button
I created a preloader in my react page using react-spinner and is working but it is not showing in full screen instead showing in the top left corner without being able to see it properly.
import React from "react";
import Header from "./components/Header";
import { Helmet } from "react-helmet";
import Sidebar from "./components/Sidebar";
import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader";
import { useState, useEffect } from "react";
import "./index.css";
const App = () => {
const [load, setLoaded] = useState(false);
useEffect(() => {
setLoaded(true);
setTimeout(() => {
setLoaded(false);
}, 8000);
}, []);
return (
<div className="container">
{load ? (
<ClimbingBoxLoader size={150} color={"#123abc"} loading={load} />
) : (
<div>
<div className="indexing">
<Header className="fixed" />
</div>
<div>
<Sidebar></Sidebar>
</div>
</div>
)}
</div>
);
};
export default App;
The problem is your size.
I did some tests here and see :
Test 1
Test 2
Change size to something like : 10
The loader will be shown automatically on the center of screen.
import React from 'react';
import ClimbingBoxLoader from '#bit/davidhu2000.react-spinners.climbing-box-loader';
export default (
<ClimbingBoxLoader size={10} color={"#123abc"} loading="true" />
)
See docs here.
I have this component called SearchBarScreen :
import React, { useEffect } from "react";
import "./index.scss";
export const SearchBarScreen = (props) => {
return (
<>
<img src="./assets/img/logo.png" className="nav_logo" alt="logo mercadolibre" />
</>
);
};
and my project has this structure:
depending on where I call this component, the image can be broken.
for example in the previous image it can be seen under the folder src/components/items/components, where it is called SearchBarScreen. For example, the image is shown broken on ItemDetailScreen but not on ItemScreen.
I always call it the same way in both components:
return (
<>
<SearchBarScreen props={props} />
</>
);
In ItemDetailScreen
In ItemDetailScreen
If you want the image loading to consistently work, you'll need to import the Image as if it was a component instead of the style you generally use with standard HTML.
Like so:
import React, { useEffect } from "react";
import Logo from '../path/to/image';
import "./index.scss";
export const SearchBarScreen = (props) => {
return (
<>
<img src={Logo} className="nav_logo" alt="logomercadolibre" />
</>
);
};
Edit:
If you absolutely have to use the public folder, which I don't recommend, here's how you do it: https://create-react-app.dev/docs/using-the-public-folder/
You'd basically make the path absolute instead of relative.
References:
https://create-react-app.dev/docs/adding-images-fonts-and-files/
cannot import image with create-react-app
I m following tutorials to learn the concept of Hocs in React js the result of the tutorial should display in My browser like this :
toolbar,sideDrawer,backdrop
Burger
Build Controls
but it displayed like this :
toolbar,sideDrawer,backdrop
I cleaned cache in both browser and development server but nothing happened...so please any help or guide why this??Thanks in advance
Aux.js
const Aux = (props) => props.children
export default Aux;
Layout.js
import React from 'react';
import Aux from '../../hoc/Aux';
import classes from './Layout.css'
const Layout = ( props ) => (
<Aux>
<div>toolbar,sideDrawer,backdrop</div>
<main className={classes.Content}>
{props.childern}
</main>
</Aux>
);
export default Layout;
App.js
import React, { Component } from 'react';
import Layout from './components/Layout/Layout'
import BuliderBurger from './containers/BurgerBuilder/BurgerBuilder';
class App extends Component {
render () {
return (
<div>
<Layout>
<BuliderBurger/>
</Layout>
</div>
);
}
}
export default App;
BurgerBuilder.js
import React,{Component} from 'react';
import Aux from '../../hoc/Aux';
class BurgerBuilder extends Component {
render () {
return (
<Aux>
<div>Burger</div>
<div>Build Controls</div>
</Aux>
);
}
}
export default BurgerBuilder;
The reason is that you misspelt children in Layout, you spellt it childern. Fix the typo and it works...
const Layout = ( props ) => (
<Aux>
<div>toolbar,sideDrawer,backdrop</div>
<main className={classes.Content}>
{props.children}
</main>
</Aux>
);
import React, { Component } from 'react';
import Layout from './components/Layout/Layout'
import BuliderBurger from './containers/BurgerBuilder/BurgerBuilder';
class App extends Component {
render () {
return (
<div>
<Layout/>
<BuliderBurger/>
</div>
);
}
}
export default App;
Using Layout this can give the desired result