Skip to content

Commit 82b69df

Browse files
lcheunglcilcheunglci
authored
Add bootstrap v5 basic-cdn examples and fix compiler error due to deprecated jumbotron (#244)
1 parent 2acccae commit 82b69df

File tree

8 files changed

+11688
-0
lines changed

8 files changed

+11688
-0
lines changed

‎basic-cdn-v5/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Basic Example
2+
3+
A simple [create-react-app](CRA-README.md) setup, showcasing one of the latest React-Bootstrap components!

‎basic-cdn-v5/package.json

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

‎basic-cdn-v5/public/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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+
7+
<!-- Including the bootstrap css via CDN -->
8+
<link
9+
rel="stylesheet"
10+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
11+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
12+
crossorigin="anonymous"
13+
>
14+
15+
<title>React-Bootstrap CodeSandbox Starter</title>
16+
</head>
17+
<body>
18+
<noscript>You need to enable JavaScript to run this app.</noscript>
19+
<div id="root"></div>
20+
</body>
21+
</html>

‎basic-cdn-v5/src/App.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.header {
2+
text-align: center;
3+
}

‎basic-cdn-v5/src/App.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React, { useState } from 'react';
2+
3+
import Toast from 'react-bootstrap/Toast';
4+
import Container from 'react-bootstrap/Container';
5+
6+
import './App.css';
7+
8+
const ExampleToast = ({ children }) => {
9+
const [show, toggleShow] = useState(true);
10+
11+
return (
12+
<Toast show={show} onClose={() => toggleShow(!show)}>
13+
<Toast.Header>
14+
<strong className="mr-auto">React-Bootstrap</strong>
15+
</Toast.Header>
16+
<Toast.Body>{children}</Toast.Body>
17+
</Toast>
18+
);
19+
};
20+
21+
const App = () => (
22+
<Container className="p-3">
23+
<Container className="p-5 mb-4 bg-light rounded-3">
24+
<h1 className="header">Welcome To React-Bootstrap</h1>
25+
<ExampleToast>
26+
We now have Toasts
27+
<span role="img" aria-label="tada">
28+
🎉
29+
</span>
30+
</ExampleToast>
31+
</Container>
32+
</Container>
33+
);
34+
35+
export default App;

‎basic-cdn-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-cdn-v5/src/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
ReactDOM.render(<App />, document.getElementById('root'));

0 commit comments

Comments
 (0)