Skip to content

Instantly share code, notes, and snippets.

@gaearon

gaearon/index.html

Last active Nov 22, 2020
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Multiple React components on a single HTML page
Raw
index.html
<!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@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
</html>
Raw
like_button.js
'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);
ReactDOM.render(
e(LikeButton, { commentID: commentID }),
domContainer
);
});
@LongLS

This comment has been minimized.

Sign in to view
Copy link

@LongLS LongLS commented Jul 5, 2018

Good!
@evanschaba

This comment has been minimized.

Sign in to view
Copy link

@evanschaba evanschaba commented Sep 7, 2018

evans was here, also evans says react is cool, so far
@scaventum

This comment has been minimized.

Sign in to view
Copy link

@scaventum scaventum commented Oct 31, 2018

how to do this JSX way?
@AlirezaAkbarix

This comment has been minimized.

Sign in to view
Copy link

@AlirezaAkbarix AlirezaAkbarix commented Nov 2, 2018

JSX is more understandable for both beginner and react-native developers I think...
@Garrywolf

This comment has been minimized.

Sign in to view
Copy link

@Garrywolf Garrywolf commented Nov 12, 2018

world can develop faster and faster by the passion of you.
@vovkind

This comment has been minimized.

Sign in to view
Copy link

@vovkind vovkind commented Dec 12, 2018

How can we import external components?

Let say:

import Main1 from './Main1';

class MainContentByCity extends React.Component {
render() {
return (

          <!--  <Main1 /> -->
        </div>
    )
}

};

const domContainer = document.querySelector('#root');
ReactDOM.render(MainContentByCity, domContainer);
@tomVlt

This comment has been minimized.

Sign in to view
Copy link

@tomVlt tomVlt commented Jan 15, 2019

Thank you @gaearon ! React documentation may be the most accomplished one I ever seen on a NodeJS project.

I believe one needs to clearly undestands React & ReactDOM pckg APIs allongside nodeJS transpiling/compiling/rendering steps to truly master the library in a broader software ecosystem.

Despite the fact CRA, Next, Gatsby or jsx synthax are genius abstractions, they may all hide the powerfull opportunities plain React has to offer.
@Lalithadev

This comment has been minimized.

Sign in to view
Copy link

@Lalithadev Lalithadev commented Jan 31, 2019

When I execute the code , on the click of first like button I get you liked comment number undefined. Only for the first like button. Did anyone encounter the same issue?
@cittrarasu

This comment has been minimized.

Sign in to view
Copy link

@cittrarasu cittrarasu commented Feb 4, 2019

why use cdn links....

go staight to npm start . after use to react....

cdn react use to same for jquery... So best way react learning for npm install after use react
@jacobkim9881

This comment has been minimized.

Sign in to view
Copy link

@jacobkim9881 jacobkim9881 commented Feb 7, 2019

I visited from React website!
@rodolphopicolo

This comment has been minimized.

Sign in to view
Copy link

@rodolphopicolo rodolphopicolo commented Feb 9, 2019

How can we import external components?

Let say:

import Main1 from './Main1';

class MainContentByCity extends React.Component {
render() {
return (

          <!--  <Main1 /> -->
        </div>
    )
}

};

const domContainer = document.querySelector('#root');
ReactDOM.render(MainContentByCity, domContainer);

For this example, you cannot use import because browsers would not understand it, you would have to use a transpilator before on server side, like babel, but, again, for this example, using react on a existing web page, regardless if it uses react on server side, you could not consider the use of the transpilator.
@crmlnt

This comment has been minimized.

Sign in to view
Copy link

@crmlnt crmlnt commented Mar 19, 2019

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

This comment has been minimized.

Sign in to view
Copy link

@gavranha gavranha commented Apr 1, 2019

Learning React in a hurry. This example 'add react to a website' + React Devtools for Chrome was great for understanding the simplicity and power of React. Thank you.
@gringer44

This comment has been minimized.

Sign in to view
Copy link

@gringer44 gringer44 commented Apr 3, 2019

What just happened? I was able to follow along and get this tutorial.
@PogromistDev

This comment has been minimized.

Sign in to view
Copy link

@PogromistDev PogromistDev commented Aug 3, 2019

e(LikeButton, { commentID: commentID }),
could be written as
e(LikeButton, { commentID }),
@rajeshflr2016

This comment has been minimized.

Sign in to view
Copy link

@rajeshflr2016 rajeshflr2016 commented Aug 16, 2019 •
edited

This correct way for JSX

Need to take ComponentDidMount

componentDidMount() {
document.querySelectorAll('.like_button_container')
.forEach(domContainer => {
const commentID = parseInt(domContainer.dataset.commentid, 10);
ReactDOM.render(,domContainer);
});
}

how to do this JSX way?
@dagolinuxoid

This comment has been minimized.

Sign in to view
Copy link

