Skip to content

Instantly share code, notes, and snippets.

@gaearon
Last active February 13, 2024 09:46
Show Gist options
  • Save gaearon/faa67b76a6c47adbab04f739cba7ceda to your computer and use it in GitHub Desktop.
Save gaearon/faa67b76a6c47adbab04f739cba7ceda to your computer and use it in GitHub Desktop.
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 })
);
});
@lantonini-sbe
Copy link

is it possible to remove the React component (clicking on a button for exemple and emptying the div) and reload it (clicking on another button...) without reloading the page ?

@hieulm2k
Copy link

Thank you!

@JPGITHUB1519
Copy link

👍 Thank you!

@white-os
Copy link

nice

@clearbucketLabs
Copy link

I'm Just approaching the world of JS and react. This simple example let me. understand how powerful this framework is. Amazing.

lol you're a kid, this is normal thing, no need to get excited

typical toxic indian i see....

@tundealan
Copy link

Thank you

@hr-sobuj
Copy link

How I use React in Django template only one page?

@w8krl
Copy link

w8krl commented Jun 28, 2021

Very nice, thank you

@MaxdAyala
Copy link

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

hi~

@bajoski34
Copy link

👍👌

@Sureshbarathi
Copy link

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

@Ochukzy18
Copy link

Please can anyone help Me? am having problem with React

@hekeyas
Copy link

hekeyas commented Nov 26, 2021

太强了

@frankiejay69
Copy link

sweet thanks for the tips

@iamshacky
Copy link

iamshacky commented Nov 27, 2021 via email

@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

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

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

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

@josue-fdev
Copy link

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

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

pretty nice!

@Ashik-Sarker
Copy link

Button does not show on my screen

@Piggyback13
Copy link

< нормал >

хорош

@eganproject
Copy link

amazing

@christian-go3
Copy link

Cool!

@Chrissiku
Copy link

Amazing

@Meet-7777
Copy link

Can we use functions instead of classes to load components?

@lxxxxx-oss
Copy link

帅的呀~

@AndyIsAMan
Copy link

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

谢谢你

@creativoloco
Copy link

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

It seems to be great.

@DarrenSem
Copy link

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

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

@0rigin-c0de
Copy link

awesome

@cc-ww
Copy link

cc-ww commented Feb 6, 2023

so niubility

@ckalaimani
Copy link

in the return statement if add html tags I am getting syntax errors

@ckalaimani
Copy link

can you please show an example with tags rendered with latest functions tags

@RobertRodes
Copy link

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

Same as root.render(React.createElement(LikeButton));. Because of the earlier const e = React.createElement.

@clovis739
Copy link

hi,
thank you

@ryoalstarsoft
Copy link

It's very helpful to understand React advantage.

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