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 82b69df

Browse files
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)

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