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

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

commented Sep 20, 2018

easy to understand thank you, keep it simple!

@geiz

This comment has been minimized.

Copy link

commented Sep 25, 2018

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

@RaufAli

This comment has been minimized.

Copy link

commented Sep 26, 2018

Good example. Thanks!

@tasdid

This comment has been minimized.

Copy link

commented Oct 3, 2018

Nice tips, thanks

@hinata4zzahra

This comment has been minimized.

Copy link

commented Oct 5, 2018

nice tips,thank you

@sagamydev1

This comment has been minimized.

Copy link

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

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

commented Oct 17, 2018

what is the react js script function on that html code

@Edgar256

This comment has been minimized.

Copy link

commented Oct 21, 2018

Nice insight, Thanks

@skatesham

This comment has been minimized.

Copy link

commented Nov 14, 2018

Very nice!

@CoffeeandTea

This comment has been minimized.

Copy link

commented Nov 14, 2018

棒棒哒~

@imvikaskohli

This comment has been minimized.

Copy link

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

commented Dec 8, 2018

mine doesn't load anything

@stloc

This comment has been minimized.

Copy link

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

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

commented Dec 30, 2018

nice example

@pranaydp

This comment has been minimized.

Copy link

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

commented Jan 8, 2019

thank for this example

@AngelName

This comment has been minimized.

Copy link

commented Jan 17, 2019

老铁 6666

@jayrc7

This comment has been minimized.

Copy link

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

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

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

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

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

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

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

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

commented Apr 1, 2019

react seems giving me some headach but this tutorial is great

@neoflo

This comment has been minimized.

Copy link

commented Apr 7, 2019

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

@sonphfs

This comment has been minimized.

Copy link

commented Apr 9, 2019

Thank you,
First day with react !

@suid0

This comment has been minimized.

Copy link

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

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

commented Apr 18, 2019

ty

@joedevon

This comment has been minimized.

Copy link

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

commented May 5, 2019

thanks alot really helpful

@CatherineDesigner

This comment has been minimized.

Copy link

commented May 24, 2019

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

@kennymuriithi

This comment has been minimized.

Copy link

commented May 25, 2019

Nice and simple. Thanks!

@abduljeleelng

This comment has been minimized.

Copy link

commented Jun 5, 2019

so interesting. Thanks

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.