<!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> |
This comment has been minimized.
This comment has been minimized.
Rabsoninnora
commented
Sep 20, 2018
easy to understand thank you, keep it simple! |
This comment has been minimized.
This comment has been minimized.
geiz
commented
Sep 25, 2018
I just made it here. Thanks! It is exactly what I needed. |
This comment has been minimized.
This comment has been minimized.
RaufAli
commented
Sep 26, 2018
Good example. Thanks! |
This comment has been minimized.
This comment has been minimized.
tasdid
commented
Oct 3, 2018
Nice tips, thanks |
This comment has been minimized.
This comment has been minimized.
hinata4zzahra
commented
Oct 5, 2018
nice tips,thank you |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
guajiropa
commented
Oct 8, 2018
It produces ' == $0' in the HRML view from the Chrom debugger for me |
This comment has been minimized.
This comment has been minimized.
hnjogu
commented
Oct 17, 2018
what is the react js script function on that html code |
This comment has been minimized.
This comment has been minimized.
Edgar256
commented
Oct 21, 2018
Nice insight, Thanks |
This comment has been minimized.
This comment has been minimized.
skatesham
commented
Nov 14, 2018
Very nice! |
This comment has been minimized.
This comment has been minimized.
CoffeeandTea
commented
Nov 14, 2018
棒棒哒~ |
This comment has been minimized.
This comment has been minimized.
imvikaskohli
commented
Nov 30, 2018
So this means, it's same as we have in Angular js. |
This comment has been minimized.
This comment has been minimized.
nathmart1n
commented
Dec 8, 2018
mine doesn't load anything |
This comment has been minimized.
This comment has been minimized.
stloc
commented
Dec 20, 2018
•
Hi, https://stackoverflow.com/questions/53871793/add-react-to-a-website-how-import-external-node-module |
This comment has been minimized.
This comment has been minimized.
stloc
commented
Dec 21, 2018
•
solution : use <ContentLoader.Facebook /> |
This comment has been minimized.
This comment has been minimized.
andrift
commented
Dec 30, 2018
nice example |
This comment has been minimized.
This comment has been minimized.
pranaydp
commented
Jan 3, 2019
Hi there, |
This comment has been minimized.
This comment has been minimized.
vannick
commented
Jan 8, 2019
thank for this example |
This comment has been minimized.
This comment has been minimized.
AngelName
commented
Jan 17, 2019
老铁 6666 |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
GuillotJessica
commented
Jan 28, 2019
@jayrc7, please provide your code |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
Lexiebkm
commented
Jan 30, 2019
What if we use JSX in like_button.js file which also use ES2015 import statement like so : |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
ericndar
commented
Feb 4, 2019
•
Incredibly disappointing that such a simple example meant to showcase how simple this framework can be, does not work. 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>` |
This comment has been minimized.
This comment has been minimized.
johnmeade-webdev
commented
Mar 14, 2019
I followed everything exactly... several times.... At first I was getting a syntax error, so I added the |
This comment has been minimized.
This comment has been minimized.
Peithans
commented
Apr 1, 2019
react seems giving me some headach but this tutorial is great |
This comment has been minimized.
This comment has been minimized.
neoflo
commented
Apr 7, 2019
Excellent example, getting all the tooling is just exhausting. |
This comment has been minimized.
This comment has been minimized.
sonphfs
commented
Apr 9, 2019
Thank you, |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
xtrywow
commented
Apr 18, 2019
ty |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
DananDio
commented
May 5, 2019
thanks alot really helpful |
This comment has been minimized.
This comment has been minimized.
CatherineDesigner
commented
May 24, 2019
Большое спасибо, для новичка доступное и понятно объяснение. Код читабельный! |
This comment has been minimized.
This comment has been minimized.
kennycodex
commented
May 25, 2019
Nice and simple. Thanks! |
This comment has been minimized.
This comment has been minimized.
abduljeleelng
commented
Jun 5, 2019
so interesting. Thanks |
This comment has been minimized.
This comment has been minimized.
tulshidas
commented
Jul 10, 2019
thanks |
This comment has been minimized.
This comment has been minimized.
webguru46
commented
Jul 24, 2019
I just started react, and read this, Thanks |
This comment has been minimized.
This comment has been minimized.
ksh-cloocus
commented
Aug 2, 2019
thank you! |
This comment has been minimized.
This comment has been minimized.
jinjidecoco
commented
Aug 7, 2019
great |
This comment has been minimized.
This comment has been minimized.
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.... |
This comment has been minimized.
This comment has been minimized.
CASCosta
commented
Oct 10, 2019
Very nice indeed, keep up the good working. |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
rahkee
commented
Nov 1, 2019
It sometimes works with or without crossorigin in the <script> tag. So give them both a try! |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
gaearon commentedJun 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