Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f8a1a91

Browse files
docs(basic) add bs5 examples for basic-ts, basic-react-router and basic-sass-custom-theming (#246)
* Add bootsrap v5 additional basic examples for ts, react-router and sass-custom-theming * Add bootstrap v5 example links in the README * Seperate out the v5 links from the v4 to make it more noticable in the README
1 parent a5c94aa commit f8a1a91

File tree

29 files changed

+35640
-1
lines changed

29 files changed

+35640
-1
lines changed

‎README.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
The repository for React-Bootstrap's [CodeSandbox](https://codesandbox.io/) examples.
66

7-
## Examples
7+
## Examples v4
88

99
- [Basic Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic) - Just a simple create-react-app setup with React-Bootstrap components.
1010
- [Basic Example CDN](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-cdn) - Another simple create-react-app setup, this time including the Bootstrap CSS via CDN link.
@@ -13,3 +13,13 @@ The repository for React-Bootstrap's [CodeSandbox](https://codesandbox.io/) exam
1313
- [Basic Example with Sass and custom theming](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-sass-custom-theming) - Another simple create-react-app setup, this time by using Sass with custom theming
1414
- [Parcel Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel) - Just a simple Parcel setup with React-Bootstrap components.
1515
- [Parcel TypeScript Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel-ts) - Just a simple Parcel setup with TypeScript with React-Bootstrap components.
16+
17+
## Examples v5
18+
19+
- [Basic Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-v5)- Just a simple create-react-app setup with React-Bootstrap components.
20+
- [Basic Example CDN](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-cdn-v5) - Another simple create-react-app setup, this time including the Bootstrap CSS via CDN link.
21+
- [Basic Example with React-Router-Bootstrap](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-react-router-v5) - Just a simple create-react-app setup with React-Router-Bootstrap.
22+
- [Basic Example with TypeScript](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-ts-v5) - Another simple create-react-app setup, this time by using TypeScript
23+
- [Basic Example with Sass and custom theming](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-sass-custom-theming-v5) - Another simple create-react-app setup, this time by using Sass with custom theming
24+
- [Parcel Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel-v5) - Just a simple Parcel setup with React-Bootstrap components.
25+
- [Parcel TypeScript Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/parcel-ts-v5) - Just a simple Parcel setup with TypeScript with React-Bootstrap components.

‎basic-react-router-v5/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Basic Example with React-Router-Bootstrap
2+
3+
A simple [create-react-app](CRA-README.md) setup, showcasing how it works with React-Router-Bootstrap

‎basic-react-router-v5/package.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "code-sandbox-examples",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"bootstrap": "^5.1.3",
7+
"react": "^17.0.2",
8+
"react-bootstrap": "^2.0.0",
9+
"react-dom": "^17.0.2",
10+
"react-router-bootstrap": "^0.25.0",
11+
"react-router-dom": "^5.2.0",
12+
"react-scripts": "4.0.3"
13+
},
14+
"scripts": {
15+
"start": "react-scripts start",
16+
"build": "react-scripts build",
17+
"test": "react-scripts test",
18+
"eject": "react-scripts eject"
19+
},
20+
"eslintConfig": {
21+
"extends": "react-app"
22+
},
23+
"browserslist": {
24+
"production": [
25+
">0.2%",
26+
"not dead",
27+
"not op_mini all"
28+
],
29+
"development": [
30+
"last 1 chrome version",
31+
"last 1 firefox version",
32+
"last 1 safari version"
33+
]
34+
}
35+
}

‎basic-react-router-v5/public/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>React-Bootstrap CodeSandbox Starter</title>
7+
</head>
8+
<body>
9+
<noscript>You need to enable JavaScript to run this app.</noscript>
10+
<div id="root"></div>
11+
</body>
12+
</html>

‎basic-react-router-v5/src/App.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.header {
2+
text-align: center;
3+
}
4+
5+
.custom-btn-toolbar {
6+
display: inline !important;
7+
}
8+
9+
.custom-btn-toolbar > .btn {
10+
margin-right: 1rem;
11+
}

‎basic-react-router-v5/src/App.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import { MemoryRouter, Switch, Route } from 'react-router-dom';
3+
4+
import Container from 'react-bootstrap/Container';
5+
import Button from 'react-bootstrap/Button';
6+
import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
7+
import { LinkContainer } from 'react-router-bootstrap';
8+
9+
import './App.css';
10+
11+
const Home = () => <span>Home</span>;
12+
13+
const About = () => <span>About</span>;
14+
15+
const Users = () => <span>Users</span>;
16+
17+
const App = () => (
18+
<MemoryRouter>
19+
<Container className="p-3">
20+
<Container className="p-5 mb-4 bg-light rounded-3">
21+
<h1 className="header">Welcome To React-Bootstrap</h1>
22+
<h2>
23+
Current Page is{' '}
24+
<Switch>
25+
<Route path="/about">
26+
<About />
27+
</Route>
28+
<Route path="/users">
29+
<Users />
30+
</Route>
31+
<Route path="/">
32+
<Home />
33+
</Route>
34+
</Switch>
35+
</h2>
36+
<h2>
37+
Navigate to{' '}
38+
<ButtonToolbar className="custom-btn-toolbar">
39+
<LinkContainer to="/">
40+
<Button>Home</Button>
41+
</LinkContainer>
42+
<LinkContainer to="/about">
43+
<Button>About</Button>
44+
</LinkContainer>
45+
<LinkContainer to="/users">
46+
<Button>Users</Button>
47+
</LinkContainer>
48+
</ButtonToolbar>
49+
</h2>
50+
</Container>
51+
</Container>
52+
</MemoryRouter>
53+
);
54+
55+
export default App;

‎basic-react-router-v5/src/App.test.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<App />, div);
8+
ReactDOM.unmountComponentAtNode(div);
9+
});

‎basic-react-router-v5/src/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
// Importing the Bootstrap CSS
6+
import 'bootstrap/dist/css/bootstrap.min.css';
7+
8+
ReactDOM.render(<App />, document.getElementById('root'));

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /