Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add React in One Minute
<!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>
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>
<!-- 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>
'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 this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
@gaearon

This comment has been minimized.

Copy link
Owner Author

@gaearon gaearon commented Jun 28, 2018

Adding JSX

This example shows React without JSX.

Adding JSX to a project doesn’t require complicated tools like a bundler or a development server. Essentially, adding JSX feels a lot like adding a CSS preprocessor.

Learn more in this documentation section: http://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

@Rabsoninnora

This comment has been minimized.

Copy link

@Rabsoninnora Rabsoninnora commented Sep 20, 2018

easy to understand thank you, keep it simple!

@geiz

This comment has been minimized.

Copy link

@geiz geiz commented Sep 25, 2018

I just made it here. Thanks! It is exactly what I needed.

@RaufAli

This comment has been minimized.

Copy link

@RaufAli RaufAli commented Sep 26, 2018

Good example. Thanks!

@tasdid

This comment has been minimized.

Copy link

@tasdid tasdid commented Oct 3, 2018

Nice tips, thanks

@hinata4zzahra

This comment has been minimized.

Copy link

@hinata4zzahra hinata4zzahra commented Oct 5, 2018

nice tips,thank you

@sagamydev1

This comment has been minimized.

Copy link

@sagamydev1 sagamydev1 commented Oct 8, 2018

I was wondering how to integrate react bit by bit into already existing ASP.Net MVC project...this save my day

@guajiropa

This comment has been minimized.

Copy link

@guajiropa guajiropa commented Oct 8, 2018

It produces '

== $0' in the HRML view from the Chrom debugger for me

@hnjogu

This comment has been minimized.

Copy link

@hnjogu hnjogu commented Oct 17, 2018

what is the react js script function on that html code

@Edgar256

This comment has been minimized.

Copy link

@Edgar256 Edgar256 commented Oct 21, 2018

Nice insight, Thanks

@skatesham

This comment has been minimized.

Copy link

@skatesham skatesham commented Nov 14, 2018

Very nice!

@CoffeeandTea

This comment has been minimized.

Copy link

@CoffeeandTea CoffeeandTea commented Nov 14, 2018

棒棒哒~

@imvikaskohli

This comment has been minimized.

Copy link

@imvikaskohli imvikaskohli commented Nov 30, 2018

So this means, it's same as we have in Angular js.
Right ???

@nathmart1n

This comment has been minimized.

Copy link

@nathmart1n nathmart1n commented Dec 8, 2018

mine doesn't load anything

@stloc

This comment has been minimized.

Copy link

@stloc stloc commented Dec 20, 2018

Hi,
OK. Now How to use in this simple component an external npm package like https://www.npmjs.com/package/react-content-loader (during componentDidMount loading event for example) ?

https://stackoverflow.com/questions/53871793/add-react-to-a-website-how-import-external-node-module

@stloc

This comment has been minimized.

Copy link

@stloc stloc commented Dec 21, 2018

Hi,
OK. Now How to use in this simple component an external npm package like https://www.npmjs.com/package/react-content-loader (during componentDidMount loading event for example) ?

https://stackoverflow.com/questions/53871793/add-react-to-a-website-how-import-external-node-module

solution : use <ContentLoader.Facebook />
(no example on documentaion)

@andrift

This comment has been minimized.

Copy link

@andrift andrift commented Dec 30, 2018

nice example

@pranaydp

This comment has been minimized.

Copy link

@pranaydp pranaydp commented Jan 3, 2019

Hi there,
need a help i have one chat app code which is in script tag used for html i want to add in my react js file in .jsx format how can i add that can any one tell me ...????