@dagolinuxoid dagolinuxoid commented Sep 30, 2019 •
edited

Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags
Edit and update: It looks like the div can't be inside p =)
@jossa2

This comment has been minimized.

Sign in to view
Copy link

@jossa2 jossa2 commented Oct 24, 2019

HTML+JAVA+JavaScript +JSX+ES6+CSS.... React is an amazing.....MESS!
@mohammedabdulai

This comment has been minimized.

Sign in to view
Copy link

@mohammedabdulai mohammedabdulai commented Nov 1, 2019

HTML+JAVA+JavaScript +JSX+ES6+CSS.... React is an amazing.....MESS!

@jossa2, React is a front-end library so it's all HTML, CSS, and vanilla JavaScript (you don't have to use JSX or ES6). Plus you get to choose whatever language for your backend which can also be JavaScript. It's not that MESSY!
@chris-monahan

This comment has been minimized.

Sign in to view
Copy link

@chris-monahan chris-monahan commented Nov 6, 2019 •
edited

Given some of the comments here it might be worth noting the tutorial that references this gist

https://reactjs.org/docs/add-react-to-a-website.html

This is just one example of how to quickly add React to a site, without a toolchain. So without any JSX, Babel etc. There are other examples that cover other ways including JSX, and it is noted that this would not be the approach to using multiple components when building a SPA to scale.
@coder054

This comment has been minimized.

Sign in to view
Copy link

@coder054 coder054 commented Nov 28, 2019

HTML+JAVA+JavaScript +JSX+ES6+CSS.... React is an amazing.....MESS!

That's because you can not understand it and impossible to using it
@xingorg1

This comment has been minimized.

Sign in to view
Copy link

@xingorg1 xingorg1 commented Jan 20, 2020

thanks for your demo
@rajeshflr2016

This comment has been minimized.

Sign in to view
Copy link

@rajeshflr2016 rajeshflr2016 commented Jan 21, 2020

@luciagirasoles

This comment has been minimized.

Sign in to view
Copy link

@luciagirasoles luciagirasoles commented Jan 21, 2020

is there a way to include hooks in this easy example? At least two (useState, useEffect)
@LuizFrra

This comment has been minimized.

Sign in to view
Copy link

@LuizFrra LuizFrra commented Jan 30, 2020

What the commentID at line 30 was supossed to do ? I thought that it should set a id in the button element, but it didnt.
I made it setting the id in the render Function, like this :
return e('button', { onClick: () => this.setState({ liked: false}), id: 2 }, 'You Liked It.');
but the way that was showed at line 30, doesnt worked.
@alighali85

This comment has been minimized.

Sign in to view
Copy link

@alighali85 alighali85 commented Feb 15, 2020 •
edited

will react re-render if other parts of the DOM change? let's say we have

<div id='vue-app'></div>
<div id='othe-apps'></div>
<div id='react-app'></div

if vue changes its view part of the app, will React rerender and wipe off the vue view?
does React watch the entire DOM or just react div container ?
@charlos

This comment has been minimized.

Sign in to view
Copy link

@charlos charlos commented Feb 22, 2020

To be sure that you have understood correctly, modify this example to work JS 100%.
I share the code.
@Murbin

This comment has been minimized.

Sign in to view
Copy link

@Murbin Murbin commented Feb 25, 2020

very nice!
@Aljal

This comment has been minimized.

Sign in to view
Copy link

@Aljal Aljal commented Mar 3, 2020 •
edited

@LuizFrra

What the commentID at line 30 was supossed to do ? I thought that it should set a id in the button element, but it didnt.
I made it setting the id in the render Function, like this :
return e('button', { onClick: () => this.setState({ liked: false}), id: 2 }, 'You Liked It.');
but the way that was showed at line 30, doesnt worked.

commentID at line 30 is a props to the LikeButton component, as you can see this props is used line 13: this.props.commentID. The purpose of this props is only to differentiate the LikeButton components
@JasonMustard

This comment has been minimized.

Sign in to view
Copy link

@JasonMustard JasonMustard commented Jun 20, 2020

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
@Andyvlz

This comment has been minimized.

Sign in to view
Copy link

@Andyvlz Andyvlz commented Jul 22, 2020

Very nice!
@adriantoddross

This comment has been minimized.

Sign in to view
Copy link

@adriantoddross adriantoddross commented Sep 4, 2020

This is amazing and still a wonderful example. Thank you!
@shawon3719

This comment has been minimized.

Sign in to view
Copy link

@shawon3719 shawon3719 commented Sep 7, 2020

Had build a complete project with react and find it amazing.! <3
@AgeevDmitryMinsk

This comment has been minimized.

Sign in to view
Copy link

@AgeevDmitryMinsk AgeevDmitryMinsk commented Sep 22, 2020

< нормал >
@Chrisdjya

This comment has been minimized.

Sign in to view
Copy link

@Chrisdjya Chrisdjya commented Nov 20, 2020

Amazing how fast it works !
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.