Как создать простое приложение React без использования интерфейса командной строки create-react-app.

Создайте папку проекта на своем компьютере. Позвольте мне назвать его «myapp». Создайте html-файл. Позвольте мне назвать его index.html. Создайте базовый HTML-шаблон.
Добавьте два тега script внутри тега body внизу. Один для библиотеки React, а другой для React-dom. Эти ссылки также есть в документации по реакции. На самом деле это ссылки React CDN. Когда мы открываем html-файл в браузере, браузер извлекает эти файлы (react.development.js и react-dom.development.js) из CDN.

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

3. Теперь создайте div с идентификатором «root» внутри тега body вверху (вы можете назвать его по своему желанию).

4. Теперь добавьте еще один тег сценария под указанными выше тегами сценария и напишите свой код реакции внутри этого тега сценария, как показано ниже.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Myapp</title>
</head>

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



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

    <script>
        //    creating react element using a "createElement" method from react library.

        let header = React.createElement("h1", {}, "My first react app")


       // Appending it to the root div element using "createRoot" method from ReactDOM.

        let root = ReactDOM.createRoot(document.getElementById("root"))
        root.render(header)
    </script>
</body>

</html>

Да…!!! Ты сделал это. Это вы сделали свое первое приложение для реагирования. Сейчас вы удивитесь, задав вопрос, где же JSX?.

Позвольте мне сказать вам одну вещь.

Нам не нужен JSX для создания реагирующих элементов.

Как добавить больше элементов?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Myapp</title>
</head>

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



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

    <script>
        //    creating react element using a "createElement" method from react library.

        let header = React.createElement("h1", {}, "Header")
        let body = React.createElement("h1", {}, "My first react app")
        let footer = React.createElement("h1", {}, "Footer")
        let app = React.createElement("h1", {}, [header, body, footer])

        // Appending it to the root div element using "createRoot" method from ReactDOM.
        let root = ReactDOM.createRoot(document.getElementById("root"))
        root.render(app)
    </script>
</body>

</html>

Теперь мы можем перейти к JSX (Нажмите здесь).

Как создать простое приложение React без использования интерфейса командной строки create-react-app.

Похожие вопросы