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

LongLS commented Jul 5, 2018

Good!

@evanschaba

This comment has been minimized.

Copy link

evanschaba commented Sep 7, 2018

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

@scaventum

This comment has been minimized.

Copy link

scaventum commented Oct 31, 2018

how to do this JSX way?

@AlirezaAkbarix

This comment has been minimized.

Copy link

AlirezaAkbarix 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

Garrywolf commented Nov 12, 2018

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

@vovkind

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

jacobkim9881 commented Feb 7, 2019

I visited from React website!

@rodolphopicolo

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

gringer44 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

PogromistDev commented Aug 3, 2019

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

@rajeshflr2016

This comment has been minimized.

Copy link

rajeshflr2016 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?

@dagolinuxoid

This comment has been minimized.

Copy link

dagolinuxoid commented Sep 30, 2019

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.

Copy link

jossa2 commented Oct 24, 2019

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

@mohammedabdulai

This comment has been minimized.

Copy link

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.

Copy link

chris-monahan commented Nov 6, 2019

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.

Copy link

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.

Copy link

xingorg1 commented Jan 20, 2020

thanks for your demo

@rajeshflr2016

This comment has been minimized.

Copy link

rajeshflr2016 commented Jan 21, 2020

@luciagirasoles

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

alighali85 commented Feb 15, 2020

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.

Copy link

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.

Copy link

Murbin commented Feb 25, 2020

very nice!

@Aljal

This comment has been minimized.

Copy link

Aljal commented Mar 3, 2020

@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

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.