I already have a built website with Express and I wanted to use React just in some pages. How is the best way to add it having all the resources that I have using the create-react-app?
I know I can add each script to the HTML file, but that is kind of error prone and laborious. I just wanted to be able to do all the import and manage the files the same way I do with an application using create-react-app.
If you only want to use React in some already existing pages, I would suggest you to go through importing the script as React documentation talks about here. It gives you a nice and short example on how to do add react components to existing html pages. You only need to import the react and react-dom dependencies once in your html entry-point (probably index.html), then in each page you only import the required components.
The other alternative is to follow the idea in this guide, to build the app using both create-react-app and express. You would want to move all the html code into React components and handle everything from React, and you will be able to manage all the project structure like you wish. But I believe this is more error prone and a lot of effort, if you only want to add React to build some componentes in just some pages.
Related
I am Using vue 3 with CLI Build tool. Going to import my component on .net page.
I need to check my components on browser without using a router library. Actually it was stand alone components
Is there any way. In Vue 2 i have used gulp build tool and fractal tools for checking my components in broswer. After migrate to vue-3, i can't find solutions for that.
If you route the page with Java or .Net, Just create a route page with .Net and import the component into your new page. Hope this will work
if you just need to test a component and your vuejs project is starting rely on jsp or .net. just make a new route and import the component into the route page you make. you could see the way in vuejs.org quick start part. https://vuejs.org/guide/quick-start.html#without-build-tools[enter image description here]1
My company has a few different websites, mostly with a react front end but a couple without.
We want to build a cookie bar that can just be imported and used anywhere...basically it should be framework independent and ideally an npm package.
I'm not entirely sure if this is possible but I had the idea to construct the cookie bar package with react...it would be super simple, just a few components with jsx and styling and once that is all done, use webpack to compile it all into vanilla javascript that is independent of react and can just be inserted on any site with any or no framework.
All of the html of the cookie bar (that would have originally been written as react components / jsx but then compiled into vanilla JS with webpack) which will then be injected into the html of the website where the script is included.
Is this possible?
All I can find online is people making react components as npm packages but this is not exactly what I am looking to achieve.
Thanks in advance!
This is absolutely possible.
If the target page doesn't have React in it at all, you may want to bundle it as a tiny app and mount it as in the answers here. If it does have React, you can probably find away to use the existing React by putting it on window in the other code (import React from 'react'; window.React = React.
For bundling a single component or a few components, you may have better luck with Rollup than Webpack (they have different use-cases; both are bundlers, but Rollup has some niceties for bundling libraries specifically). This example may be useful (it also includes Sass, Storybook, and some other extras that you might or might not need). This would give you more flexibility and possibly smaller bundles, but would mean you'd still need a React app to actually import and use the components, as above.
Since your project scope is quite small it should not import or embed the whole react library.
I strongly encourage you to check Preactjs (https://preactjs.com/) which lets you write your code in JSX but has a much lighter footprint (3kB atm). Your component will load way faster, especially for mobile users
Then bundling with tools recommended in the other answers (rollup is great) is the way to go
I've successfully edited the body (e.g. changing background-color) in React through App.css when it's imported into App.js for a standard React app.
However, on this project, I decided to incorporate Reactstrap and, while I'm able to edit certain tags in App.css, the body isn't one of them. Did I overlook something and/or is there a vanilla solution to this?
Thanks!
I am trying to implement micro-frontends but my company is using React as the only front-end technology. I was hoping if I can do it by serving React components on a URL just as suggested in https://micro-frontends.org/ but it uses web components. Since all the ecosystem is on React can I serve a React component (and only that bundle code on a URL) like, https://my-website/components/table?theme="black".
Purpose of trying this:
Main repo will have most of the major dependencies already loaded. (no need of repeated code like react/react-dom etc)
Shadow DOM is creating event bubbling issues.
There are multiple repos for each team and all of them use same component library.
I'm using create-react-app-typescript to create a react application. What I'm trying to do is to build the application, then include the resulting js and CSS files into another application (which is a very old application that doesn't know anything about React or any new JavaScript features)
My problem: I want to be able to pass information to my React application; for example, I want to specify an array to be used to display information, but the issue is that as soon as I add a <script> tag to React's js file, it will try to create the application under the target div element.
Not sure if it's a good idea, but I try to avoid ejecting my React application as much as possible so that I wouldn't need to maintain everything myself.
One solution that I thought of was to create an item in localStorage and then read it from my React app, and this somehow solves the issue, but is this a good way to do it?
And then there's another issue: I want to be able to pass a callback from the external application to be called from my React app to cause something to happen in my external application, and this cannot be done using localStorage
Any help or tip is deeply appreciated,
Thank you
You don't have to eject the project at all. One possible solution (maybe not the best) is just to change your index.js to expose your application. Thus instead of directly "rendering" the app do something like following
// needed imports
window.startFromOutside = function(element, callback) {
ReactDOM.render(<ReactApp cb={callback} />, element)
}
That way you can bootstrap your react application from outside passing any properties you want.