We Keep Coding

Can I have two separate files? React.js and HTML file

I am learning React.js, and I have noticed that each React file appears to be just a mix of JavaScript and HTML. But I enjoy having distinct files for my HTML and JS. So, I am wondering if I can have these two independent files but also include a link (or something) in either the HTML or JS file, so that they may communicate with one another.
Thank you.

React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props.
In other words, it was more simple than we separate html and render it on React, as a component.
If we still want to access html page via any page that created with react, we can did it via a href.
For any other way like import it (maybe), i think it was too complicated because of some reason.
Hope you will more understand about react with this react docs link

React is used to build single-page applications which is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run . this single HTML page is index.html located in the public folder (if you're using create-react-app)

Using React Flow Dynamically

I'm new to React and was wondering if anyone had experience in using the React Flow library dynamically? As far as I can tell, the main way of using this library is to create a static .tsx file in the src/components/ directory.
I would like to use a JSON entry from my MongoDB and dynamically create a flow chart based on certain flags/values within React. If this is possible with React Flow, I'd appreciate a link or help! Thanks in advance.

That's absolutely possible.
As you can see in this example, node and edges are expressed as JSON: https://reactflow.dev/examples/edges/
You can modify the elements array at any time and add furhter elements by just adding simple JSON nodes.
On top of that you can autolayout your diagram: https://reactflow.dev/examples/layouting/

Check out the save and restore docs. You can save (or build your own) JSON representation of a workflow, then restore it as needed.
https://reactflow.dev/docs/examples/interaction/save-and-restore/

Is it possible to embed a dynamic react component into a separate html file without downloading a file or using a server?

I am using React to make a SPA where you can customize a component (font size, color, etc) and then embed the customized component into a website. Is there a way to bundle the component and express it as HTML where the user can simply copy and paste it into their website?
I have tried using iframes, but it is fetching data from a URL. I'd like to avoid this if possible since the module/component/widget needs to be copy/pasted.
I have also thought about using webpack to bundle the component using the UMD library target, but I can't find a way to bundle the file in realtime- where it includes the user's customizations.
Lastly, I have thought about rendering a html string which is about as close as I have got to what I want, but it does not include any styles.
This is what the component I am trying to make universally modular looks like:
<LinearLayoutDiv>
<ModuleHeader />
<ModuleStoryDiv>
{[...Array(numStories)].map((val, index) => {
const data = generateFakeArticle();
return <ModuleStory
key={`module-story-${orientation}-${index}`}
picture={data.picture}
summary={data.summary}
distance={data.distance}
author={data.author}
orientation={orientation} />
})}
</ModuleStoryDiv>
<ModuleFooter />
</LinearLayoutDiv>
I am using styled components and a theme provider to pass user customizations down to the component.
How should I go about doing this? Any advice would be greatly appreciated.

How I ended up doing it was like so:
There are two parts I need to create a fully modular widget: HTML and CSS.
I am using styled components. So to get the CSS, I used their secret internal stylesheet to get all the styles of my application. This part is inefficient since I have no way of telling which CSS belongs to the module and which CSS is part of my application so it just takes all of the CSS. Now I have a CSS stylesheet that can be embedded in a style tag.
import { __DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS as scSecret } from 'styled components';
const CSS = scSecret.StyleSheet.instance.tags.map(tag => tag.css()).join('')
To get the HTML I made the top most component of the module into a secondary root, and used .outerHTML to get the HTML of itself and its children.
document.getElementById('secondary-root').outerHTML
With both the HTML and CSS I can create a simple HTML doc that can be copy pasted into a separate website.

vuejs include javascript library in spa

i'am creating spa application using vuejs and i find out that i have 3 option in loading my javascript library like bootstrap.js or jquery.js and other javascript library:
1.
first is by include all javascript library that i will use in my application in index.html where my vuejs application will live but i find that there is some javascript library that not working to well
ex: there is some javascript library that calculate page height by selecting some div with specific id="page-container", but that div not loaded when page is rendered from server, so at that moment the javascript will throw error since id="page-container" not exist yet.
2.
second is by adding it like this to all my javascript library js
// before you use your files in some components,you should package them
// your local files
export default { //export your file
your_function(){ // defined your function
...
}
}
// now your can use it
// your component file
<script>
import local_file from 'your_file_relative_path'
//now you can use it in the hook function
created(){ //or other hook function
local_file.your_function() //call your function
}
</script>
but that mean i need to change every javascript library that i use...
3.
third is by adding it using npm, and just in the vue component import it, it works okay and feels more natural but not all my javascript library are in npm, some of them is admin template related that i bought from themeforest and will never be in npm.
so which one is a better way or maybe there is much more better way that those 3 option that i find out? its hard to find any tutorial or discussion that mention adding other javascript library to spa vuejs most of them just put a bootstrap into index.html and done.

Well, If your library exist in NPM, then this is the best option, because then you have this option to import only the part of the script that you need for certain components, for example, fontawesome library, you can import only the icons that you need instead of import all of them!
but if your script is not in NPM, the best option is to run your script in beforeMount or beforeCreate of the component that the script needed to run.
the third way which is add the link reference on html is not really suggested, since it will be global and will reduce the performance.

Override ember component template with template from addon (in-repo)

I want to create an in-repo addon to make certain modifications (styles, templates, etc.) to an existing ember app in an encapsulated way, but I'm having troubles overriding the templates.
Right now, I'm trying to override an existing component template with the template from a component with the same name in the in-repo addon. My code looks something like this:
// my-app/app/templates/components/foo.hbs
<h1>Some headline<h1>
// my-app/app/lib/my-addon/app/templates/components/foo.hbs
<h1>A different headline<h1> // -> this never shows up
I've tried a lot of switching around the template structure (like putting it in /addons or /app and linking to the template in different ways, but without success. My problem is that ember never uses the template from the addon.
If the component within the addon has a different name, like foobar.hbs, I can call it without a problem.
I'm currently looking through the source code and docs, trying to make sense of this. Is this even accomplishable the way I imagine it?
Thanks a lot!

You'd have to create the component in your ember app which, initially, will mean the component renders as nothing as it's a brand new, empty component. Then you'd dig into your node_modules, find the component file and template and copy over what you'd need to work with.
Here's an example. While working with ember-cli-jsonapi-pagination, I need to customize the paginate-collection component:
I created the component in my application.
I looked at the source: https://github.com/BookingSync/ember-cli-jsonapi-pagination/tree/master/app
In components/paginate-collection/component.js I copied over the component code, but you should be able to import it as well.
In components/paginate-collection/template.hbs I modified the template as needed.