Question

我正在尝试使用babel将我的react jsx代码转换为js。这是我使用的命令：

npx babel BlueSlide/js/student_slider.jsx --watch --out-file BlueSlide/static/js/student_slider_compiled.js

执行此操作时会出现此错误

  49 |   render() {
  50 |     return (
> 51 |       <div class="jumbotron thinking">
     |       ^
  52 |         <h1>Welcome To Blue Slide</h1>
  53 |         <p>How well do you understand what's going on</p>
  54 |         <div class="slidecontainer">
    at Parser.raise (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:6344:17)
    at Parser.unexpected (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:7659:16)
    at Parser.parseExprAtom (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8828:20)
    at Parser.parseExprSubscripts (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8413:23)
    at Parser.parseMaybeUnary (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8393:21)
    at Parser.parseExprOps (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8280:23)
    at Parser.parseMaybeConditional (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8253:23)
    at Parser.parseMaybeAssign (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8200:21)
    at Parser.parseParenAndDistinguishExpression (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8963:28)
    at Parser.parseExprAtom (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8760:21) {
  pos: 1356,
  loc: Position { line: 51, column: 6 },
  code: 'BABEL_PARSE_ERROR'
}

我试图用一个简单的div和相同的问题替换render函数的内部。我不知道为什么我的渲染返回声明对我大吼大叫。

我只希望编译react代码，以便可以将其与html一起使用，如果这样做不合适，请随时提出替代方法。

Answer 1

您尚未发布babel.rc文件，但我怀疑您尚未安装@babel/preset-react并将其添加到配置中。这是转译JSX语法所必需的。

Answer 2

首先安装babel-cli

npm i babel-cli -g //install globally so u can use anywhere

Babel是一个编译器，但默认情况下不会编译任何东西。我们必须添加插件和预设，以便对我们的代码进行任何形式的更改。您必须安装

 npm i babel-preset-env babel-preset-react --save-dev

现在您需要创建两个目录。公共和src。在公用文件夹中放置index.js和index.html。

index.html

<body>
    <div id="here"></div>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="./index.js"></script> //index.js

index.js应该为空。我们将在src目录中编写我们的jsx代码，babel会将其转换为index.js

现在在src文件夹中创建app.js并运行此代码进行测试

src / app.js

const template = <p>this is jsx</p>;
const appRoot = document.getElementById("here");
ReactDOM.render(template2, appRoot);

现在在命令行中运行以下代码：

babel src/app.js --out-file=public/index.js --presets=env,react --watch

如果您检查public / index.js

"use strict";

var template = React.createElement(
  "p",
  null,
  "this is jsx"
);
var appRoot = document.getElementById("here");
ReactDOM.render(template2, appRoot);

Answer 3

from plotly.offline import plot
import plotly.graph_objects as go

xy = [[4, 4], [1, 5], [2, 2]]
r = 0.1

fig = go.Figure()
kwargs = {'type': 'circle', 'xref': 'x', 'yref': 'y', 'fillcolor': 'black'}
points = [go.layout.Shape(x0=x-r, y0=y-r, x1=x+r, y1=y+r, **kwargs) for x, y in xy]
fig.update_layout(shapes=points)

fig.update_xaxes(range=[0, 10])
fig.update_yaxes(range=[0, 10])
fig.update_layout(width=1000, height=1000)
plot(fig)

应该被安装。并且在编译jsx-> js代码时：

@babel/preset-react

应提供参数。因此，您的编译代码看起来类似于：

--presets @babel/react

BABEL解析错误：将React js转换为JS

3 个答案: