我如何得到html文件中的反应组件？

Question

我用纯js，css和django制作了网页。 感觉无效，然后我尝试使用React js。但是，当我简单地做出反应组件时，有一个问题我不知道如何在当前的html文件中使用这个组件。

你能告诉我如何从main.html获得“App组件”吗？

main.html中

     ...

     <main class="mainPart" style="height: 100%; position: relative; top: 170px; ">
        <div class = "bodyPart" >
           <div id="bodyPartWrapper">

          <script type="text/babel">

           var App = ?????? 'how to get App Component?'

           ReactDOM.render(
              <App />,
               document.getElementById('bodyPartWrapper')
            );

          </script>

           </div>
        </div>
     </main>

     ...

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Just fuck</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
        );
      }
    }
export default App;

Answer 1

你可以使用react而不需要任何构建管道。它可以像任何普通的JS库一样实现。

在您的情况下，最简单的解决方案将是这样的：

在结束</body>标记之前添加这些脚本：

<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>

在HTML文件中为元素提供一个id（你已经这样做了）并添加了React代码。

<div id="bodyPartWrapper"></div>

<script type="text/babel">
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Just fuck</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
        );
      }
    }

ReactDOM.render(<App />, document.getElementById('bodyPartWrapper'));

</script>

就是这样。 React只是JS :)

React Docs非常好，请查看：https://reactjs.org/

希望能帮助到你！

Answer 2

你在渲染反应的div中有脚本标记，尝试将脚本放在div标记之外。

Answer 3

您必须导入App文件并将其渲染到您想要的div中

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('bodyPartWrapper'));
registerServiceWorker();

你也可以在你的App.js文件中添加：

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

//(...)
//this at the end of the file
ReactDOM.render(<App />, document.getElementById('bodyPartWrapper'));

如果您只想导入App组件，则可以执行此操作

import App from './location/to/App'