Запустите сборку ReactJS через веб-пакет на JSF / XHTML - PullRequest
Новая
       1

Запустите сборку ReactJS через веб-пакет на JSF / XHTML

0 голосов
/ 17 октября 2018

Я пытаюсь внести некоторые новшества в это большое приложение JSF-javaBackend, у нас есть

Так что я работаю с ReactJS и думаю, почему бы и то и другое.До сих пор я мог вызвать библиотеку реагировать на JJ и напечатать какой-то небольшой компонент, также с той же логикой, используя JSX.И оба они прекрасно работают 

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html" >
<h:head>
    <title>Test React JSF</title>
    <link rel="stylesheet" type="text/css" href="../../../../../resources/Adamantium/adamantium-layout/css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="../../../../../resources/css/style.css"/>

    <link  rel="stylesheet"  type="text/css" href="./static/css/main.1ab75c23.chunk.css"/> 


</h:head>

<h:body   > 


    <h2>  React vanilla </h2> 

    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"  ></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"  ></script>

    <!-- Don't use this in production: --> 
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

    <!-- Load our React component. -->
    <script src="like_button.js"></script>
    <br/>
    <br/>
    <br/>

    <h2>  JSX </h2> 
    <div id="babel"></div>
    <script type="text/babel">

        ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('babel')
        );

    </script>
    <br/>
    <br/>
    <br/>


    <script src="./static/js/1.6105a37c.chunk.js" type="application/javascript" ></script>
    <script src="./static/js/main.7bbc540b.chunk.js" type="application/javascript" ></script>

    <h2>  React JSXs Bundles </h2> 

    <div id="root"></div>


</h:body>

Моя проблема начинается, когда я пытаюсь использовать что-то более сложное, то есть сборку с babel create-Reaction-app (npmзапустить сборку), которая ничего не печатает, без ошибок, без сбоев, без веб-логического сбоя при разборе, просто ничего не делайте.У меня есть опыт работы с обеими платформами, но я не могу объединить их даже для тупого компонента (без компонента состояния)

Я подозреваю, что XHTML пытается прочитать мое связанное приложение реагирования не как файл javascript, но это должно было быть исправленос тэгом "type =" application / javascript ".

Я оставлю здесь кнопку" Мне нравится ", JSX и ванильный ответ являются примерами из реактивных документов 

   'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }
  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }
    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
...