在现有网站中使用ES6和React
[英]Using ES6 with React in existing Web Site
问题描述
I have an existing web site. 
我有一个现有的网站。 In this site I have a page available at the URL www.example.com/apps/myApp. 在此网站中，我在网址www.example.com/apps/myApp上提供了一个页面。 myApp is hosted within an existing HTML page. myApp托管在现有的HTML页面中。 This is just a utility app, so I want to use this as an opportunity to learn React. 这只是一个实用程序应用程序，所以我想用它来学习React。
Is there a way to use ES6 within this page without importing the entire toolchain? 有没有办法在这个页面中使用ES6而不导入整个工具链？ In other words, I'd like to just include React, write my code in ES6, and run. 换句话说，我想只包含React，在ES6中编写我的代码，然后运行。 I don't want to have to bring in Gulp or Webpack and introduce some pre-compilation step. 我不想引入Gulp或Webpack并引入一些预编译步骤。 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 . 我一直试图到达一个基本的地方，我可以这样做，如这个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 个解决方案
解决方案1
3 已采纳 2016-09-17 18:13:33
Try babel-standalone : 尝试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>
解决方案2
0 2016-09-17 18:16:21
You can import React library directly to your old project. 您可以将React库直接导入旧项目。 Just load ReactJS library like any other JS file. 只需像任何其他JS文件一样加载ReactJS库。
<script src="https://unpkg.com/react@15.3.1/dist/react.js"></script>
Check out ReactJS Getting Started for documenation 查看ReactJS入门文档
For writing ES6 you also need BabelJS 为了编写ES6，你还需要BabelJS
Update after auther edit first post. 在编辑第一篇文章后更新。 Check out this example code on plnkr here . 在这里查看plnkr上的示例代码。
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.