Как получить компонент реагирования в HTML-файл? - PullRequest
Новая
       9

Как получить компонент реагирования в HTML-файл?

0 голосов
/ 05 сентября 2018

Я сделал веб-страницу чистыми js, css и django.
Чувствую себя настолько неэффективно, что я пытаюсь использовать React JS. Однако, когда я делаю простой компонент «все», возникает одна проблема, я не знаю, как использовать этот компонент в текущем HTML-файле.

Не могли бы вы рассказать мне, как я могу получить «Компонент приложения» из main.html?

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;

Ответы [ 3 ]

0 голосов
/ 05 сентября 2018

Вы должны импортировать файл приложения и отобразить его в нужном вам 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'));

Если вы просто хотите импортировать компонент приложения, вы можете сделать 

import App from './location/to/App'
0 голосов
/ 05 сентября 2018

Вы можете использовать реакцию без какого-либо конвейера сборки. Он может быть реализован так же, как любая обычная библиотека 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-файла укажите идентификатор элемента (вы уже это сделали) и добавьте код 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>

И это все. Реакт это просто JS:)

React Docs очень хорошие, посмотрите их: https://reactjs.org/

Надеюсь, это поможет!

0 голосов
/ 05 сентября 2018

У вас есть тег script внутри div, на который вы реагируете, попробуйте поместить скрипт вне тега div.

...