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@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/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);
ReactDOM.render(
e(LikeButton, { commentID: commentID }),
domContainer
);
});
@LongLS

This comment has been minimized.

Copy link

commented Jul 5, 2018

Good!

@evanschaba

This comment has been minimized.

Copy link

commented Sep 7, 2018

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

@scaventum

This comment has been minimized.

Copy link

commented Oct 31, 2018

how to do this JSX way?

@AlirezaAkbarix

This comment has been minimized.

Copy link

commented Nov 2, 2018

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

@Garrywolf

This comment has been minimized.

Copy link

commented Nov 12, 2018

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

@vovkind

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

commented Feb 7, 2019

I visited from React website!

@rodolphopicolo

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

commented Apr 3, 2019

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

@PogromistDev

This comment has been minimized.

Copy link

commented Aug 3, 2019

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

@rajeshflr2016

This comment has been minimized.

Copy link

commented Aug 16, 2019

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?

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.