Запустить приложение React без сервера

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

Итак, мой вопрос: можно ли запустить приложение на основе реакции без запуска приложения на сервере? В принципе, я хочу, чтобы я мог напрямую использовать путь к файлу index.html в веб-браузере, и мое приложение начинает работать.

Я понимаю, что React js - это библиотека javascript, и весь код в конечном итоге преобразуется в простые файлы javascript с помощью загрузчика babel (если мы используем ES6). Поэтому я думаю, что это должно быть возможно.

Я обнаружил, что могу использовать webpack, который сначала конвертирует мои файлы на основе React или другие js файлы в обычный javascript и создает один файл пакета, который можно использовать в файле Index.html для дальнейшего использования, Я пробовал это, но только некоторые функции работают нормально, как состояние, поддержка, но многие другие функции не работают, как реагировать-маршрутизатор, но когда я использовал сервер npm, все функции начинают нормально работать.

Теперь почему я хочу это сделать, потому что я хочу использовать js для создания веб-приложения Samsung Tizen TV, где я не думаю, что могу использовать сервер npm и все.

Если у кого-то есть какое-то решение, это будет очень полезно. Благодаря

Ответ 1

Я добавил следующее в package.json перед сборкой:

"homepage": "./",

Цитата реагирует на вывод терминала при сборке:

Проект был построен при условии, что он размещен в корне сервера. Чтобы переопределить это, укажите домашнюю страницу в вашем package.json. Например, добавьте это, чтобы создать его для GitHub Pages:

"homepage": "http://myname.github.io/myapp",

Примечание: я уверен, что это не будет работать в каждом проекте.

Ответ 2

Эти несколько концепций в основном все, что вам нужно (плюс методы lifecycles). Вот почему React rocks, это очень легко думать и рассуждать, даже если у вас есть огромное и сложное приложение.

React работает без сервера, просто добавьте теги script и убедитесь, что вы используете JavaScript, которые текущие браузеры понимают как или, загружают источник React и используют его где угодно, что говорит JS и имеет DOM.

<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>

Например, Firefox использует React для своих новых devtools, а вот подсказка, которая экономит вам много времени: очень легко использовать встроенные стили с React, я не могу придумать лучшего инструмента для разработки ваших шаблонов электронной почты.

Ответ 3

У меня была такая же проблема сейчас, с приложением по умолчанию react/react-router. И react-router также не работал у меня при использовании BrowserRouter. Но я нашел issue, где рекомендуется изменить BrowserRouter на HashRouter. Он исправил мою проблему. Чтобы запустить приложение на эмуляторе (на самом деле я пишу для webOS), я меняю src в теге script в index.html на мое местоположение сборки.

Ответ 4

Если вы создали свое приложение с помощью create-реагировать на приложение, вы можете выполнить в командной строке npm run build. Это соберет ваше приложение и поместит связанные файлы для вашего приложения в папку /build: Теперь остается сделать только одно: скопируйте содержимое папки /build в свое веб-пространство. Вы должны настроить веб-сервер таким образом, чтобы все запросы всегда направлялись на ваш index.html

посмотрите эту статью:https://www.andreasreiterer.at/react-app-without-nodejs-server/

Ответ 5

"Главный": "" используйте это для работы без веб-серверов. его работа для меня очень хорошо.

Ответ 6

//Это мой код, как я запускаю приложение React в Tizen Studio index.html в tizen.. запустите приложение и добавьте IP-адрес как я :)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
    />
    <link rel="stylesheet" href="css/style.css" />
    <script src="main.js"></script>

</head>
<body> 

   <script>
       window.open("http://1.1.1.1:4000")
   </script>


</body>
</html>

настроить xml

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/HelloWorld" version="1.0.0" viewmodes="fullscreen">
  <tizen:application id="7bo2fXhVaD.HelloWorld" package="7bo2fXhVaD" required_version="2.3"/>
        <access origin="*" subdomains="true"></access>

    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
    <icon src="icon.png"/>
    <name>AnalyticsTesting</name>
    <tizen:profile name="tv-samsung"/>

    <tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
    <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
    <tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>
    <tizen:privilege name="http://tizen.org/privilege/tv.display"/>
    <tizen:privilege name="http://tizen.org/privilege/fullscreen"/>
    <tizen:privilege name="http://tizen.org/privilege/internet"/>
    <tizen:privilege name="http://tizen.org/privilege/volume.set"/>
    <tizen:privilege name="http://developer.samsung.com/privilege/productinfo"/>

 <tizen:setting pointing-device-support='disable' />
    <tizen:setting screen-orientation="landscape" context-menu="disable" background-support="enable" encryption="disable" install-location="auto" hwkey-event="enable"/>
</widget>