Is hot reloading possible while mounting react components into our Django template?
As part of improving our UX, we are adding react component to our page to bring dynamic content on every customer interaction.
I have successfully set up the react inside our Django and placed bundle.js into a static path using Webpack. Now using Webpack watch we are able to load the latest changes on the page.
In this setup, we can't bring hot reloading and source in the browser devtools console to debug and speed up our development.
Note: The application is not a SPA also not a Restful design for now.
Related
I have a question.
I am making an Universal React App and I understand the concept.
We take the best of the CSR and the SSR method to make a commun code for the front-end and the back-end.
We also split the element of a web page (HTML, CSS and JS) to the side who manage it the best.
So I did like this: the HTML is rendered by the back end and the CSS and JS by the front end on the browser.
That is on development mode because i use Webpack for bundle management and on this mode, i use a plugin to inject the css directly to the DOM by style markup (style-loader for HMR support)
But here's the trick, Webpack recommend extracting the css files to separates files on production mode. (by html-webpack-plugin and mini-css-extract-plugin)
So I need to inject the separate css files to the DOM by the link markup.
My question is doesn't it break the whole concept of Universal (Isomorphic) app by giving the CSS to the back end?
What is the configuration of an Universal React App on production mode?
Thanks in advance for your response.
Unfortunately I can't share the website in question, I just hope someone can steer me in the right direction without seeing either it or too much of the code.
The React Native(iOS only) app is built with;
react 16.0.0-alpha.12
react-native 0.47.1
The website is built with;
React 16.0.0
Babel is set up correctly, and babel-polyfill is baked in too.
Description
The use-case is that we need to load, say, the FAQs page from the company ReactJS-based site in the mobile phone app's webview component.
However, the webview does not load the bundle.js for the website. CSS, HTML ect loads, but not the React bundle. Running JS inline in a script tag as a test works, but only if I remove the bundle.js file from src.
So something about the ReactJS build does not play nicely when loaded in a RN Webview. The site loads just fine via the mobile phone browsers however.
The particular use case I'm looking at is running a single page application at the root path / of a domain, and having a statically rendered blog at /blog.
I've already checked out the advice at https://www.gatsbyjs.org/docs/path-prefix/, however I'm not entirely sure how this would interact with the React app running at /
Is there a way to get React Router in the React app to support handing over to Gatsby?
Gatsby is just React so yes :-)
Build your SPA & blog both with Gatsby. Put the entry to your SPA at src/pages/index.js and it'll be served at /.
If you need client-only routes, you can set those up like this: https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating-client-only-routes
Gatsby is basically CRA with some additional features to make it easy to build websites.
I'm attempting to integrate React components into our Angular 1.5.x application. I've been successful thus far in learning webpack and utilizing webpack-dev-middleware and webpack-hot-middleware; however, I'm running into a problem when using an external copy of React.
ngReact expects to find copies of React and ReactDOM. In addition, loading Angular and our controllers, directives, etc. takes precedence. To avoid loading multiple copies of React, I set the external property in webpack.config.js.
Now that React is externalized, it doesn't appear Hot Reloading works anymore. The terminal updates, HMR is connected according to the browser console, but the component on screen is not reloading.
Is there a workaround?
I am having a video js component in my react project. I am also using marker plugin on video.js. Every component in my project gets Hot Reloaded whenever I make any change in them, but my videoJS component doesn't get hot reloaded. For example: If I make any change in markers then it doesn't get reflected on webpage as hot reloaded. I have to refresh webpage everytime I make any change in videoJS. What should I do?
Videojs is base on jQuery, it's not a React component.
You could have a try with:
https://github.com/video-react/video-react