Контекст:
В моей диссертации я решил использовать реакцию, чтобы загрузить таблицу в веб-страницу, где пользователь может выбрать, в какую комнату go войти. Прямо сейчас я использую SWIG (механизм заманчивости), чтобы создать таблицу при загрузке страницы, но я понял, что если я использую React, обновление будет стираться, а затем будет создаваться заново. (Также это отличный способ научиться реагировать, как я хочу использовать его позже). Прежде чем попасть туда, я решил поэкспериментировать с реакцией и решил использовать babel для рендеринга моего компонента. Игнорируйте грязный код, так как многие из них будут убраны и изменены позже.
Проблема:
Файл вообще не загружается. Сначала я следовал этому учебнику для установки babel, затем использовал код, найденный на reactjs странице учебника , чтобы загрузить тестовый код в файл с именем test.js. Затем я использовал babel, чтобы преобразовать его в код jsx.
Файл найден, так как он не показывает никаких ошибок, но его содержимое вообще не загружается. Даже console.log("here") не выводится на консоль.
Мои файлы:
roomChoose. html:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Choose a room to play!</title>
<script
type="text/javascript"
src="../../javascript/roomChooseComponents/roomChooseFunctions.js"
></script>
<script
type="text/javascript"
src="../../javascript/lib/jquery.js"
></script>
<link rel="stylesheet" href="../css/roomChoose.css" />
<script
type="text/javascript"
src="../../javascript/roomChooseComponents/askForPass.js"
></script>
<script src="../socket.io/socket.io.js"></script>
<script>
$(document).ready(function() {
document.getElementById("roomPass").readOnly = true;
});
const socket = io.connect();
socket.on("connect", () => {
let obj = {
room: "roomChoose",
name: "undecided"
};
socket.emit("room", obj);
});
</script>
</head>
<body>
<div id="like_button_container"></div>
<div class="roomTableDiv" id="roomTableDiv">
{% if rooms.length == 0%}
<p>No public rooms! Why dont you make one?</p>
{%else%}
<p>Public rooms:</p>
<table id="roomTable">
<tr>
<th> </th>
<th>Room Name</th>
<th>Player Number</th>
<th>State</th>
</tr>
<tbody id="#roomTabletbodyID">
{% for r in rooms %} {% if r.roomName != "generalChat" &&
r.playerNumber < 4 && r.roomName != "roomChoose" %}
<tr>
{%if r.roomPassword != null %}
<td>
<button onclick="askForPassword('{{r.roomName}}',true)">
Join
</button>
</td>
{% else %}
<td>
<button onclick="askForPassword('{{r.roomName}}',false)">
Join
</button>
</td>
{% endif %}
<td>"{{r.roomName}}"</td>
<td>{{r.playerNumber}}/4</td>
{%if r.roomPassword != null %}
<td>
Private
</td>
{% else %}
<td>
Public
</td>
{% endif %}
</tr>
{% endif %} {% endfor %}
</tbody>
</table>
<p>
Alternatively, you can create your own room here and make it private:
</p>
{%endif%}
</div>
<div class="cont">
<form
action="/board/createNew"
method="post"
id="roomCreate"
onsubmit="return checkForm(this)"
>
<input
type="checkbox"
name="private"
id="private"
onclick="hideShowPasswordFeild(this)"
/>Private room? <br />
Roomname:
<input type="text" name="roomName" id="roomName" />
<div class="roomPasswordDiv" id="roomPasswordDiv">
Password:
<input type="text" name="roomPass" id="roomPass" />
</div>
<button type="submit">Create room</button>
</form>
</div>
<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>
<!-- Load our React component. -->
<!-- <script src="../../javascript/roomChooseComponents/components/chooseRoomTable.js"></script> -->
<script type="javascript/text" src="/html/board/test.js"></script>
</body>
</html>
test. js
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"
);
}
}
$(document).ready(() => {
const domContainer = document.querySelector("#like_button_container");
ReactDOM.render(React.CreateComponent(LikeButton), domContainer);
console.log("here");
});
Моя файловая структура
Рендеринг файла с узла
Адрес файла http://localhost: 3000 / board , где / board - маршрут по умолчанию для моего board.js файла маршрутизатора.
Если нужны какие-либо файлы, просто скажите, и я буду рад предоставить. Я уже неделю об этом говорю.
Заранее спасибо.