Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Multiple React components on a single HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<p>
This is the first comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="1"></div>
</p>
<p>
This is the second comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="2"></div>
</p>
<p>
This is the third comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="3"></div>
</p>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
</html>
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked comment number ' + this.props.commentID;
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
// Find all DOM containers, and render Like buttons into them.
document.querySelectorAll('.like_button_container')
.forEach(domContainer => {
// Read the comment ID from a data-* attribute.
const commentID = parseInt(domContainer.dataset.commentid, 10);
const root = ReactDOM.createRoot(domContainer);
root.render(
e(LikeButton, { commentID: commentID })
);
});
@MaxdAyala
Copy link

MaxdAyala commented Jun 29, 2021

It would be nice to fix the odd nesting of the HTML elements so that you don't confuse people.

A div element doesn't nest in a paragraph element and will terminate it. (Try inspecting the output in borwser dev tools, for example, or use an HTML validator.)

There are obviously lots of valid alternatives you could use instead.

@Gym-Mentor
Copy link

Gym-Mentor commented Jul 13, 2021

hi~

@bajoski34
Copy link

bajoski34 commented Jul 23, 2021

👍👌

@Sureshbarathi
Copy link

Sureshbarathi commented Jul 29, 2021

I'm using the same, but how to install npm packages

@Ochukzy18
Copy link

Ochukzy18 commented Oct 6, 2021

Please can anyone help Me? am having problem with React

@hekeyas
Copy link

hekeyas commented Nov 26, 2021

太强了

@frankiejay69
Copy link

frankiejay69 commented Nov 27, 2021

sweet thanks for the tips

@iamshacky
Copy link

iamshacky commented Nov 27, 2021

@Mr-Mesut-OZTURK
Copy link

Mr-Mesut-OZTURK commented Dec 14, 2021

Thank you very much 💯
I think JSX is more understandable for me!

@fabiamcunha
Copy link

fabiamcunha commented Jan 30, 2022

achei um pouco complexo com o CDN .

@shirgans
Copy link

shirgans commented Feb 8, 2022

I'm getting "You liked comment number undefined"
only on the first button. When I click #2 or #3 it works well.

Even if I switch between #2 and #1, and click #2 (which is now the first in the list) - I get the same "undefined" message.
Any clue why?

@abelstam12
Copy link

abelstam12 commented Mar 12, 2022

Using this approach, how do you import local components and how do you import thrird party components (charka ui components for example)

@steven-barkley
Copy link

steven-barkley commented Apr 1, 2022

thanks for the simple to follow and helpful reuse of the previous DOC code.

@josue-fdev
Copy link

josue-fdev commented Apr 16, 2022

Question: on line 26 you have domContainer but should that be declared in line 25 or is your way correct and I need to learn something? Any help would be appreciated. Thanks

I wondered the same. Following the docu it should be declared as a root container for each element attributes rendering... but ReactDom is being used as a root container. So, for each element ( being domContainer), render the attribute ( commentID).

It seems to be a different way when elements are outside of the components.

@josue-fdev
Copy link

josue-fdev commented Apr 16, 2022

I'm getting "You liked comment number undefined" only on the first button. When I click #2 or #3 it works well.

Even if I switch between #2 and #1, and click #2 (which is now the first in the list) - I get the same "undefined" message. Any clue why?

Does the first dataset is correctly?

@evatitan
Copy link

evatitan commented Apr 21, 2022

pretty nice!

@Ashik-Sarker
Copy link

Ashik-Sarker commented Jun 1, 2022

Button does not show on my screen

@Piggyback13
Copy link

Piggyback13 commented Jun 14, 2022

< нормал >

хорош

@eganproject
Copy link

eganproject commented Jun 16, 2022

amazing

@christian-go3
Copy link

christian-go3 commented Jun 19, 2022

Cool!

@Chrissiku
Copy link

Chrissiku commented Jun 27, 2022

Amazing

@Meet-7777
Copy link

Meet-7777 commented Aug 20, 2022

Can we use functions instead of classes to load components?

@lxxxxx-oss
Copy link

lxxxxx-oss commented Aug 26, 2022

帅的呀~

@AndyIsAMan
Copy link

AndyIsAMan commented Aug 28, 2022

Thanks very much!

@AndyIsAMan
Copy link

AndyIsAMan commented Aug 28, 2022

root.render(e(LikeButton)); this line i am not understand

@RicoShen
Copy link

RicoShen commented Sep 7, 2022

root.render(e(LikeButton)); this line i am not understand

@wuddy233
Copy link

wuddy233 commented Sep 13, 2022

谢谢你

@creativoloco
Copy link

creativoloco commented Oct 2, 2022

I had no idea it was possible to have as many root elements as you want. Could be considered as bad practice? Does it matter?

@MahdiSohaily
Copy link

MahdiSohaily commented Oct 25, 2022

It seems to be great.

@DarrenSem
Copy link

DarrenSem commented Oct 31, 2022

root.render(e(LikeButton)); this line i am not understand

Read the .js file that sets alias "e" to "React.createElement"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment