Create a gist now

Instantly share code, notes, and snippets.

@eddywashere /App.js forked from gaearon/App.js
Last active May 8, 2018

Embed
What would you like to do?
Reactstrap App.js Example for create-react-app
import React, { Component } from 'react';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
Container,
Row,
Col,
Jumbotron,
Button
} from 'reactstrap';
class App extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div>
<Navbar color="inverse" inverse toggleable>
<NavbarToggler right onClick={this.toggle} />
<NavbarBrand href="/">reactstrap</NavbarBrand>
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
<Jumbotron>
<Container>
<Row>
<Col>
<h1>Welcome to React</h1>
<p>
<Button
tag="a"
color="success"
size="large"
href="http://reactstrap.github.io"
target="_blank"
>
View Reactstrap Docs
</Button>
</p>
</Col>
</Row>
</Container>
</Jumbotron>
</div>
);
}
}
export default App;
@wrunk

This comment has been minimized.

Show comment
Hide comment
@wrunk

wrunk Oct 21, 2017

Maybe worth noting this example didn't work for me with latest reactstrap. I did have luck using the example from components/navbar: https://reactstrap.github.io/components/navbar/

This had issues with the nav props and other errors that caused the page to not render properly.

wrunk commented Oct 21, 2017

Maybe worth noting this example didn't work for me with latest reactstrap. I did have luck using the example from components/navbar: https://reactstrap.github.io/components/navbar/

This had issues with the nav props and other errors that caused the page to not render properly.

@krystofbe

This comment has been minimized.

Show comment
Hide comment
@krystofbe

krystofbe Nov 18, 2017

Working Typescript example for reactstrap-5.0.0-alpha.4

https://gist.github.com/krystofbe/47c19f41949249bb9b58af46794f1955

Working Typescript example for reactstrap-5.0.0-alpha.4

https://gist.github.com/krystofbe/47c19f41949249bb9b58af46794f1955

@rafaellehmkuhl

This comment has been minimized.

Show comment
Hide comment
@rafaellehmkuhl

rafaellehmkuhl Dec 14, 2017

I wasn't luck with neither the docs example nor the components/navbar. Here is an screenshot from the rendering of the navbar example:

image

I wasn't luck with neither the docs example nor the components/navbar. Here is an screenshot from the rendering of the navbar example:

image

@zaffkea

This comment has been minimized.

Show comment
Hide comment
@zaffkea

zaffkea Jan 3, 2018

@eddywashere, @rafaellehmkuhl, and @wrunk I think it isn't working because it's missing the .css. I added this line, and it works for me now.
import 'bootstrap/dist/css/bootstrap.css';

zaffkea commented Jan 3, 2018

@eddywashere, @rafaellehmkuhl, and @wrunk I think it isn't working because it's missing the .css. I added this line, and it works for me now.
import 'bootstrap/dist/css/bootstrap.css';

@JonathanSum

This comment has been minimized.

Show comment
Hide comment
@JonathanSum

JonathanSum Jan 6, 2018

Awsome! :D:D zaffkea . It is freaking working now. Thank YOU!!!

Awsome! :D:D zaffkea . It is freaking working now. Thank YOU!!!

@flexjames

This comment has been minimized.

Show comment
Hide comment
@flexjames

flexjames Feb 13, 2018

I was unable to load the boostrapp.css file without adding some code to my webpack.config.js file. Perhaps it was because I was using webpack. The following link was helpful:

https://stackoverflow.com/questions/42436728/webpack2-how-to-import-bootstrap-css-for-react-bootstrap-to-find-its-styles/42440360

I was unable to load the boostrapp.css file without adding some code to my webpack.config.js file. Perhaps it was because I was using webpack. The following link was helpful:

https://stackoverflow.com/questions/42436728/webpack2-how-to-import-bootstrap-css-for-react-bootstrap-to-find-its-styles/42440360

@RodolfoSilva

This comment has been minimized.

Show comment
Hide comment
@RodolfoSilva

RodolfoSilva Mar 20, 2018

@eddywashere The navbar color is wrong use <Navbar color="dark" inverse toggleable> instead <Navbar color="inverse" inverse toggleable>

@eddywashere The navbar color is wrong use <Navbar color="dark" inverse toggleable> instead <Navbar color="inverse" inverse toggleable>

@lizzymendivil

This comment has been minimized.

Show comment
Hide comment
@lizzymendivil

lizzymendivil Mar 28, 2018

Hi! Please, help me... I used to use bootstrap via CDN, you know, <link rel="stylesheet" href ... and <script src=""> etc
So, here, for react, where is the jquery, popper and bootstrap.min.js?
Sorry, it is my first time with react and npm. Thanks :)

lizzymendivil commented Mar 28, 2018

Hi! Please, help me... I used to use bootstrap via CDN, you know, <link rel="stylesheet" href ... and <script src=""> etc
So, here, for react, where is the jquery, popper and bootstrap.min.js?
Sorry, it is my first time with react and npm. Thanks :)

@lizzymendivil

This comment has been minimized.

Show comment
Hide comment
@lizzymendivil

lizzymendivil Mar 28, 2018

And also I have this error

Failed to compile.

./src/index.js
Module not found: Can't resolve 'bootstrap/dist/css/bootstrap.min.css' in 'D:\React\my-app2\src'

And also I have this error

Failed to compile.

./src/index.js
Module not found: Can't resolve 'bootstrap/dist/css/bootstrap.min.css' in 'D:\React\my-app2\src'

@MuhammadIdzhar

This comment has been minimized.

Show comment
Hide comment
@MuhammadIdzhar

MuhammadIdzhar May 8, 2018

Can we use Col or Container on first line instead of div?

Can we use Col or Container on first line instead of div?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment