Using ES6 with React in existing Web Site
Question
I have an existing web site. In this site I have a page available at the URL www.example.com/apps/myApp. myApp is hosted within an existing HTML page. This is just a utility app, so I want to use this as an opportunity to learn React.
Is there a way to use ES6 within this page without importing the entire toolchain? In other words, I'd like to just include React, write my code in ES6, and run. I don't want to have to bring in Gulp or Webpack and introduce some pre-compilation step. Is this possible, or do I have to bring in the whole enchilada?
I've been trying to get to a basic place where I can do this as shown in this Plunkr . Which, includes the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<div id="myApp"></div>
<script type="text/javascript" src="https://unpkg.com/react@15.3.1/dist/react.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
</body>
</html>
2 answers
solution1
3 ACCPTED 2016-09-17 18:13:33
Try babel-standalone :
<h1>Hello World!</h1> <div id="myApp"></div> <script type="text/javascript" src="https://unpkg.com/react@15.3.1/dist/react.js"></script> <script type="text/javascript" src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script> <script type="text/babel" data-preset="react"> class MyLayoutComponent extends React.Component { render() { return ( <div> <h3>React Loaded!</h3> <br /> </div> ); } } ReactDOM.render(<MyLayoutComponent />, document.getElementById('myApp')); </script>
solution2
0 2016-09-17 18:16:21
You can import React library directly to your old project. Just load ReactJS library like any other JS file.
<script src="https://unpkg.com/react@15.3.1/dist/react.js"></script>
Check out ReactJS Getting Started for documenation
For writing ES6 you also need BabelJS
Update after auther edit first post. Check out this example code on plnkr here .
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="myApp"></div>
<script type="text/babel">
var TestOut = React.createClass({
render: function() {
return (
<h1>Hello world!</h1>
);
}
});
ReactDOM.render(
<TestOut />,
document.getElementById('myApp')
);
</script>
<script type="text/javascript" src="https://unpkg.com/react@15.3.1/dist/react.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.