I am trying to integrate with React (create-react-app)

furtivepygmyFeb 21, 2020

I have set up the environment correctly with all the css, js, etc folders in my public folder and with all the script tags and link tags added in the index.html file.

In the React side, I am able to render texts and headings pulled out from one of the demos. However, elements like headers and footers appear as full white even though I am able to hover over the links underneath. So the source code is there and running but all the DOM elements are plain white.

Please find my index.html attached. The React application renders under the div with the id of root, and I am confident that this is working as I can render styled text with Canvas classes through the React app. However, things that require js render but appear as plain white.

There must be an issue with the jQuery files or the JS files. Please assist.

Thanks.

furtivepygmyFeb 21, 2020

Apparently I cannot upload the html file. So here it is.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

    <link
      href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Raleway:300,400,500,600,700|Crete+Round:400i"
      rel="stylesheet"
      type="text/css"
    />
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="stylesheet" href="css/swiper.css" type="text/css" />
    <link rel="stylesheet" href="css/dark.css" type="text/css" />
    <link rel="stylesheet" href="css/font-icons.css" type="text/css" />
    <link rel="stylesheet" href="css/animate.css" type="text/css" />
    <link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />

    <link rel="stylesheet" href="css/responsive.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta name="theme-color" content="#000000" />
    <meta
      name="Seychelles Golf Club"
      content="Seychelles Golf Club online experience with membership system"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the <code>public</code> folder during the build.
      Only files inside the <code>public</code> folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running <code>npm run build</code>.
    -->
    <title>Seychelles Golf Club</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run <code>npm start</code> or <code>yarn start</code>.
      To create a production bundle, use <code>npm run build</code> or <code>yarn build</code>.
    -->

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="/__/firebase/7.9.0/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="/__/firebase/7.9.0/firebase-analytics.js"></script>

    <!-- Initialize Firebase -->
    <script src="/__/firebase/init.js"></script>

    <!-- External JavaScripts
  	============================================= -->
    <script src="js/jquery.js"></script>
    <script src="js/plugins.js"></script>

    <!-- Footer Scripts
    ============================================= -->
    <script src="js/functions.js"></script>
  </body>
</html>

SemiColonWebSTAFFFeb 24, 2020

Hello,

Canvas is not readily compatible with React and is nowhere mentioned or indicated about this in the Item Descriptions. Unfortunately, since this is not an Out-of-the-Box functionality of Canvas, any further customization or feature/functionality enhancements is your responsibility as we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy .

Additionally, the Blank Page Issue is an indication that something is wrong with your Integrations resulting to a jQuery Conflict which is causing this error. Simply disable the Page Loading Transition, by finding and deleting or commenting the following code in the js/functions.js File:


SEMICOLON.initialize.pageTransition();

and add the following CSS Code:


body:not(.no-transition) #wrapper { opacity: 1; }

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.