Code cleanup - fixed all items resulting in react compile warnings

package.json

@@ -11,7 +11,8 @@
  "html templates",
  "website design",
  "html5",
- "trending design"
+ "trending design",
+ "react"
  ],
  "homepage": "https://www.froala.com/design-blocks",
  "license": "https://github.com/froala/react-froala-design-blocks/blob/master/LICENSE",
@@ -25,13 +26,13 @@
  }
  ],
  "dependencies": {
- "bootstrap": "^4.1.3",
+ "bootstrap": "^5.1.3",
  "capitalize": "^2.0.0",
  "froala-design-blocks": "~2.0.0",
  "react": "^16.6.1",
  "react-dom": "^16.6.1",
  "react-iframe": "^1.3.3",
- "react-router-dom": "^4.3.1",
+ "react-router-dom": "^6.0.2",
  "react-scripts": "2.1.1",
  "replace-in-file": "^3.4.2"
  },

src/App.css

@@ -20,4 +20,8 @@
 
 #navigator + section {
  padding: 250px 0;
+}
+
+.bg-dark .fdb-box {
+ background: gray;
 }

src/App.js

@@ -2,8 +2,8 @@ import './App.css';
 import '../node_modules/bootstrap/dist/css/bootstrap.css';
 import '../node_modules/froala-design-blocks/dist/css/froala_blocks.css';
 
-import { Link, Route, BrowserRouter as Router } from "react-router-dom";
-import React, { Component } from 'react';
+import { Link, Route, Routes, BrowserRouter as Router } from "react-router-dom";
+import React from 'react';
 
 import CallToAction from './CallToAction.jsx';
 import Contacts from './Contacts.jsx';
@@ -15,9 +15,13 @@ import Headers from './Headers.jsx';
 import Pricings from './Pricings.jsx';
 import Teams from './Teams.jsx';
 import Testimonials from './Testimonials.jsx';
+import Lists from './Lists.jsx';
+import Carousels from './Carousels.jsx'; 
+import Gallery from "./Gallery.jsx";
+import Sample1 from './Sample1.jsx';
+import Sample2 from './Sample2.jsx';
 
