React's goal is in many ways to render HTML in a web page.
React renders HTML to the web page by using a function called
ReactDOM.render[].
The Render Function
The ReactDOM.render[] function takes two arguments, HTML code and an HTML element.
The purpose of the function is to display the specified HTML code inside the specified HTML element.
But render where?
There is another folder in the root directory of your React project, named "public".
In this folder, there is an index.html file.
You'll notice a single Display a paragraph inside an element with the id of "root": Hello The result is displayed in the Run Example » Note that the element id does not have to be
called "root", but this is the standard convention. The HTML code in this tutorial uses JSX which allows you to write HTML tags inside the JavaScript code: Do not worry if the syntax is unfamiliar, you will learn more about JSX in the next chapter. Create a variable that contains HTML code and display it in the "root" node:
Run Example » The root node is the HTML element where you want to display the result. It is like a container for content managed by React. It does NOT have to be a The root node can be called whatever you like: Display the result in the
Hallo Run Example » So is this the only way to render raw html with reactjs? I know there are some cool ways to markup stuff with JSX, but I am mainly interested in being able to render raw html [with all the classes, inline styles, etc..]. Something complicated like this: I would not want to have to rewrite
all of that in JSX. Maybe I am thinking about this all wrong. Please correct me. Action
answered May 31, 2019 at 11:22 YuciYuci 24.5k9 gold badges102 silver badges109 bronze badges 1 You could leverage the Note:
I'm the author of the module and just published it a few hours ago. Please feel free to report any bugs or usability issues. answered Jun 21, 2015 at 0:02
Mike NiklesMike Nikles 1,39010 silver badges16 bronze badges 8 I have used this in quick and dirty situations:Example
ReactDOM.render[
The HTML Code
Example
const myelement = [
];
ReactDOM.render[myelement, document.getElementById['root']];
Name
John
Elsa
The Root Node
id='root':Example
element:ReactDOM.render[
// //facebook.github.io/react/docs/tutorial.html
// tutorial7.js
var converter = new Showdown.converter[];
var Comment = React.createClass[{
render: function[] {
var rawMarkup = converter.makeHtml[this.props.children.toString[]];
return [
{this.props.author}
html-to-react npm module.// react render method:
render[] {
return [
Chủ Đề