Instantly share code, notes, and snippets.

@gaearon /index.html
Last active Sep 23, 2018

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.

Show comment
Hide comment
@gaearon

gaearon 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

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.

Show comment
Hide comment
@Rabsoninnora

Rabsoninnora Sep 20, 2018

easy to understand thank you, keep it simple!

Rabsoninnora commented Sep 20, 2018

easy to understand thank you, keep it simple!

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