-class App extends Component {
- render() {
+function App() {
  return (
  <Router>
  <div>
@@ -54,32 +58,39 @@ class App extends Component {
  <Link className="btn btn-outline-primary m-1" to="/pricings">Pricings</Link>
  <Link className="btn btn-outline-primary m-1" to="/teams">Teams</Link>
  <Link className="btn btn-outline-primary m-1" to="/testimonials">Testimonials</Link>
+ <Link className="btn btn-outline-primary m-1" to="/lists">Lists</Link>
+ <Link className="btn btn-outline-primary m-1" to="/carousels">Carousels</Link>
+ <Link className="btn btn-outline-primary m-1" to="/gallery">Gallery</Link>
+ <Link className="btn btn-outline-primary m-1" to="/sample1">Sample</Link>
+ <Link className="btn btn-outline-primary m-1" to="/sample2">Sample 2</Link>
  </nav>
  </div>
  </nav>
  </div>
  </section>
 
- <Route exact path="/call-to-action" component={CallToAction} />
- <Route exact path="/contacts" component={Contacts} />
- <Route exact path="/contents" component={Contents} />
- <Route exact path="/features" component={Features} />
- <Route exact path="/footers" component={Footers} />
- <Route exact path="/forms" component={Forms} />
- <Route exact path="/headers" component={Headers} />
- <Route exact path="/pricings" component={Pricings} />
- <Route exact path="/teams" component={Teams} />
- <Route exact path="/testimonials" component={Testimonials} />
+ <Routes>
+ <Route exact path="/call-to-action" element={<CallToAction />} />
+ <Route exact path="/contacts" element={<Contacts />} />
+ <Route exact path="/contents" element={<Contents />} />
+ <Route exact path="/features" element={<Features />} />
+ <Route exact path="/footers" element={<Footers />} />
+ <Route exact path="/forms" element={<Forms />} />
+ <Route exact path="/headers" element={<Headers />} />
+ <Route exact path="/pricings" element={<Pricings />} />
+ <Route exact path="/teams" element={<Teams />} /> 
+ <Route exact path="/testimonials" element={<Testimonials />} />
+ <Route exact path="/lists" element={<Lists />} />
+ <Route exact path="/carousels" element={<Carousels />} />
+ <Route exact path="/gallery" element={<Gallery />} />
+ <Route exact path="/sample1" element={<Sample1 />} />
+ <Route exact path="/sample2" element={<Sample2 />} />
+
+ <Route path="/" element={<Sample1 />} />
+ </Routes>
  </div>
  </Router>
  );
- }
-}
-
-function Home() {
- return (
- ''
- );
 }
 
 export default App;

src/CallToAction.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import CallToAction01 from './call-to-action/CallToAction01.jsx';
 import CallToAction02 from './call-to-action/CallToAction02.jsx';
@@ -23,9 +23,8 @@ import CallToAction20 from './call-to-action/CallToAction20.jsx';
 import CallToAction21 from './call-to-action/CallToAction21.jsx';
 import CallToAction22 from './call-to-action/CallToAction22.jsx';
 
-class CallToAction extends Component {
- render() {
- return (
+function CallToAction(props) {
+ return (
  <div>
  <CallToAction01></CallToAction01>
  <CallToAction02></CallToAction02>
@@ -51,7 +50,6 @@ class CallToAction extends Component {
  <CallToAction22></CallToAction22>
  </div>
  )
- }
 }
 
 export default CallToAction

src/Carousels.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import Carousel01 from './carousels/Carousel01.jsx';
+import Carousel02 from './carousels/Carousel02.jsx';
+
+function Contents(props) {
+
+ let dark=true;
+
+ return (
+ <div>
+ <Carousel01 dark={dark} />
+ <Carousel02 dark={dark} />
+ </div>
+ )
+}
+
+export default Contents

src/Contacts.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import Contacts01 from './contacts/Contacts01.jsx';
 import Contacts02 from './contacts/Contacts02.jsx';
@@ -11,23 +11,24 @@ import Contacts08 from './contacts/Contacts08.jsx';
 import Contacts09 from './contacts/Contacts09.jsx';
 import Contacts10 from './contacts/Contacts10.jsx';
 
-class Contacts extends Component {
- render() {
- return (
+function Contacts(props) {
+
+ let dark=true;
+
+ return (
  <div>
- <Contacts01></Contacts01>
- <Contacts02></Contacts02>
- <Contacts03></Contacts03>
- <Contacts04></Contacts04>
- <Contacts05></Contacts05>
- <Contacts06></Contacts06>
- <Contacts07></Contacts07>
- <Contacts08></Contacts08>
- <Contacts09></Contacts09>
- <Contacts10></Contacts10>
+ <Contacts01 dark={dark} />
+ <Contacts02 dark={dark} />
+ <Contacts03 dark={dark} />
+ <Contacts04 dark={dark} />
+ <Contacts05 dark={dark} />
+ <Contacts06 dark={dark} />
+ <Contacts07 dark={dark} />
+ <Contacts08 dark={dark} />
+ <Contacts09 dark={dark} />
+ <Contacts10 dark={dark} />
  </div>
  )
- }
 }
 
 export default Contacts

src/Contents.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import Contents01 from './contents/Contents01.jsx';
 import Contents02 from './contents/Contents02.jsx';
@@ -35,49 +35,52 @@ import Contents32 from './contents/Contents32.jsx';
 import Contents33 from './contents/Contents33.jsx';
 import Contents34 from './contents/Contents34.jsx';
 import Contents35 from './contents/Contents35.jsx';
+import Contents36 from './contents/Contents36.jsx';
 
-class Contents extends Component {
- render() {
- return (
+function Contents(props) {
+
+ let dark=true;
+
+ return (
  <div>
- <Contents01></Contents01>
- <Contents02></Contents02>
- <Contents03></Contents03>
- <Contents04></Contents04>
- <Contents05></Contents05>
- <Contents06></Contents06>
- <Contents07></Contents07>
- <Contents08></Contents08>
- <Contents09></Contents09>
- <Contents10></Contents10>
- <Contents11></Contents11>
- <Contents12></Contents12>
- <Contents13></Contents13>
- <Contents14></Contents14>
- <Contents15></Contents15>
- <Contents16></Contents16>
- <Contents17></Contents17>
- <Contents18></Contents18>
- <Contents19></Contents19>
- <Contents20></Contents20>
- <Contents21></Contents21>
- <Contents22></Contents22>
- <Contents23></Contents23>
- <Contents24></Contents24>
- <Contents25></Contents25>
- <Contents26></Contents26>
- <Contents27></Contents27>
- <Contents28></Contents28>
- <Contents29></Contents29>
- <Contents30></Contents30>
- <Contents31></Contents31>
- <Contents32></Contents32>
- <Contents33></Contents33>
- <Contents34></Contents34>
- <Contents35></Contents35>
+ <Contents01 dark={dark} />
+ <Contents02 dark={dark} />
+ <Contents03 dark={dark} />
+ <Contents04 dark={dark} />
+ <Contents05 dark={dark} />
+ <Contents06 dark={dark} />
+ <Contents07 dark={dark} />
+ <Contents08 dark={dark} />
+ <Contents09 dark={dark} />
+ <Contents10 dark={dark} />
+ <Contents11 dark={dark} />
+ <Contents12 dark={dark} />
+ <Contents13 dark={dark} />
+ <Contents14 dark={dark} />
+ <Contents15 dark={dark} />
+ <Contents16 dark={dark} />
+ <Contents17 dark={dark} />
+ <Contents18 dark={dark} />
+ <Contents19 dark={dark} />
+ <Contents20 dark={dark} />
+ <Contents21 dark={dark} />
+ <Contents22 dark={dark} />
+ <Contents23 dark={dark} />
+ <Contents24 dark={dark} />
+ <Contents25 dark={dark} />
+ <Contents26 dark={dark} />
+ <Contents27 dark={dark} />
+ <Contents28 dark={dark} />
+ <Contents29 dark={dark} />
+ <Contents30 dark={dark} />
+ <Contents31 dark={dark} />
+ <Contents32 dark={dark} />
+ <Contents33 dark={dark} />
+ <Contents34 dark={dark} />
+ <Contents35 dark={dark} />
+ <Contents36 dark={dark} />
  </div>
  )
- }
 }
 
 export default Contents

src/Features.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import Features01 from './features/Features01.jsx';
 import Features02 from './features/Features02.jsx';
@@ -34,9 +34,8 @@ import Features31 from './features/Features31.jsx';
 import Features32 from './features/Features32.jsx';
 import Features33 from './features/Features33.jsx';
 
-class Features extends Component {
- render() {
- return (
+function Features(props) {
+ return (
  <div>
  <Features01></Features01>
  <Features02></Features02>
@@ -73,7 +72,6 @@ class Features extends Component {
  <Features33></Features33>
  </div>
  )
- }
 }
 
 export default Features