Я пытаюсь реализовать React для проекта RoR. Я добавил папку внешнего интерфейса в каталог своего проекта и создал файл компонента index.jsx, но он не отображает изменения, которые я применил к представлению Rails с помощью React при тестировании на сервере Rails. Вот что я имею в моем представлении Rails:
<main id="root"></main>
И в моей папке веб-интерфейса React у меня есть index.jsx с кодом ниже:
import React from "react";
import ReactDOM from "react-dom";
document.addEventListener("DOMContentLoaded", () => {
const root = document.getElementById("root");
ReactDOM.render(<h1>Welcome to my page</h1>, root);
});
В основном то, что я пытаюсь сделать, это просто добавить тег h1 к элементу root, но я вижу пустой основной тег с идентификатором root только при проверке страницы.
Screenshot1
Не уверен, что это поможет, но вот мой webpack.config. js
const path = require("path");
module.exports = {
context: __dirname,
entry: "./frontend/index.jsx",
output: {
path: path.resolve(__dirname, "app", "assets", "javascripts"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
query: {
presets: ["@babel/env", "@babel/react"],
},
},
},
],
},
devtool: "source-map",
resolve: {
extensions: [".js", ".jsx", "*"],
},
};
Я попытался добавить что-то прямо в моем представлении Rails, и оно работает просто отлично, поэтому я думаю, я могу предположить, что это проблема внешнего интерфейса.
<main id="root">
<h1>Test Rails</h1>
</main>
Screenshot2
Это мой код представления, который загружает html, в основном код по умолчанию для любых rails new проект.
<!DOCTYPE html>
<html>
<head>
<title>Intro-Me</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>
</head>
<body>
<%= yield %>
</body>
</html>
Пожалуйста, дайте мне знать, если какая-либо информация необходима. Я ценю любую помощь в этом:)