I have some questions about React 18. I updated my project from React 16 to 18, but I see only server-side html-markup without hydrate in client side.
Is it correct use same App components in (client) hydrateRoot(rootNode, <App/>) and (server) renderToPipeableStream(<App {...props} />)? Or I can use different components for example: for server-side use App.tsx with html template, for client-side use other App.tsx without html template?
renderToPipeableStream there is bootstrapScripts field. What Does that field receive? (builded client-side js, source of entry-point) Because before I didn't do it
In my project there is jss package and now it doesn't work with renderToPipeableStream and also in client-side. What should I do it to fix that?
Related
I've got a (small) React app (vanilla create-react-app), that I would like to appear in a modal (bootstrap or similar) on another site. Is there a library that will simplify this process?
Specifically, the entire use case is that if my Javascript file is loaded (and just one javascript file), it will insert a "Click Me" type call to action, and when clicked my App component will be loaded into a new modal. It will need the CSS (for the app) to be included in some form as well.
I think all of this (excluding the call-to-action which is fairly simple) could be done during Babel/Webpack transpilation but I can't find anything off-the-shelf that seems to do this.
This functionality is built into ReactDOM.render. Simply add an id to your element.
For example:
<!-- index.html -->
<script src="url/to/react/build/asset" as="script" />
<div id="button-and-modal"></div>
Then to render your react app inside the div:
// index.js
import { render } from 'react-dom';
import App from './App'
function renderReact() {
const element = document.getElementById('button-and-modal');
render(<App/>, element)
}
document.addEventListener('DOMContentLoaded', renderReact);
Then your react app would look something like this:
const App = () => (
<div>
<Button/>
<Modal/>
</div>
)
You can also code the button and modal outside of the react app and only have the modal content rendered by react. If you want to do that, then follow the same directions but add the javascript for the button+modal inside the renderReact function.
You can use for example https://direflow.io/ to build your react app as a web component that you can render anywhere on any site.
Using your current project you can do
direflow create
cd <project-name>
npm install
and then
copy your whole app in folder into direflow-components so your project tree would look like:
/public
/src
/direflow-components
/<project-name>
// leave here only index.ts from example and copy all your project files here
index.ts
component-exports.ts
index.ts
react-app-env.d.ts
.eslintrc
...
If needed you can change
...
component: App,
configuration: {
tagname: 'example-component',
},
...
to your component that you want to render and tagname by which app will be accessible.
After all that you just do
npm run build
copy direflowBundle.js from build folder to your website
and render your app on some website like so:
<body>
<script src="./direflowBundle.js"></script>
<awesome-component></awesome-component>
</body>
I feel like I deal with this issue at every Front End job. It's definitely not easy, but I've found a number of ways to do it. I've tried the bundling idea you suggested but that one gave me the hardest time. The easiest way imo without a lot of hassle is to host your react app on a blank web page, then load it into an iframe where you need it.
At my last job, we wanted to migrate our shopify website to react, but with the way the shopify architecture was set up at the time, it made it difficult to us host a server-side rendered react app. So we built the web pages using Next.js and then deployed it to Vercel. We then inserted this as an iframe into the shopify website. It worked beautifully.
I want to build a SPA on the client site, which supports a plugin concept.
You should be able to copy a package inside a specific folder and the server should load this component after a restart. This plugin should work without any information stored inside the base program.
I need to dynamically load a component by name. I do not have a map of all possible components. How can I load a component by only knowing its name?
you can check out React.lazy. This helps with dynamic loading components which you want, but with this you need to wrap it to Suspense, because component will load not immediately.
// This component is loaded dynamically
const SomeComponent = React.lazy(() => import('./SomeComponent'));
<Suspense fallback={<Spinner/>}><SomeComponent/></Suspense>
So I have a users.js JSX file with some exported component:
... return <MainContainer keywords="users"> export default Users
when using SSR/SSG, I get the users HTML (just a bunch of <li> tags) in the browser as expected
the browser also receives a .next/static/chunks/pages/users.js with digested/lower-level representation of that React component as client-side js. This gets imported via <script> in HTML.
AssumptionL that js file is for rendering, CSR-style, of the users dataset, into HTML.
Because it contains stuff like
_components_MainContainer__WEBPACK_IMPORTED_MODULE_3 ... react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxDEV"])("li", ....
So, clearly the js in <script> can create <li> elements as well as the server. I think it can create the whole page content, if executed.
Question: why the apparent duplication of effort? Does the browser, with SSR/G, get BOTH HTML and js and js ALSO runs producing HTML - surely not? I am using getStaticProps in my users.js
If the assumption why we have a compiled/digested React js (under .next/static) in the browser, is incorrect, then why does NextJS need this file pulled in via <script> ?
Next.js is used for server-side rendering of the react apps. React with another framework like angular and vue.js are client-side frameworks, they run in browsers but there are some technologies to run this framework on the server-side, and next.js is a solution for running react application server-side. It also makes react development very simple features of Next.js are:
Server rendering React Apps.
Automatic code splitting and lazy loading.
Built-in CSS support.
Hot Reloading support.
I am re-building our website as a single page React application, but for simplicity would like to keep the landing page the same. The landing page is a large static HTML file (with some JS for animations, bootstrap, etc). A large amount of imports and animations makes it difficult to migrate the entire page as a react component.
I want to add the website under /public/landing-page.html, with all of the extra CSS/JS/assets in the same location. Is there a way to assign a route to serve this page rather than render a route in the usual React way?
This seems like a common problem for people migrating their sites from JS/HTML to React.
You can serve this landing-page.html and corresponding CSS/JavaScript/Asset files as static resources. That is, make Node.js as plain web server for these files, without any connection to React.
For example, if Express framework is used in Node.js, it is pretty easy to make the configuration:
const express = require('express');
const app = express();
...
app.use(express.static(path.join(__dirname, 'public'), { 'extensions': ['html', 'js', 'css', 'png'], 'maxAge': '7d' }));
Then, you can open http://<your-website>/landing-page.html, without any React stuff.
If you want to achieve this within the react structure without using the node server, you should try using
<div __dangerouslySetInnerHTML={{__html: yourSiteAsAString }} />
if you want a safer approach, try using sanitize a node module which sanitizes the html before passing it to __dangerouslySetInnerHTML
I want to use html instead of jsx code.
Various issues regarding this are:
1)How to take my html out of the component file and put it in the other file and then import that file in to my component file ..
2) We are using the proxy server to externalize the html template in current angular project. I want to achieve the same result with react.
3) Is there any way to separate out the JSX code in template so that i can be externalize using some proxy being a http resource.