We Keep Coding

how do you get a pre-loader html code to work in reactjs App?

Below is the html code:
<div id="loader" class="show">
<div class="loader"></div>
</div>
It is pasted in the index.html default js component of a react app (web app) and the problem is that app just loads and loads, it never reveals the contents of the page.

I guess you removed the div with id="root" because react render component inside that div. So the solution is you can place it inside id="root" div in your index.html file and it will show on loading and disappear whenever your first react component renders.
<div id="root">
<div id="loader" class="show">
<div class="loader"></div>
</div>
<div>

Prevent Vue.Js replace Twig content in mounting DOM element

Version: Vue 3.0.5
index.html.twig
<div id="app">
<div class="text-center">
<h3>My text rendered in Twig</h3>
<div class="jumbotron text-center">
<example></example>
</div>
</div>
</div>
</div>
entry-file.js
import { createApp } from 'vue';
import Example from './components/Example.vue'
createApp(Example).mount('#app');
components/Example.vue
<template>
<div>
<p>This is text from VueJs component</p>
</div>
</template>
<script>
export default {
name: 'example'
}
</script>
Currently, when I access the page Vue completely removes Twig content inside #app div and replaces it with text from the component.
My question are,
How can I keep initial #app content rendered by Twig and additionally compile <example></example> component by Vue?
Is it OK practice to mix it this way? The problem is that I already have blocks/widgets and custom logic based on backed variables in Twig and it will be far too long to rewrite everything in Vue

Vue.js remove div from component

I'have this template in my vue.js 2.0 app:
<template>
<div>
<button class="xs:w-full md:w-auto button-main" #click="show = true">
Open filters
</button>
<portal to="port-details">
<div class="modal" v-if="show">
<p>jow</p>
</div>
</portal>
</div>
</template>
I need to remove the surrounding div because otherwise my markup looks weird. But if I remove that I obviously will get this error:
Component template should contain exactly one root element
How could I accomplish this?

Trying to create a Login form but not able to render Form inside a div

I want a form should be inside a div .i am using Reactjs
Div structure
<div class="header header-primary text-center" id="content1">
<h4>Login using ADID credentials</h4>
</div>
<script src="#Url.Content("~/Assets/JS/Tutorial.jsx")"></script>
Form design which should be inside the the above div
<form onSubmit={this.handleSubmit}>
<div class="content">
design structure....
</div>
</form>
ReactDOM.render(
<NameForm />,
document.getElementById('content1');
);
But the form design is not getting inside the div any idea would be appreciated..

Is there a way to dynamically insert html form into a div in AngularJS?

I'm working on an AngularJS data collection "wizard" app.
In this wizard there will be around 100 steps.
I'm looking for a way to dynamically insert/merge different html forms within each wizard step markup.
The structure of the wizard itself looks tike this:
<wizard on-finish="finished()">
<wz-step title="Step 1">
<h1>This is Step 1</h1>
<p>Need to dynamically insert a form here</p>
<input type="submit" wz-next value="Proceed to Next Step" />
</wz-step>
<wz-step title="Step 2">
<h1>This is Step 2</h1>
<p>Need to dynamically insert a form here</p>
<input type="submit" wz-next value="Proceed to Next Step" />
</wz-step>
<wz-step title="Step 3">
<h1>This is Step 3</h1>
<p>Even more steps!!</p>
<input type="submit" wz-next value="Finish now" />
</wz-step>
</wizard>
I would much rather have a 100 separate little html files (one for each step), then put all of markup in a single wizard.html file.
Ideally, I would like to have, let's say, a file named step1.html, who's contents would be dynamically loaded into the wizard.html in place of
<p>Need to dynamically insert a form here</p>
Is there an AngularJS way of doing this?

You can use ngInclude
<p ng-include="step1.html">Need to dynamically insert a form here</p>

there are 2 ways one is by using ng-include as stated above, make sure your template is in srtipt tags ie
<script type="text/ng-template" id="myTemp">
//your html
</script>
and in ng include
<div ng-include="myTemp"></div>
or if you have html hardcoded in a js variable and want to append to a div whose id you knwow then the following will do:
<div id="myDiv">
</div>
and your variable is
var myHtml="<div> hello dude <span ng-repeat="obj in objects"></span><div>"
then in this case you need to compile this html so that angular directives in this case ng-repeat can function.
var compiled=$compile(myHtml)($scope);
angular.element("#myDiv").append(compiled);

Check out Angular-UI's ui-router.
https://github.com/angular-ui/ui-router
It expands upon routes adding support for a state-machine and nested routes which may get you where you are going.