Say I have the following component in my web app:
class About extends React.Component {
render() {
return (
<div className="about">
/* place html here. */
</div>
)
}
}
I'm currently practicing my understanding of raw html/css. So ideally, I want to be able to write up this about section somewhere else. E.G., an about.html and an about.css, an about.html with some inline css, or a <style> tag. Or most ideally, lower down in the same file that defines this component.
The idea is I want to separate my practicing of hmtl/css from the React specific / JSX code.
Is this possible? and if so what is the least friction route assuming that this is not a very mission critical project and I'm fine with taking a less secure or more hacky approach?
If you want, you can declare a variable elsewhere or write a different component separate from this block and bring it in. But at the end of the day, you're still going to be writing JSX. You can still use .css to style your JSX the same as you would html, there's really no difference.
Related
I'm setting HTML returned from the API in my Angular component:
<div [innerHTML]="content"></div>
content in this example is something like this:
<table>
<tr>
<td>[audioPlayer:file.mp3]</td>
</tr>
</table>
Now I would like to inject the actual component inside the table cell.
If I make a certain container, I can create the component with createComponent:
audioPlayerComponentRef: ComponentRef<AudioPlayerComponent>;
#ViewChild('placeholder', { read: ViewContainerRef }) container;
const factory: ComponentFactory<AudioPlayerComponent> =
this.componentFactoryResolver.resolveComponentFactory(AudioPlayerComponent);
this.audioPlayerComponentRef = this.container.createComponent(factory);
Then I can inject it into a container in the template:
<div #placeholder></div>
However, going back to my original goal, I can't use such a container, as the component needs to be injected into a specific position into an innerHtml block.
I've been brainstorming all day, but I can't see any way to achieve this.
Generally speaking, this is contrary to the way Angular works. [innerHTML] is not parsed for any Angular functionality. No component selectors or even a ViewContainerRef can be found there. Rather, even remotely suspicious HTML, CSS and JS is removed as a security measure as Angular only trusts its own templates.
So InnerHTML is a no-go. But I was in the same boat myself and have written a library to solve this exact problem. With it, you can freely load dynamic components into strings without compromising security. If you're still stuck on this, you might wanna have a look at it.
I'm building landing pages with the amazing Gatsby framework (version 2.16.1).
Everything would have worked perfectly, except that I can't find a way to make changes to the HTML that's being loaded before any script is loaded (the 'over-the-fold' initial HTML).
For example, if I change the HTML's background color in Gatsby - Users can wait up to 5 seconds since the 'over-the-fold' initial HTML is displayed, until the background color is applied.
I know about gatsby-browser.js and the ability to make global CSS files, but that's no use for me as I use a different color or background-picture for each landing page.
My question is: Can I affect the first loaded HTML (differently for each Gatsby page) in Gatsby or React?
Illustration: I color the background color as yellow, but the flow is like this -
HTML is first displayed (background=while) -->
3-5 seconds later -->
all scripts are loaded, and background changes to yellow
#ksav answered the question in a comment to the question! Thank you!
The answer is using a function called onRenderBody under the gatsby-ssr.js file, as explained in the article that was mentioned: https://www.gatsbyjs.org/docs/custom-html/
exports.onRenderBody = ({setBodyAttributes,pathname,}) => {
// Differentiate between the landing pages here
switch(pathname) {
case 'landing_page_a':
case 'landing_page_b':
}
// Affect the HTML that gets loaded before React here
setBodyAttributes({
style: {
backgroundColor: 'red',
},
});
}
The funny thing is, that I've already bumped into this article before, but didn't think it was relevant because it talked about server-side-rendering, and I know that Gatsby is server-less. After #ksav 's comment, I re-read it, and understood that the server-side-rendering happens during Gatsby's build process, and not during run-time (i.e. when the user enters the landing pages).
Can I affect the first loaded HTML (differently for each Gatsby page) in Gatsby or React?
Yes, you can directly in the JSX React code. Google has documentation how you can optimize CSS delivery so your above-the-fold content is always styled correctly. It comes down to using inline CSS for all your components above the fold. With inline CSS your HTML elements are always styled when they are loaded because the styling is part of the HTML code.
See the React documentation for how to handle inline styles in React.
An example from the Gatsby tutorial:
src/pages/index.js
import React from "react"
export default () => (
{/* inline CSS */}
<div style={{ margin: `3rem auto`, maxWidth: 600 }}>
<h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
</div>
)
I have written my own table module. Calling it in HTML code looks like this:
<my-table [data]="variableWithArr"></my-table>
Now, pretty nice table is being displayed. Cool. But what if I want to have a progress bar in some column of table? I thought that I could put a HTML code with component selector as value, for example bootstrap progressBar, like this:
for(let record of variableWithArr) {
record[0] = '<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>';
}
Unfortunatelly, Angular displays only a HTML code but dooes not interpret it as component selector, so I receive something like that in DOM:
<td><ngb-progressbar type="danger" [value]="100"></ngb-progressbar></td>
How to fix it?
This is not how Angular works - you can't insert arbitrary HTML (innerHTML or otherwise) and expect that directives will be picked up & applied. Making Angular work this way would require shipping entire compiler to a browser and would defeat the whole purpose of all the great optimizations that can be done with the ahead-of-time (AOT) compilation.
tl;dr; nope, you can't do this and this has nothing to do with the ng-bootstrap project, but rather with design decisions behind Angular.
By looking at the docs you need to use the property [innerHTML], but to be clear only use it when you trust the code!!
So should be something like this:
<td [innerHTML]="record"></td>
I'm prototyping the new homepage for my personal website. I made the following pen: Homepage on React #1.
I want the website to use React, not necessarily because it will benefit from it but primarily because I want to learn React.
If you take a look at the pen, you can see a lot of components looking just like this:
/**
* The main title.
*/
const Title = () => <h1 className="Title">Chuckeles</h1>;
or this:
/**
* The row component. Places items, you guessed it, in a row.
*/
class Row extends React.Component {
render() {
return <div className="Row">{ this.props.children }</div>;
};
};
These components don't do anything special. They just hide the underlying HTML. My question is this. Should I have components like these? Or should I just use the HTML tag, for instance in case of the Title component, use
<h1 className="Title">Chuckeles</h1>
directly?
It might seem that these "small" components are a waste of space, but they are not.
Imagine tomorrow one of the designers wants to change the class of your Titles. If it is just one component, it can be changed there, and there won't be any "hunt" to find all the usage for it. While if you had inlined it everywhere this would be a nightmare.
The basic idea is to make your "lowest level" components contain HTML, they do the "dirty" work (DOM, style), Your higher components should do composition and logic.
I try not to mix HTML type tag and other components in one component. This makes it so that I have a lot of small HTML components, but they are very easy to maintain, and I get a nice separation of business components, and presentation components.
You can go that approach but I prefer the props to spread it like:
return <div {..this.props}>{ this.props.children }</div>;
and then the div you can reuse also in other places.
What you have mentioned here are typically referred to as either Dumb components or stateless functions. They are perfectly fine and should be always preferred over static html so long as there's a re-use/enhancement possibility.
I want to implement AngularJS's ng-include statement into my website to reduce code redundancy, but having trouble getting it to fully work. Currently, my index.html page is calling pageLayout.html My index.html is calling pageLayout.html successfully, but when adding a <h1> tag in index.html I cant put it on top of the pageLayout.html content that I call. Does anyone have any ideas?
Here is the link: http://plnkr.co/edit/uarelZgzmITJXg2pYXfg?p=preview
I have also tried using a directive like the following: http://plnkr.co/edit/VmAO47l7RMXTGYYFFgLB?p=preview but still having issues.
Thanks!
The transclusion strategy is set to element not to true so you can not insert extra content.
Moreover the content is wiped everytime the template value changes
And using transclusion with ngInclude does not make sense
I would rather use a directive with transclusion (or bind the title) if you want to avoid code duplication, something like
directive('pageContainer',function(){
return {
template:'<div class="divSize" ><h1>{{title}}</h1><div ng-transclude></div></div>',
scope:{
title:"#"
}
}
})