I am trying to display these bootstrap panels from here
https://www.w3schools.com/bootstrap/bootstrap_panels.asp :
the header and footer one.
I have installed bootstrap in my project. And I can see the Button is working fine, but panels are not coming up.
App.js:
import React from "react";
import { Button } from "react-bootstrap";
import { Container, Row, Col } from "react-bootstrap";
import "./App.css";
function App() {
return (
<div>
<center>
<Button href="#">Link</Button>
</center>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
);
}
export default App;
Here is the output but it does not display the panels properly:
Step.1: install bootstrap
npm install bootstrap
Step.2: include bootstarp CSS
import "bootstrap/dist/css/bootstrap.min.css";
Also, Note that in your code, you are using class instead of className. Though, it might work but with warnings. Check how to do styling in reactjs.
Example:
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
export default function App() {
return (
<div className="card">
<div className="card-header">Card Header</div>
<div className="card-body">Card Body</div>
<div className="card-footer text-muted">Card Footer</div>
</div>
);
}
Here is a sandbox
Related
I am just started working with react js for couple of days it throws error like
src\App.js
Line 2:8: 'navbar' is defined but never used no-unused-vars.this error occurs while i am importing the navbar component into my app.js, i did install eslint package and update my npm version also,i really dontknow what to do .i would really appreciate if u guys provide solution
Below code is my app.js:
import React from 'react';
import navbar from"./components/navbar";
import './App.css';
function App() {
return (
<div className="App">
<navbar />
</div>
);
}
export default App;
below is my navbar.js code which i am trying to import in the app.js
import React, { Component } from 'react';
import{MenuItems} from "./MenuItems";
import "./navbar.css";
class navbar extends Component{
render(){
return(
<nav className="navbarItems">
<h1 className="navbar-logo">React<i className="fab fa-react"></i>
</h1>
<div className="menu-icon"></div>
<ul>
{MenuItems.map((items,index)=>{
return(
<li key={index}>
<a className={MenuItems.cname}href={items.url}>
{items.title}
</a></li>
)
})}
</ul>
</nav>
)
}
}
export default navbar;
I am getting a message "no internet" meaning my image has an error but I don't know how to rectify it. The code is as shown below:
import React from 'react';
import './Footer.css'
function Footer(props) {
return (
<div className='footer-container'>
<div className='footer-parent'>
<img src={require('../../../assets/Home/shape-bg.png').default} alt='no internet connection'/>
</div>
</div>
);
}
export default Footer;
There are two ways how to display images in React:
import React from 'react';
import './Footer.css'
function Footer(props) {
return (
<div className='footer-container'>
<div className='footer-parent'>
<img src={require('../../../assets/Home/shape-bg.png')} alt='no internet connection'/>
</div>
</div>
);
}
export default Footer;
I don't get your ".default".. Or just do it that way:
import React from 'react';
import './Footer.css'
import image from '../../../assets/Home/shape-bg.png'
function Footer(props) {
return (
<div className='footer-container'>
<div className='footer-parent'>
<img src={image} alt='no internet connection'/>
</div>
</div>
);
}
export default Footer;
Here I just imported that image on top of that file and paste that image into <image src />.
I am really confused as to why .btn-primary class is being used here and why not .btn-outline-* is shown properly with the correct background color (it has bluish background which should not have).
here is the code
import React from "react";
import Button from "react-bootstrap/Button";
function Skills() {
return (
<section id="section3">
<div className="item1">
<h1>Work In progress!</h1>
</div>
<div className="item2">
<Button className="btn btn-outline-dark">HI</Button>
</div>
<div className="item3"></div>
</section>
);
}
export default Skills;
as you can see .btn-primary is there
The Button component from react has a default variant of primary. Even though you don't specify it here it automaticaly assumes it. That's why you're getting the btn-primary class. Instead of using classes just use variant
import React from "react";
import Button from "react-bootstrap/Button";
function Skills() {
return (
<section id="section3">
<div className="item1">
<h1>Work In progress!</h1>
</div>
<div className="item2">
<Button variant="btn-outline-dark">HI</Button>
</div>
<div className="item3"></div>
</section>
);
}
export default Skills;
I have the following code that produces a Card UX Component.:
import React from 'react';
import image1 from '../images/swimming_sign.jpg';
const Card = props =>{
return(
<div className="card text-center">
<div className="overflow">
<img src="image1" alt='Image 1'/>
</div>
</div>
);
}
export default Card;
I would like to know how I can call it in one of my pages that simply produces an image at the top half of the page, and also what is the command for importing the "bootstrap.min.css" from "node_modules" in this page. The code for the page currently looks like this:
import React from 'react'
import Hero from '../Components/Hero';
import Card from '../Components/ServicesUi';
export default function Services() {
return (
<Hero hero="servicesHero"/>
);
}
Card Import
import React from 'react';
let image1 = '../images/swimming_sign.jpg';
const Card = props =>{
return(
<div className="card text-center">
<div className="overflow">
<img src={image1} alt='Image 1'/>
</div>
</div>
);
}
export default Card;
import React from 'react'
import Hero from '../Components/Hero';
import Card from '../Components/ServicesUi';
export default function Services() {
return (
<Card/>
<Hero hero="servicesHero"/>
);
}
To import css file from node modules, please place the link statement in your index.html file
<link rel="stylesheet" href="./node_modules/bootstrap/bootstrap.min.css">
I have setup a basic react app using create-react-app and created my first component. However, the project is not able to build or render due to this error in browser window:
CountDown(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
./src/index.js
D:/ReactDev/CountDownReact/countdown/src/index.js:8
Here's my index.js file code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Bulma from 'bulma/css/bulma.css'
import App from './components/App/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
and the App.js where I have imported the new component:
import React, {Component} from 'react';
import './App.css';
import CountDown from '../countdown/Countdown';
class App extends Component {
render() {
return(
<div className="App">
Hello React
<CountDown/>
</div>
);
}
}
export default App;
Finally, my Countdown component code:
import React from 'react';
const CountDown = (props) => {
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
};
export default CountDown;
Do I need to also import my new component here? How do I solve this issue. Thanks.
Your Countdown component doesn't return anything, you can replace the {} with () in order to have it return.
import React from 'react';
const CountDown = (props) => (
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
);
export default CountDown;
That should do it.
CountDown component doesn't return the JSX. You can add an explicit return statement for returning the JSX.
Had the same problem with this:
function Input(props) {
return
<input type={props.type} placeholder={props.placeholder} />
}
Instead it had to be:
function Input(props) {
return <input type={props.type} placeholder={props.placeholder} />
}