Add bootstrap v5 basic-cdn examples and fix compiler error due to deprecated jumbotron (#244)

lcheunglci · web-flow · commit 82b69dffffbf · 2021-10-22T17:23:44.000-07:00
diff --git a/basic-cdn-v5/README.md b/basic-cdn-v5/README.md
@@ -0,0 +1,3 @@
+# Basic Example
+
+A simple [create-react-app](CRA-README.md) setup, showcasing one of the latest React-Bootstrap components!
diff --git a/basic-cdn-v5/package.json b/basic-cdn-v5/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "code-sandbox-examples",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-bootstrap": "^2.0.0",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/basic-cdn-v5/public/index.html b/basic-cdn-v5/public/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Including the bootstrap css via CDN -->
+    <link 
+      rel="stylesheet" 
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
+      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
+      crossorigin="anonymous"
+    >
+
+    <title>React-Bootstrap CodeSandbox Starter</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/basic-cdn-v5/src/App.css b/basic-cdn-v5/src/App.css
@@ -0,0 +1,3 @@
+.header {
+  text-align: center;
+}
diff --git a/basic-cdn-v5/src/App.js b/basic-cdn-v5/src/App.js
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+
+import Toast from 'react-bootstrap/Toast';
+import Container from 'react-bootstrap/Container';
+
+import './App.css';
+
+const ExampleToast = ({ children }) => {
+  const [show, toggleShow] = useState(true);
+
+  return (
+    <Toast show={show} onClose={() => toggleShow(!show)}>
+      <Toast.Header>
+        <strong className="mr-auto">React-Bootstrap</strong>
+      </Toast.Header>
+      <Toast.Body>{children}</Toast.Body>
+    </Toast>
+  );
+};
+
+const App = () => (
+  <Container className="p-3">
+    <Container className="p-5 mb-4 bg-light rounded-3">
+      <h1 className="header">Welcome To React-Bootstrap</h1>
+      <ExampleToast>
+        We now have Toasts
+        <span role="img" aria-label="tada">
+          🎉
+        </span>
+      </ExampleToast>
+    </Container>
+  </Container>
+);
+
+export default App;
diff --git a/basic-cdn-v5/src/App.test.js b/basic-cdn-v5/src/App.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/basic-cdn-v5/src/index.js b/basic-cdn-v5/src/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/basic-cdn-v5/yarn.lock b/basic-cdn-v5/yarn.lock

Original file line number	Diff line number	Diff 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!`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.header {`
	`2`	`+ text-align: center;`
	`3`	`+}`