web-dev-qa-db-fra.com

Exécutez React application sans serveur

Avant de poser ma question, je voudrais vous dire que je suis très nouveau pour réagir et jusqu'à présent, j'ai appris des concepts très basiques de réagir comme composant, état, accessoire, routeur, etc. et peut être ceci la question est très drôle mais j'ai besoin de la solution pour ça. Veuillez me corriger si je me trompe quelque part.

Donc ma question est, pouvons-nous exécuter l'application basée sur React sans exécuter l'application sur le serveur?. Fondamentalement, je le veux, je peux directement utiliser le chemin du fichier index.html sur le navigateur Web et mon application commence à fonctionner.

Ma compréhension est que React js est une bibliothèque javascript et tout le code finalement converti en fichiers javascript simples en utilisant le chargeur babel (si nous utilisons ES6). Donc je pense qu'il devrait être possible de le faire .

J'ai découvert que je peux utiliser webpack qui convertit d'abord en interne mes fichiers React ou autres fichiers js en javascript normal et crée un seul fichier groupé qui peut être utilisé dans Index Fichier .html pour une utilisation ultérieure. J'ai essayé cela mais seules certaines fonctionnalités fonctionnent bien comme l'état, prop mais de nombreuses autres fonctionnalités ne fonctionnent pas comme react-router mais quand j'ai utilisé le serveur npm, toutes les fonctionnalités fonctionnent correctement.

Maintenant, pourquoi je veux le faire parce que je veux utiliser react js pour créer application Web Samsung Tizen TV où je ne pense pas pouvoir utiliser le serveur npm et tout.

Si quelqu'un a une solution à ce sujet, ce serait très utile. Merci

javascriptreactjsreact-routertizentizen-web-app
19
Vikas Verma

J'ai ajouté ce qui suit à package.json avant de construire:

"homepage": "./",

Citation de la sortie du terminal réagit lors de la construction:

Le projet a été construit en supposant qu'il est hébergé à la racine du serveur. Pour remplacer cela, spécifiez la page d'accueil dans votre package.json. Par exemple, ajoutez ceci pour le construire pour les pages GitHub:

"page d'accueil": " http://myname.github.io/myapp ",

Remarque: je suis presque sûr que cela ne fonctionnera pas dans tous les projets.

10
Jannik S.

Ces quelques concepts sont essentiellement tout ce dont vous avez besoin (plus méthodes des cycles de vie ). C'est pourquoi React rocks, il est très facile de penser et de raisonner, même si vous avez une application énorme et compliquée.

React fonctionne sans serveur, ajoutez simplement des balises de script et assurez-vous d'utiliser JavaScript que les navigateurs actuels comprennent ou téléchargez React source et l'utiliser n'importe où qui parle JS et a DOM.

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

Par exemple, Firefox utilise React pour leurs nouveaux devtools et voici une astuce qui vous fait gagner beaucoup de temps: c'est très styles en ligne faciles à utiliser avec React, je ne peux pas penser à un meilleur outil pour concevoir vos modèles de courrier électronique.

7
Solo

J'ai eu le même problème maintenant, avec une application par défaut react/react-router. Et react-router N'a pas non plus fonctionné pour moi lors de l'utilisation de BrowserRouter . Mais j'ai trouvé problème où recommandé de changer BrowserRouter en HashRouter . Cela a résolu mon problème. Pour démarrer l'application sur l'émulateur (en fait j'écris pour webOS), je change src dans script tag dans index.html À mon emplacement de build.

2
AleshaOleg

"page d'accueil": "." utilisez-le pour travailler sans serveurs Web. son travail pour moi très bien.

0
mohammad feiz

// Voici mon code sur la façon dont je lance React app sur Tizen Studio index.html dans tizen .. lancez react app et ajoutez une adresse ip comme je l'ai fait :)

<!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>

configurer 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>
0
Slavo3Dev

Si vous avez créé votre application avec create-react-app, vous pouvez exécuter sur la ligne de commande npm run build. Cela créera votre application et placera les fichiers groupés de votre application dans le dossier/build: Il ne vous reste plus qu'une chose à faire: Copiez le contenu de votre dossier/build dans votre espace Web. Vous devez configurer le serveur Web de manière à ce que toutes les demandes soient toujours acheminées vers votre index.html

regardez cet article: https://www.andreasreiterer.at/react-app-without-nodejs-server/

0
Angelotti