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@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 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 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 commented Sep 20, 2018

easy to understand thank you, keep it simple!

@geiz

This comment has been minimized.

Copy link

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 commented Sep 26, 2018

Good example. Thanks!

@tasdid

This comment has been minimized.

Copy link

tasdid commented Oct 3, 2018

Nice tips, thanks

@hinata4zzahra

This comment has been minimized.

Copy link

hinata4zzahra commented Oct 5, 2018

nice tips,thank you

@sagamydev1

This comment has been minimized.

Copy link

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 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 commented Oct 17, 2018

what is the react js script function on that html code

@Edgar256

This comment has been minimized.

Copy link

Edgar256 commented Oct 21, 2018

Nice insight, Thanks

@skatesham

This comment has been minimized.

Copy link

skatesham commented Nov 14, 2018

Very nice!

@CoffeeandTea

This comment has been minimized.

Copy link

CoffeeandTea commented Nov 14, 2018

棒棒哒~

@imvikaskohli

This comment has been minimized.

Copy link

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 commented Dec 8, 2018

mine doesn't load anything

@stloc

This comment has been minimized.

Copy link

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 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 commented Dec 30, 2018

nice example

@pranaydp

This comment has been minimized.

Copy link

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 commented Jan 8, 2019

thank for this example

@AngelName

This comment has been minimized.

Copy link

AngelName commented Jan 17, 2019

老铁 6666

@jayrc7

This comment has been minimized.

Copy link

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 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 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 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 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 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 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 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 commented Apr 1, 2019

react seems giving me some headach but this tutorial is great

@neoflo

This comment has been minimized.

Copy link

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 commented Apr 9, 2019

Thank you,
First day with react !

@suid0

This comment has been minimized.

Copy link

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 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 commented Apr 18, 2019

ty

@joedevon

This comment has been minimized.

Copy link

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.

@DananDio

This comment has been minimized.

Copy link

DananDio commented May 5, 2019

thanks alot really helpful

@CatherineDesigner

This comment has been minimized.

Copy link

CatherineDesigner commented May 24, 2019

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

@kennycodex

This comment has been minimized.

Copy link

kennycodex commented May 25, 2019

Nice and simple. Thanks!

@abduljeleelng

This comment has been minimized.

Copy link

abduljeleelng commented Jun 5, 2019

so interesting. Thanks

@tulshidas

This comment has been minimized.

Copy link

tulshidas commented Jul 10, 2019

thanks

@webguru46

This comment has been minimized.

Copy link

webguru46 commented Jul 24, 2019

I just started react, and read this, Thanks

@ksh-cloocus

This comment has been minimized.

Copy link

ksh-cloocus commented Aug 2, 2019

thank you!

@jinjidecoco

This comment has been minimized.

Copy link

jinjidecoco commented Aug 7, 2019

great

@jakes2255

This comment has been minimized.

Copy link

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 commented Oct 10, 2019

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

@TDcrew

This comment has been minimized.

Copy link

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 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 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 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.

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.