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.

Owner

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.

Rabsoninnora commented Sep 20, 2018

easy to understand thank you, keep it simple!

@geiz

This comment has been minimized.

geiz commented Sep 25, 2018

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

@RaufAli

This comment has been minimized.

RaufAli commented Sep 26, 2018

Good example. Thanks!

@tasdid

This comment has been minimized.

tasdid commented Oct 3, 2018

Nice tips, thanks

@hinata4zzahra

This comment has been minimized.

hinata4zzahra commented Oct 5, 2018

nice tips,thank you

@sagamydev1

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

@guajiropa

This comment has been minimized.

guajiropa commented Oct 8, 2018

It produces '

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

@hnjogu

This comment has been minimized.

hnjogu commented Oct 17, 2018

what is the react js script function on that html code

@Edgar256

This comment has been minimized.

Edgar256 commented Oct 21, 2018

Nice insight, Thanks

@skatesham

This comment has been minimized.

skatesham commented Nov 14, 2018

Very nice!

@CoffeeandTea

This comment has been minimized.

CoffeeandTea commented Nov 14, 2018

棒棒哒~

@imvikaskohli

This comment has been minimized.

imvikaskohli commented Nov 30, 2018

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

@nathmart1n

This comment has been minimized.

nathmart1n commented Dec 8, 2018

mine doesn't load anything

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment