I'm very new to React.js but exploring it I expected something that I'm not able to do.
Say that I have a component:
var SampleComponent = React.createClass({
render: function() {
return (
<div>Hello</div>
);
}
});
Is this the only way to add it to the DOM?
React.render(
<SampleComponent />,
document.getElementById('content')
);
I hoped I would be able to do something like this directly in HTML after having defined the component:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<SampleComponent />
</body>
</html>
Am I missing something? Thanks
No, using React.render() is the "only way" to do it.
You might be expecting something along the likes of Webcomponents where you can define you custom elements and put those in your HTML but that's not the way React works (yet perhaps).
There is however a library called x-react where you can register those types of elements, but still it's JavaScript powered and not straight up HTML.
In a typical app you would have a high-level controller-view component mounted to the DOM this way, but that component would contain a hierarchy of child components in its render method to build up the structure of your interface. This is the idea of composable views which is an advantage of react. These child components can be used directly within the jsx of the parents' render methods in the same way you had hoped, so you really only have to call React.render once on the top-level component.
Related
I am working on a web app. which has magnolia as CMS. i am still new here but i will explain the scenario.
magnolia is providing the index.html which has reference of the components.But for some of those components it also provides some additional html content. this additional content has to be shown inside the particular component's template. refer following for better understanding.(remember this is inside the index.html)
<my-component>
<div> this division has to be shown inside the my component template.</div>
</my-component>
I have tried following approaches till now.
trying to use - this apparently does not work as i have learnt recently that the angular is not the master of root template(index.html). so ng-content never works. correct me if i am wrong.
using shadow dom view encapsulation. I am not expert in this, but setting viewencapsulation = shadowdom and defining slot inside the component template fulfills my purpose. The only issue with this approach is the scope of this shadow element. it will be inside the shadow root which has its own scope so no global styles are applied inside it. i had to import all the global css for each such component, which makes the main.js go crazy in size.
can someone please suggest me if there is any better or other solution to this problem?
Have you tried using Input() values for that component?
index.html
<my-comp [myInputs]="'My Input HTML <b>Content</b>'">
your receiving component…
<div [innerHTML]="myInputs"></div>
On my side, I use <ng-content></ng-content> inside the component where I want to put my dynamic content.
Ex:
<app-help-tool>
<span i18n="##pictoTable_helpPictoList">Click on a picto to see its description.</span>
</app-help-tool>
And in HelpToolComponent.ts:
<div
class="help_content"
*ngIf="this.isVisible && this.helpService.isHelpOn()"
[#showHideHelp]
(click)="showHideHelp()"
>
<ng-content></ng-content>
</div>
The result is to put the span content into the div of the component.
I'm not really sure what is happening when the component tries to find the div, but here is my render and my div.
HTML:
<div id="app"></div>
Render function:
Meteor.startup(() => { ReactDOM.render(<App />, document.getElementById('app')); });
I get this error in the console: Error: Target container is not a DOM element.
I also put a console.log after my render function trying to find the div id but returned = null.
What packages have you got installed?
if you've still got blaze-html-templates or templating, remove them both and replace with static-html
Otherwise Meteor will render the html as a blaze template some time after startup. (Also if you're using React, you probably don't want to ship Blaze to the client as well!)
See http://archive.is/g20il#selection-399.104-399.186
Hard to see without your full html but your script tag to the .js script should be after the div id "app" tag.
Something that's always confused me is how many React examples show everything as components. But's let's say I only need to include some simple HTML alongside my components, like:
class Homepage extends Component {
render() {
return (
<Container>
<Hero />
<Features />
<div className="copyright">Copyright Some Company Name.</div>
</Container>
);
}
}
The div element will never be more than static text.
Should the <div> be moved into a pure component? Or is it ok to simplify the Homepage component by adding plain HTML this?
Sure it's ok. all in all it's HTML in the end. React components are set of html elements when you call the render function.
One rule of thumb i follow is: create a new component when you think a new responsibility is in order.
That div is a component just like any other, except it is a "primitive" one. There should be no problem mixing the primitive components from HTML with your own custom components.
I am using js-beautify (the html-beautify option) to format html that is being displayed on my page, it displays but it's collapsing all the html to 1 line which is obviously not ideal because it's a pain to read. It is basically trying to format HTML as Javascript because the actual html beautify is not being applied.
I'm using it in react as below inside a specific component file for that item does anyone know how to fix this?
import htmlBeautify from 'js-beautify'
const htmlString = htmlBeautify(renderToStaticMarkup(<Component />))
export default () =>
<Example staticMarkup={htmlString}>
<Component />
</Example>
Update:
<Example/> is another component that renders out a bunch of additional stuff like a markdown description.
I'm using https://github.com/alexlande/react-style-guide to create a styleguide and passing the static html markup to staticMarkup prop to display rather than just showing the react component which in this context isn't particulary useful.
I'm very new to React.js but exploring it I expected something that I'm not able to do.
Say that I have a component:
var SampleComponent = React.createClass({
render: function() {
return (
<div>Hello</div>
);
}
});
Is this the only way to add it to the DOM?
React.render(
<SampleComponent />,
document.getElementById('content')
);
I hoped I would be able to do something like this directly in HTML after having defined the component:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<SampleComponent />
</body>
</html>
Am I missing something? Thanks
No, using React.render() is the "only way" to do it.
You might be expecting something along the likes of Webcomponents where you can define you custom elements and put those in your HTML but that's not the way React works (yet perhaps).
There is however a library called x-react where you can register those types of elements, but still it's JavaScript powered and not straight up HTML.
In a typical app you would have a high-level controller-view component mounted to the DOM this way, but that component would contain a hierarchy of child components in its render method to build up the structure of your interface. This is the idea of composable views which is an advantage of react. These child components can be used directly within the jsx of the parents' render methods in the same way you had hoped, so you really only have to call React.render once on the top-level component.