What is the equivalent in Wagtail for importing another apps model? In Django I simply do from app.models import SomeModel but I can't figure out how to get hold of another apps model in Wagtail since they all inherent from wagtail.wagtailcore.models import Page
If I wanted to import class HomePage(Page) from home app in blog app... I've tried things like:
from project_name.home.models import HomePage
But it return a ModuleNotFoundError: No module named 'project_name.home'
Related
What's the best way to add Google Analytics to a Vite React project? I have added the gtag.js script into the index.html file within the Vite project. It does track users in Real Time but doesn't seem to track anything else. This makes me think the code should be in App.jsx instead...
Because when I go to GA I am getting the message saying there is No data received from my website yet.
I have looked into react-ga but this seems to only work with UA-XXX tags where as I am using GA v4 which uses IDs of G-XXXX
Has anyone added a v4 GA tag into a React project?
Update
Just found https://www.npmjs.com/package/react-ga4
This is how I have it now...
import React from 'react'
import ReactGA from 'react-ga4'
import {Helmet} from 'react-helmet'
import Footer from './components/base/Footer'
import Header from './components/base/Header'
import Form from './components/Form'
import Table from './components/Table'
ReactGA.initialize('G-XXXXXXX')
ReactGA.send('pageview')
function App() {
return (
...
But still getting the message "No data received from your website yet." in GA
It's best to use a vite plugin for that. Currently Vite-plugin-radar is available and it supports 7+ analytics providers ( Google Analytics, Google Tag Manager, Facebook Pixel, Linkedin Insight, Yandex Metrica, Baidu Tongji and Microsoft Advertising)
Another advantage with vite plugins is that mostly they are framework agnostic, so you can use them with Vue, React, Svelte or other vite supported frameworks.
I'm registering a service worker from create react app and I'm getting good scored in lighthouse for being a progressive web app and I can install the web app from the Chrome address bar, all is good
BUT when I update the content on the website nobody gets to see it unless they clear their cache, which they don't. How can I ensure they see the latest content while still getting a top score on lighthouse for being a progressive web app?
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import { Router } from './router';
import './scss/index.scss';
ReactDOM.render(<Router />, document.getElementById('shell'));
serviceWorker.register();
To service worker update your cache, you'll need to close ALL TABs of your website.
Another way is use this package to do this job.
https://www.npmjs.com/package/#loopmode/cra-workbox-refresh
It will do all the job for you, and after install the new files, it shows up a button allowing you to update the page
My application needs to have two pages, one landing page and one admin page. Both pages use different themes. I could not integrate css and js files of these two pages in a single page application.
const jquery = require('mdbootstrap/js/jquery-1.11.3.min.js');
window.jQuery = jquery;
window.$ = jquery;
require('mdbootstrap/css/bootstrap.min.css');
require('template/homePage/js/plugins/owl-carousel/owl.carousel.css');
require('template/homePage/js/plugins/owl-carousel/owl.theme.css');
require('template/homePage/js/plugins/owl-carousel/owl.transitions.css');
require('template/homePage/css/animate.css');
require('template/homePage/js/plugins/YouTube_PopUp-master/YouTubePopUp.css');
require('template/homePage/css/preloader.css');
require('template/homePage/css/style.css');
require('mdbootstrap/js/popper.min.js');
require('mdbootstrap/js/bootstrap.min');
require('template/homePage/js/plugins/vivid-icons');
require('template/homePage/js/plugins/owl-carousel/owl.carousel.js');
require('template/homePage/js/plugins/YouTube_PopUp-master/YouTubePopUp.jquery.js');
require('template/homePage/js/plugins/wow/wow.js');
require('template/homePage/js/plugins/jquery.easing.min.js');
require('template/homePage/js/main');
this sample import not good work. And I need outside link css and js.
I have two problem one of them is $(...).scrollspy is not a function
other WOW is not a function.
None of them work in sequence.
When you want to import resources into your React app, you use imports like this:
// Import with variable assignation
import logo from './logo.png';
// Import without variable assignation
import './css/index.css'
You can read more about this in the create-react-app documentation:
https://create-react-app.dev/docs/adding-images-fonts-and-files/
You can read more about ES7 imports here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
I see what you're trying to do is to add libraries and resources to your app component, like if were a common html file, you can't do that in React , you need to find an implementation.
It is not recommended to use jQuery with React, because you use jQuery to write code in a simple and fast way to create complex implementations, now those complex implementations can be made with just React and JS, that is what React is designed for.
Now I understand that you might want to use jQuery even do is not that recommendend, so here is a link where you can get jQuery to install it as a plugin for your React app
https://www.npmjs.com/package/jquery
You would be able to import it to your component like this:
import $ from "jquery";
To use Bootstrap in your React app you check out the documentation of an implementation of Bootstrap for React, react-bootstrap:
https://react-bootstrap.github.io/getting-started/introduction
I’m am new to React and need to understand a concept.
In my text editor there is a source file. Within the source folder I have created component folder as recommended by other sites. This comp folder holds my modules in jsx.
My question is, How do i import my app.js file to component folder modules. App.js is set as export default.
I believe i should use: import App from 'app'; and for other modules import ... from './src/comp/file.jsx'.
is any of this correct.
Your app.js doesn't export app.js per se, it exports whatever you export, probably a class or a function called App.
You probably don't want to import that (except maybe the root index.js did), but you might import another import another component into App, with something like:
import Header from './components/Header'
That's assuming that you have a file called index.js in the subfolder components/Header and that file is exporting the Header class/function.
Trying to convert an existing Single Page App into React web app, incrementally, start by utilizing material-ui Snackbar i.e. http://www.material-ui.com/#/components/snackbar
Assuming existing App resides in single-app.js
And trying to add Snackbar react app , and transpiled it successfully using Babel in server side as react.app.js
Below is a inside react.app.js (before transpiled)
import React from 'react';
import {render} from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import Snackbar from 'material-ui/Snackbar';
render(<Snackbar />, document.getElementById('react_container'));
I included both single-app.js and react-app.js within index.html
How can I open Snackbar coded within react-app.js i.e. from single-app.js or from script tag (either javascript / babel) within index.html -- in order to display message?
Many thanks.