Question

我是reactjs的新手。我不想使用react-create app。所以，我创建了两个文件，但是当我执行它时，它没有做任何事情。我得到了空白页面。为什么？ index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <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="app.js"></script>
</head>
<body>
    <div id="app"></div>

</body>
</html>

app.js

import React from 'react';
import ReactDOM from 'react-dom';


class Welcome extends React.Component {
  render() {
    return <h1>Hello</h1>;
  }
}
ReactDOM.render(
   <Welcome />,
  document.getElementById('app')
);

Answer 1

你需要添加这些cdn

<script src="https://unpkg.com/react@15.4.1/dist/react-with-addons.js"></script>
  <script src="https://unpkg.com/react-dom@15.4.1/dist/react-dom.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.19.0/babel.min.js"></script>

编译es6代码需要

babel

您还需要在您的反应应用程序中提供路径od组件

  <script type="text/babel" src="app.js"></script>

我认为你已经错过了bundle.js，你的所有反应代码都将被编译。所以你需要将其路径定义为

<script src="js/bundle.js">

在webpack中将其配置为

  module.exports = {
          entry: './App.jsx',
          output: {
            path: __dirname + '/', 
            filename: 'bundle.js' 
          },

并提供此文件的路径

Answer 2

实际上，您的反应代码没有错误。但是，您不会在html代码上导入app.js文件。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <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>
</head>
<body>
    <div id="app"></div>

</body>
<script src="path/to/app.js"> </script><!-- You need to add this code and modify path.-->
</html>

Answer 3

目前，JavaScript import的浏览器支持非常有限。您可能需要使用转换器（例如TypeScript和Babel）捆绑您的代码，并且最好使用诸如Webpack之类的捆绑器。

Answer 4

我找到了解决方案。我添加了一个脚本标签

<script src="./browser.min.js"></script>

我没有使用任何localhost。只需加载索引页面。它有效。

为什么我的反应代码不起作用？

4 个答案: