서버 없이 React 응용 프로그램 실행
질문을 하기 전에, 저는 매우 새로운 반응이며, 지금까지 컴포넌트, 상태, 프로펠러, 라우터 등 반응의 기본적인 개념을 배웠습니다.이 질문은 매우 재미있지만, 그 해결책이 필요합니다.제 말이 틀렸다면 정정해 주세요.
서버상에서 애플리케이션을 실행하지 않고 리액트 베이스의 애플리케이션을 실행할 수 있는가.기본적으로는 웹브라우저에서 index.html 파일 경로를 직접 사용할 수 있고 앱이 작동하기 시작했으면 합니다.
React js는 javascript 라이브러리이며, 결국 모든 코드는 babel loader(ES6를 사용하는 경우)를 사용하여 플레인 javascript 파일로 변환된 것으로 알고 있습니다.그래서 저는 이게 가능해야 한다고 생각합니다.
먼저 내부적으로 리액트 기반 파일이나 다른 js 파일을 일반 jascript로 변환하는 웹 팩을 사용하여 Index.html 파일에서 사용할 수 있는 단일 번들 파일을 만들 수 있다는 것을 알게 되었습니다.시도해보았지만 상태, 프로펠러와 같은 일부 기능만 정상적으로 동작하지만 리액트 라우터와는 달리 많은 기능이 동작하지 않습니다만, npm 서버를 사용했을 때는 모든 기능이 정상적으로 동작합니다.
제가 이걸 하고 싶은 이유는 리액트 js를 사용해서 삼성 Tizen TV 웹 어플리케이션을 만들고 싶기 때문입니다.여기서는 npm 서버나 모든 것을 사용할 수 없을 것 같습니다.
만약 누군가 그것에 대한 해결책을 가지고 있다면 그것은 매우 도움이 될 것이다.감사해요.
패키지에 다음과 같이 추가했습니다.빌드 전 json:
"homepage": "./",
빌드 시 반응 터미널 출력 견적:
이 프로젝트는 서버 루트에서 호스팅되는 것으로 가정하여 구축되었습니다.이를 덮어쓰려면 package.json에 홈페이지를 지정합니다.예를 들어, GitHub Pages용으로 빌드하려면 다음과 같이 추가합니다.
"https" : "http://myname.github.io/myapp",
주의: 모든 프로젝트에서 이 방법이 효과가 있는 것은 아닙니다.
기본적으로 필요한 것은 몇 가지 개념뿐입니다(및 라이프 사이클 방식).그래서 React는 크고 복잡한 앱을 가지고 있어도 쉽게 생각하고 추론할 수 있습니다.
React는 서버 없이도 작동합니다.스크립트 태그를 추가하고 현재 브라우저가 React 소스를 인식하거나 다운로드한 JavaScript를 사용하여 JS를 사용하고 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>
예를 들어 Firefox는 새로운 devtools에 React를 사용하고 있습니다.이것에 의해, 많은 시간을 절약할 수 있습니다.React와 함께 인라인 스타일을 사용하는 것은 매우 간단합니다.이메일 템플릿을 설계하는 데 가장 좋은 툴이 생각나지 않습니다.
다음과 같은 변경 사항이 적용되었습니다.
"homepage": "."in 요 key keypackage.json.- 에서 Import된 둘 다 로 대체합니다.
의 읽다BrowserRouter ★★★★★★★★★★★★★★★★★」HashRouter 여기)
이러한 변경 후 다음을 수행하여 서버 없이 앱을 실행합니다.
- 실행합니다.
yarn run build★★★★★★★★★★★★★★★★★」npm run build앱의 프로덕션 빌드를 만듭니다. - .
build/index.html브라우저에 있습니다.
같은 만, 인 「Default(디폴트)」로 있었습니다.react/react-router아, 아, 아, 아, 아, 아, 아, 아.react-routerBrowserRouter를 사용하는 동안에도 작동하지 않았습니다.그러나 변경 권장 사항이 있는 경우 문제가 발견되었습니다.BrowserRouterHashRouter로 이동합니다.그게 내 문제를 해결했어.에뮬레이터(실제로 webOS용)에서 애플리케이션을 기동하기 위해 변경했습니다.srcscript를 달다index.html내 빌드 위치로 이동합니다.
웹 서버 없이 작업할 때 사용합니다.저한테는 아주 잘 먹혀요.
스탠드아론 바벨(babelx)을 사용하고 있으며, 원활하게 동작하고 있습니다.https://babeljs.io/docs/en/babel-standalone
<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById("output").innerHTML = getMessage();
</script>
</div>
// 이것이 Tizen Studio index.html에서 리액트 앱을 실행하는 내 코드입니다.리액트 앱을 실행하여 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>
언급URL : https://stackoverflow.com/questions/40342100/run-react-application-without-server
'programing' 카테고리의 다른 글
| NoSQL 사용 사례 (0) | 2023.03.20 |
|---|---|
| Jackson Json Ignore를 동적으로 변경 (0) | 2023.03.20 |
| WP: wp_enqueue_script에서 버전 번호를 삭제하려면 어떻게 해야 합니까? (0) | 2023.03.20 |
| 스프링 데이터 내의 FindAll과 함께 OrderBy를 사용하는 방법 (0) | 2023.03.20 |
| IE 8 자동으로 닫힘IE 8 자동으로 닫힘태그 (0) | 2023.03.20 |