Блог

Я следую инструкциям по этой ссылке. https://reactjs.org/docs/add-react-to-a-website.html

У меня есть следующий код, и он работает:

 const domContainers = document.querySelectorAll('[name="uiattr"]');

domContainers.forEach((element) => {
  const id = element.id.split("-")[1];
  ReactDOM.render(e(LikeButton), element);
});
 

Если я изменю его на этот код и добавлю к нему асинхронность:

 const domContainers = document.querySelectorAll('[name="uiattr"]');

domContainers.forEach(async (element) => {
  const id = element.id.split("-")[1];
  const attr = await getAttr(id);
  ReactDOM.render(e(LikeButton), element);
});
 

я получаю следующую ошибку в консоли ни с чем другим: Не удалось разрешить спецификатор модуля «babel-runtime / regenerator»

Я установил bable следующим образом: npm install babel-cli@6 babel-preset-react-app@3

и я развертываю с помощью этой команды: js-dev$ npx babel --watch src --out-dir ../prj/static/prj/js/ --presets react-app/prod

Я новичок в вавилонском мире, предполагаю, что мне нужно что-то еще, но понятия не имею. Я предполагаю, что синтаксис правильный, только потому, что он компилируется без ошибок. Что-то, что я видел, когда babel терпел неудачу, когда я ошибался.

Руководство по реагированию действительно очень запутанное и не охватывает все аспекты.

Я бы предложил просто установить react amp; react-dom : npm install --save react react-dom

Вам нужно webpack будет объединить ваш код и babel пару плагинов для компиляции вашего JSX, использовать асинхронные функции, …: npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime babel-loader webpack webpack-cli .

Создайте webpack.config.js файл в своей корневой папке:

 const path = require('path');

module.exports = {
    mode: "development", // or production
    entry: {
        app1: './react/app1/index.js'
    },
    watch: true,
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "public/react")
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                }
            }
        ]
    }
};
 

Создайте .babelrc файл в своей корневой папке:

 {
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-runtime"]
}
 

Пример react/app1/index.js файла:

 import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("myContainer"));
 

Напишите свой код react./react/app1/index.js (вы можете импортировать другие файлы React, модули, …)

Затем в вашем html просто поместите тег script: <script src="public/react/app1.js"></script>