React приложение без сборщиков

React приложение без сборщиков

Иногда нужно набросать небольшой пример или демку на реакте, но не хочется создавать новый проект, где установится +100500 пакетов. Создавать проект в песочнице типа codesandbox тоже лень. Есть вариант попроще:

1️⃣ Подключаем react и react-dom через CDN

 
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

2️⃣ Подключаем babel через CDN

 
<script src="https://unpkg.com/@babel/standalone/babel.min.js">

3️⃣ Добавляем root

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

4️⃣ Добавляем script с типом “text/babel”, внутри которого мы можем использовать JSX

 
<script type="text/babel"></sciprt>

Получаем следующий код

 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Without Bundler</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
 
<body>
    <div id="root"></div>
    <script type="text/babel" defer>
        function App() {
            const [count, setCount] = React.useState(0);
 
            return (
                <div style={{ textAlign: "center", marginTop: "50px" }}>
                    <h1>Счётчик: {count}</h1>
                    <button onClick={() => setCount(count - 1)}>-</button>
                    <button onClick={() => setCount(0)} style={{ margin: "0 10px" }}>
                        Сброс
                    </button>
                    <button onClick={() => setCount(count + 1)}>+</button>
                </div>
            );
        };
 
 
        ReactDOM.createRoot(document.getElementById("root")).render(<App />);
    </script>
</body>
 
</html>

5️⃣ Для максимальной простоты — создаём сниппет в VS Code

👉 CMD + SHIFT + P > Configure Snippets > New Global Snippets file и вставляете туда

 
{
    "React Without Bundler HTML": {
        "prefix": "react-html",
  "scope": "html",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "    <meta charset=\"UTF-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "    <title>React Without Bundler</title>",
            "    <script src=\"https://unpkg.com/react@18/umd/react.development.js\"></script>",
            "    <script src=\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\"></script>",
            "    <script src=\"https://unpkg.com/@babel/standalone/babel.min.js\"></script>",
            "</head>",
            "",
            "<body>",
            "    <div id=\"root\"></div>",
            "    <script type=\"text/babel\" defer>",
            "        const { useState } = React;",
            "",
            "        function App() {",
            "            const [count, setCount] = useState(0);",
            "",
            "            return (",
            "                <div style={{ textAlign: \"center\", marginTop: \"50px\" }}>",
            "                    <h1>Счётчик: {count}</h1>",
            "                    <button onClick={() => setCount(count - 1)}>-</button>",
            "                    <button onClick={() => setCount(0)} style={{ margin: \"0 10px\" }}>",
            "                        Сброс",
            "                    </button>",
            "                    <button onClick={() => setCount(count + 1)}>+</button>",
            "                </div>",
            "            );",
            "        };",
            "",
            "        ReactDOM.createRoot(document.getElementById(\"root\")).render(<App />);",
            "    </script>",
            "</body>",
            "",
            "</html>"
        ],
    }
}