I am trying to import CSS for each page of my react app but the order of the css import is wrong.
In index.js I load all common css for the site (bootstrap and custom), then go page 'A' that react router handles which also loads its own CSS file. What results is the CSS from page A being loaded before the CSS imports I had in index.js
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './common.css';
ReactDOM.render(
<Routes />,
document.getElementById('root')
);
.
//home.js
import React, { Component } from 'react';
import './home.css';
class Home extends Component {
render() {
return ( ... )
}
}
results in:
<style home.css />
<style bootstrap.css />
<style common.css />
How would I be able to make the CSS from child components load after the parent?
Related
I am implementing a template with reactjs, but the footer gets to break, it should be at the bottom.
The main <div id="root"></div> causing this. Can anyone know how to avoid it?
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
/**
* Import Custom Component
*/
import MainLayout from "./components/layout/MainLayout";
import ErrorPage from "./components/pages/errors/ErrorPage";
/**
* Import the Pages Here
*/
import Home from "./components/pages/app/Home";
class App extends Component{
constructor() {
super();
console.log("Application Started");
}
render(){
return(
<>
<Router>
<Switch>
<MainLayout path="/" exact component={Home} />
<Route component={ErrorPage}></Route>
</Switch>
</Router>
</>
);
};
}
export default App;
It’s because you are not setting your paths correctly, the routing paths should look like this. Sorry I’m on mobile. Try this
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch} from 'react-
router-dom;
<Switch>
<Route exact path=“/” component={MainLayout} />
<Route path=“*” component={ErrorPage} />
</Switch>
The * path serves as a catch all route for any path that is not expressed
Without having your full code it’s hard to tell. Another issue could be colliding divs inside MainLayout and ErrorPage.
Also if there is no content. I would re-iterate what the other answer says. Use css positioning
Just make the <body> tag your root, like so:
<body id="root">
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
Have you try this,
position: 'absolute',
bottom: 0,
I am working on ReactJS project and want to render an iframe which is rendering using third party script.
Kindly check the problem below:
I have an component name add-data.js.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Helmet from 'react-helmet';
import ogImage from '../../../../public/images/qcf-logo-whitebg.svg';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import ApplyNowNavbar from '../Header/ApplyNowHeader';
import ApplyNowFooter from '../Footer/ApplyNowFooter';
export default class ApplyNow extends Component {
render() {
return (
<div>
<Navbar />
<div id="iframe-container"></div> //iframe will be loadd inside this div
<Footer />
</div>
);
}
}
index.html main file
<!doctype html>
<html>
<head>
<script src="www.example.com/iframe-script.js"></script> <!--this file will load iframe in iframe-container div-->
</head>
<body>
<div id="app"></div>
<script src="../js/app.js"></script>
</body>
</html>
this code works only when reload the page but I want to render iframe without reload the page but render ReactJS component.
Can anybody help me out how can I do that.
Thanks in advance.
I am new in ReactJS
I have created a child component called footer and also installed Bootstrap package but not receiving any style in footer.
Code App.js --
import React, { Component }from 'react';
import './App.css';
import Header from './components/header';
import Footer from './components/footer';
class App extends Component {
render() {
return (
<div>
<Header />
<Footer />
</div>
);
}
}
export default App;
Footer.js under components folder
import React from 'react';
const Footer = () => {
return (
<footer className="page-footer font-small blue">
<div className="footer-copyright text-center py-3">© 2019 Copyright:
Test.com
</div>
</footer>
);
};
export default Footer;
index.js --
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.register();
But there is no styling in footer.
Any help is highly appreciated.
Well, the problem is that you don't import bootstrap properly, do you have import errors in your console ?
import 'bootstrap/dist/css/bootstrap.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
try to import by one of i written above.
In your app.css import bootstrap.css like this
import 'bootstrap/dist/css/bootstrap.css';
Then restart your server
That simply means you did not correctly import bootstrap, i dont know how your code is structured so i would suggest you use the cdn version below and link it in your index.html file.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
this means you have to online everytime you use it.
Another option i would suggest is that you use reactstrap which would be easier for you as a beginner. install by using npm install --save reactstrap and then you can use it any component you want. you google the documentation for more details.
I've installed Vue.js framework called element but I'm getting this error.
I'm importing all I need to index.html and Reviews.vue file which only contains:
<template>
<div id="app">
<el-button type="primary" round>Primary</el-button>
</div>
</template>
<script>
import Vue from 'vue'
import ColorPicker from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
export default {}
</script>
<style lang="scss">
</style>
All I'm getting as a result is text "Primary"
this 'quick start' snippet from the element github page will put you in the right direction:
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)
// or
import {
Select,
Button
// ...
} from 'element-ui'
Vue.component(Select.name, Select)
Vue.component(Button.name, Button)
Basically, you either load all the elements with the Vue.use syntax (which I believe will load all of them into your bundle, so you maybe don't want to do so if you're not using a lot of element components in your app), or you load element's Button component in your component:
<template>
<div id="app">
<el-button type="primary" round>Primary</el-button>
</div>
</template>
<script>
import Vue from 'vue'
import ColorPicker from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// mind this new line:
import {Button} from 'element-ui'
export default {}
</script>
<style lang="scss">
</style>
I keep getting this error with React:
_registerComponent(...): Target container is not a DOM element.
I'm using "create-react-app" with Yarn. There's three main files of code.
Here's the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<div id="hw"></div>
</body>
</html>
And index.js:
import './index.css'
import React from 'react'
import {render} from 'react-dom'
import Hello from './Hello'
render(<Hello/>, document.querySelector('#hw'))
And Hello.js
import './helloworld.css'
import React, {Component} from 'react'
class Hello extends Component {
render() {
return
<div className="HelloWorld-hello HelloWorld-flex">
<h1>Hello</h1>
</div>
}
}
export default Hello
I've tried everything I can think of. All files are in the same "src" directory. This all started when I was trying to render two components within index.js using this:
render(
<div>
<Hello/>
<World/>
</div>,
document.querySelector('#hw'))
I found the issues, although I don't understand why one is happening. Apparantely, it's only working when I use root as the name of the div in index.html.
<body>
<div id="root"></div>
</body>
And index.js
import './index.css'
import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'
import World from './World'
ReactDOM.render(<div><Hello/><World/></div>,
document.getElementById('root'))
In the Hello.js file, I placed the div outside of the line with return. Once I moved the div to start on that line.
import './helloworld.css'
import React, {Component} from 'react'
class Hello extends Component {
render() {
return <div className="HelloWorld-hello HelloWorld-flex">
<h1>Hello</h1>
</div>
}
}
export default Hello
I think I understand why I would need to put the <div> on the same line as the return, but I'm completely clueless about why only the word root works for the div id. I've tried all kinds of other words and get the same error.
Ultimately I was trying to have two separate child components (Hello.js and World.js) nested under a parent component (index.js).