We Keep Coding

Using a single layout template for React pages?

I am just beginner in Reactjs and trying to use single layout components e.g. NavBar, MainContent and Footer. However, I am not sure how should I define properly. There are several options:
index.html
index.js
App.js
On the other hand, for Login page I want to use another template which has neither NavBar nor Footer. So, How should I define such a layout pages properly? Could you just give a basic and proper example? I implemented all layout seperately, just need the proper places implementations.
enter image description here

Embed a React component into a HTML site, without affecting the parent site's styling and without an iframe

I have a React component that I want to build and insert into an HTML site. The component has some styling, which if imported will conflict with the HTML site's styling. I have a limitation that does not allow me to use an iframe. Does anyone know of any solutions that will allow me to scope the React component's css to only that component?

react - building a tooltip with createPortal without adding an element sibling to 'root'

i am trying to build a tooltip component with ReactDOM.createPortal to protect it from z-index and overflow bugs, but the issue is - the component will live in an external library and imported to different projects. therefore, i cannot add a div to render the tooltip into in the index.html file to write something like ReactDOM.createPortal(<Tooltip />, document.querySelector('#tooltip')).
what are the possible ways on overcoming this? can i somehow dynamically create a div outside the body inside my component?
thanks a lot for all the answers!

Can I add react app to app.html and not to index.html

Assume I already have a static web page index.html with its content.
Now after building a React app, I want to create an href link to /app.html where I would put <div id="root"></div> tag, so only when the user navigates to the app page, the React app will be rendered.
How can I set that?
What I did try is basically as presented above: the react app Pablic directory contains an index.html with static content, and inside an href to app.html with a div tag with id="root".
But I get this error:
Target container is not a DOM element.

Maybe you can use CDN rather than create-react-app. Then you can add at any HTML file you want. Of course, this will lose some benefits from CRA.
https://reactjs.org/docs/cdn-links.html

Apply css style to all primeng dialogs in my angular app

I am using prime ng dialog all over my angular application. I can change each specific dialog style by using ng-deep. For eg I have contact us page for which I have these files:
contact.html
contact.component.ts
contact.css
So I place the below css in contact.css and it changes the contact us dialog title bar color.
:host ::ng-deep .ui-dialog .ui-dialog-titlebar{
background-color: red
}
I want to do this for all the dialogs in my application, how can I do this? I placed the same css in style.css file in src folder and it didn't work.

So angular components by default employ a very handy strategy of Style Encapsulation which makes it so that styles don't bleed out into other components and cause unwanted effects.
You can utilize ng-deep like you have to allow styles defined within it to be inherited by child components of where it's specified.
However for things to be globally inherited you'll want to define them highest up in the order of inception so those styles cascade down to selectors below. In a default angular application that's not using SCSS or another pre-processor one of the easiest ways to do this is to add them to one of the first files initialized that hosts the child components such as index.html or app.component to allow components initialized afterwards to inherit them when they're rendered.
Hope this helps, cheers!