<script type='text/javascript'> (function(){ var widget_id = 'DZkbAxEYPI';var d=document;var w=window;function l() {var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//code.jivosite.com/script/widget/'+widget_id; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);}if(d.readyState=='complete'){l();} else{if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})(); </script>
@vannick

This comment has been minimized.

Copy link

@vannick vannick commented Jan 8, 2019

thank for this example

@suxin2017

This comment has been minimized.

Copy link

@suxin2017 suxin2017 commented Jan 17, 2019

老铁 6666

@jayrc7

This comment has been minimized.

Copy link

@jayrc7 jayrc7 commented Jan 28, 2019

I can't seem to get it to work, I'm getting an Uncaught SyntaxError: Unexpected identifier error for like_button.js line 24. I followed the tutorial line for line but I'm not sure why it's not working. Any advice?

@GuillotJessica

This comment has been minimized.

Copy link

@GuillotJessica GuillotJessica commented Jan 28, 2019

I can't seem to get it to work, I'm getting an Uncaught SyntaxError: Unexpected identifier error for like_button.js line 24. I followed the tutorial line for line but I'm not sure why it's not working. Any advice?

@jayrc7, please provide your code

@zzrez

This comment has been minimized.

Copy link

@zzrez zzrez commented Jan 29, 2019

Is this still working? I just tried on both local server and within an online site and no luck. The React button failed to load, only the html text up to "React is loaded as a script tag." showed. No errors indicated in console either. For both tests I used exactly the same code as provided.

@zzrez

This comment has been minimized.

Copy link

@zzrez zzrez commented Jan 29, 2019

The web unfortunately has many tutorials that do not work, this now joins the crowd. At least the title "Add React in a minute" meant not too much time was lost, in my case about an hour. After Googling I came up with another simple one-page tutorial that worked right away: https://medium.com/@to_pe/how-to-add-react-to-a-simple-html-file-a11511c0235f.

@Lexiebkm

This comment has been minimized.

Copy link

@Lexiebkm Lexiebkm commented Jan 30, 2019

What if we use JSX in like_button.js file which also use ES2015 import statement like so :
import React from 'react';
....
class LikeButton extends React.Component {
...............
render() {
return <button />
}
}
What should we use in the type attribute in the script tag : <script src="like_button.js"></script> ?
To deal with the import statement, we have to use type="module", while for dealing with JSX, we have to use type="text/babel".
Here we have to deal with both : the module statement and the JSX

@adorogensky

This comment has been minimized.

Copy link

@adorogensky adorogensky commented Jan 30, 2019

The example isn't working as is. Had to remove the crossorigin attributes from the script elements to make it work.
Google Chrome | 72.0.3626.81 (Official Build) (64-bit)

@ericndar

This comment has been minimized.

Copy link

@ericndar ericndar commented Feb 4, 2019

Incredibly disappointing that such a simple example meant to showcase how simple this framework can be, does not work.
The fix is simple, but it certainly took more than a minute to figure out.
Add babel to your HTML page.
Add type="text/babel" to like_button script. That's all it takes.
No changes to .js file are needed.

You should end up with:

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel" src="like_button.js"></script>`
@johnmeade-webdev

This comment has been minimized.

Copy link

@johnmeade-webdev johnmeade-webdev commented Mar 14, 2019

I followed everything exactly... several times.... At first I was getting a syntax error, so I added the type="text/babel That took care of the error, but nothing rendered on the page. Then I served it locally in case that was the issue, it again didn't render.

@Peithans

This comment has been minimized.

Copy link

@Peithans Peithans commented Apr 1, 2019

react seems giving me some headach but this tutorial is great

@neoflo

This comment has been minimized.

Copy link

@neoflo neoflo commented Apr 7, 2019

Excellent example, getting all the tooling is just exhausting.
Thank you

@sonphfs

This comment has been minimized.

Copy link

@sonphfs sonphfs commented Apr 9, 2019

Thank you,
First day with react !

@suid0

This comment has been minimized.

Copy link

@suid0 suid0 commented Apr 12, 2019

Nice demo, worked exactly as is for me, just created the two files, drag and dropped the html file onto a chrome tab and bingo.
Chrome: Version 73.0.3683.103 (Official Build) (64-bit)

@goughjo02

This comment has been minimized.

Copy link

@goughjo02 goughjo02 commented Apr 12, 2019

There is a build step - one should use webpack (supported by react). It is explained well here https://stackoverflow.com/questions/19059580/client-on-node-uncaught-referenceerror-require-is-not-defined

and there is a good article here https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75

@xtrywow

This comment has been minimized.

Copy link

@xtrywow xtrywow commented Apr 18, 2019

ty

@joedevon

This comment has been minimized.

Copy link

@joedevon joedevon commented May 4, 2019

Took a glance at the installation docs but haven't tried out this code yet to see how it renders in the end. But since the sample code is a place many newbies go, wanted to point out that I believe your HTML sample can use an accessibility improvement. Headings should not skip levels. So rather than using an <h2>Add React in One Minute</h2> going with <h1>Add React in One Minute</h1> would be accessible. Some people mistakenly choose the header level based on how the output looks, but that should be done in CSS. Incorrectly nested headings can confuse Screen Readers. Any chance to make that change? Thanks.

@ferara24

This comment has been minimized.

Copy link

@ferara24 ferara24 commented May 5, 2019

thanks alot really helpful

@CatherineDesigner

This comment has been minimized.

Copy link

@CatherineDesigner CatherineDesigner commented May 24, 2019

Большое спасибо, для новичка доступное и понятно объяснение. Код читабельный!

@kennycodex

This comment has been minimized.

Copy link

@kennycodex kennycodex commented May 25, 2019

Nice and simple. Thanks!

@abduljeleelng

This comment has been minimized.

Copy link

@abduljeleelng abduljeleelng commented Jun 5, 2019

so interesting. Thanks

@tulshidas

This comment has been minimized.

Copy link

@tulshidas tulshidas commented Jul 10, 2019

thanks

@paythought

This comment has been minimized.

Copy link

@paythought paythought commented Jul 24, 2019

I just started react, and read this, Thanks

@ksh-cloocus

This comment has been minimized.

Copy link

@ksh-cloocus ksh-cloocus commented Aug 2, 2019

thank you!

@jinjidecoco

This comment has been minimized.

Copy link

@jinjidecoco jinjidecoco commented Aug 7, 2019

great

@jakes2255

This comment has been minimized.

Copy link

@jakes2255 jakes2255 commented Sep 25, 2019

wow, this is nice. just included both files and... I was able to use the like button, Thank you for making it this simple....👍

@CASCosta

This comment has been minimized.

Copy link

@CASCosta CASCosta commented Oct 10, 2019

Very nice indeed, keep up the good working.
Thank you

@TDcrew

This comment has been minimized.

Copy link

@TDcrew TDcrew commented Nov 1, 2019

I am having trouble displaying the like button. I have written the tutorial like it said and have also tried just copying and pasting the code above to display the button. Was there some code that needs to be changed for and update?

@rahkee

This comment has been minimized.

Copy link

@rahkee rahkee commented Nov 1, 2019

It sometimes works with or without crossorigin in the <script> tag. So give them both a try!

@yoizfefisch

This comment has been minimized.

Copy link

@yoizfefisch yoizfefisch commented Dec 3, 2019

If you copy/pasted the code above and it doesn't work, make sure you spelled the js file name correctly. This is probably the one part you typed out yourself, at least it was in my case and had me spend 15 minutes comparing my file to the code above.

@avpimblesr

This comment has been minimized.

Copy link

@avpimblesr avpimblesr commented Dec 3, 2019

@yoizfefisch I totally agree. I like to type out code in order to develop my muscle memory, however, I sometimes type an "n" instead of an "m" and an "h" instead of an "n". When I first ran the code it did not work. I then copied and pasted the code and it ran perfectly. It was not necessary to add Babel, as some suggest.

@gunkiddedy

This comment has been minimized.

Copy link

@gunkiddedy gunkiddedy commented Dec 11, 2019

nice one

@basic-bhavya

This comment has been minimized.

Copy link

@basic-bhavya basic-bhavya commented Dec 14, 2019

I just added the given like button on my website and the whole website keeps refreshing endlessly any possible reasons?

@karolina-szlenk

This comment has been minimized.

Copy link

@karolina-szlenk karolina-szlenk commented Mar 16, 2020

Thanks for this tutorial. Imo, very helpful to explain how it works.

@alexthegrd

This comment has been minimized.

Copy link

@alexthegrd alexthegrd commented Apr 7, 2020

very nice thank you

@leopinzon

This comment has been minimized.

Copy link

@leopinzon leopinzon commented Apr 15, 2020

Awsome, lifesaver

@coasterrel

This comment has been minimized.

Copy link

@coasterrel coasterrel commented Apr 30, 2020

Incredibly disappointing that such a simple example meant to showcase how simple this framework can be, does not work.
The fix is simple, but it certainly took more than a minute to figure out.
Add babel to your HTML page.
Add type="text/babel" to like_button script. That's all it takes.
No changes to .js file are needed.

You should end up with:

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel" src="like_button.js"></script>`

thanks

@Techoplite

This comment has been minimized.

Copy link

@Techoplite Techoplite commented Apr 30, 2020

Incredibly disappointing that such a simple example meant to showcase how simple this framework can be, does not work.
The fix is simple, but it certainly took more than a minute to figure out.
Add babel to your HTML page.
Add type="text/babel" to like_button script. That's all it takes.
No changes to .js file are needed.

You should end up with:

<script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script> <script type="text/babel" src="like_button.js"></script>`

I tried this solution but it's just displaying text, no like button...

@Techoplite

This comment has been minimized.

Copy link

@Techoplite Techoplite commented Apr 30, 2020

The error thrown is the following:

Uncaught Error: Could not load http://127.0.0.1:8000/like_button.js at XMLHttpRequest.n.onreadystatechange (babel.min.js:24)

n.onreadystatechange @ babel.min.js:24
  XMLHttpRequest.send (async)  
  s @
  (anonymous) @
  o @
  u @
  f @
  (anonymous) @
@supercool27

This comment has been minimized.

Copy link

@supercool27 supercool27 commented May 29, 2020

Thank you nice example learn a lot with it.

@andhika-satriawan

This comment has been minimized.

Copy link

@andhika-satriawan andhika-satriawan commented Jun 25, 2020

The explanation is very easy to understand, thanks

@kortor19

This comment has been minimized.

Copy link

@kortor19 kortor19 commented Jul 27, 2020

your explanation is very clear. thanks

@1ststudioweb

This comment has been minimized.

Copy link

@1ststudioweb 1ststudioweb commented Aug 2, 2020

very nice example!

@Zayn484

This comment has been minimized.

Copy link

@Zayn484 Zayn484 commented Aug 24, 2020

How can I use "imports" with this?

@uchennaanya

This comment has been minimized.

Copy link

@uchennaanya uchennaanya commented Aug 27, 2020

It helped, thanks

@Muzdak1

This comment has been minimized.

Copy link

@Muzdak1 Muzdak1 commented Aug 31, 2020

understandable, thanks

@SamanehHajizadeh

This comment has been minimized.

Copy link

@SamanehHajizadeh SamanehHajizadeh commented Sep 4, 2020

Thank you! Helpful!

@EnechukwuChibuike

This comment has been minimized.

Copy link

@EnechukwuChibuike EnechukwuChibuike commented Sep 8, 2020

Can I import images with this?
If no
Then how can I put images

@osaroDEV

This comment has been minimized.

Copy link

@osaroDEV osaroDEV commented Sep 19, 2020

Worked for me. Added it to my portfolio site. Cool & straight to the point. I like it 👍

@AgeevDmitryMinsk

This comment has been minimized.

Copy link

@AgeevDmitryMinsk AgeevDmitryMinsk commented Sep 22, 2020

The explanation is very easy to understand, thanks

-> Здорово)

@TaslimMajid

This comment has been minimized.

Copy link

@TaslimMajid TaslimMajid commented Sep 25, 2020

It doesnt display button.

Add React in One Minute
This page demonstrates using React with no build tooling.

React is loaded as a script tag.

@adsarebbbest

This comment has been minimized.

Copy link

@adsarebbbest adsarebbbest commented Oct 20, 2020

nice

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.