Create an embeddable widget using React - javascript

I have a small form component built using React that I want to make into an embeddable widget for use on other pages. I believe I heard Babelify can help accomplish this, but I'm honestly drawing a blank on how to get this working. I used Babelify to create a bundle.js of the form component, but sticking that on to a blank HTML page using <script src='bundle.js'></script> didn't do anything. So clearly I am either misunderstanding something or am just...totally lost.

Created an embeddable widget with react by following this tutorial http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6

Related

Is react easy to integrate with already-created html and css files

I'm working with some developers to create a website, and I want to know if React will work if I hire someone to create the html and css first, and then have another person integrate react with those templates
Is react integratable in this situation, or does react have to be used from the get go? I am a python programmer, so I have no clue how react works lol
The main advantage of React is being able to generate HTML based on JavaScript code, if the HTML code is already done I'd find it kind of pointless to use React.
I am just a 2nd year student but I'd recommend to use React from the get go.
It should technically be possible to integrate react with already existing html/css files, just like you can manually alter the html and css files in your react project’s public folder, but you dont really provide a good reason for doing so. It might be easier, and more sustainable for maintaining the project to simply move your existing Html into a react project. If you dont have an actual good reason to use react for this project (like for example having primarily react-experienced developers on the team or needing to use specific react libraries and functionalities), there is no real harm in developing a website with plain html, css, and js.

How to add React to an already built website?

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.

Add a separate HTML file into create-react-app

I know react is for Single Page Application. I have already build a complete application. I have a particular 3rd party integration that requires javascript and css files. I cannot add those external scripts as it breaks my entire application by overriding css and js.
I need to have a separate admin.html file which can have its own css and javascript tags. I do not want any conflict with my react app which renders on index.html
I tried to eject create-react-app and add a new admin.html.
https://github.com/facebook/create-react-app/issues/1084#issuecomment-568550609
But it uses only one page(index.html). This will not help me because I need completely a separate html file which I can import any javascript or css freely without any conflict on my index.html
Currently the possibility I thought was to create a separate react application just to render to this admin.html. So that there won't be any conflicts between javascript and css. But I want to know if there is an alternate way that I can achieve it in create-react-app. If so, simple example would be greatly appreciated.
PS: I need to redirect from one of components in my application to this new view admin.html with some data

how to use Vue with wordpress

I've been learning wordpress and I'm trying to figure out how to use Vue with wordpress. I'm currently just trying to do the basic CDN vue or link the vue file so that I can do basic things to interact with my page. Not worrying about vue components or anything that will be way more work if it works at all with wordpress lol.
Is this even possible to do with wordpress? Think the basic js fiddle's for vue where your js file interacts directly with the page (not components compiled and stuff). I just want to do simple things like make my navbar change color if its not at the top, basic stuff with buttons, etc. I really like using vue so if I can I'd rather use vue than have to make straight js to do these things. But I cant figure out how to get it set up.
Thanks.

Can a website work with both simple JavaScript and React

I have a design of the website which contains javascript without any framework. Now I'm in the development process and I need to use javascript framework like react for a specific process. so, will it work or I need to transform everything into a framework? I'm working with Laravel and how can I make multiple react app for a single website inside Laravel framework?
Yes. This is exactly the problem that Facebook aimed to solve by creating React. They initially only used React for parts of the comment system and their chat.
You can create a React component and use it in only part of your website. You just need to provide it a place for it to mount. That is, a div where you are mounting your application.
Check the documentation for React DOM and the integration guide for more information about rendering to the DOM. The basic idea is to create your component then use the following code to render it:
ReactDOM.render(element, container[, callback])
From the React docs:
React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React.
To integrate React with other libraries or frameworks, check out the React integration guide: https://reactjs.org/docs/integrating-with-other-libraries.html
Yes you can create global window renderer functions from react library and call it from vanilla js or some other third party library like jquery .You just need to include the minified js to call that function.
Some thing like below on react
const app = (parameter1,parameter2) => (
<YourComponent parameter1={parameter1} parameter2={parameter2}/>
);
window.renderYourComponent = function (p1, p2) {
render(app(p1,p2), document.getElementById('your_div'));
}
On your vanilla js
<script type="text/javascript" src="your_minified_react.js"></script>
<div id='your_div'></div>
window.renderYourComponent("p1","p2");
Everything will be rendered inside 'your_div' and you can work separately on react
Yes, You can make multiple React apps for a single website inside the Laravel framework.
The Laravel often uses a blade template for frontend UI.
What you need to do is build the React app and integrate the built React app with the Laravel blade.
You can copy the whole built contents of the React app into the Laravel home blade, for example.
In addition, inside React to import custom Javascript files, you can use several ways like script tags and also webpack copy module.

Categories

Resources