react에 노드가 정말로 필요한가?프런트 엔드 ENV의 JS?
리액션은 처음입니다.저는 저의 작은 hello world 예를 시작하려고 합니다.
대부분의 튜토리얼은 다음과 같은 기능을 제공합니다.
app.module
var React = require('react');
var ReactDOM = require('react-dom');
var reactElement = React.createElement('h1', { className: 'header' },
'This is React');
ReactDOM.render(reactElement, document.getElementById('react-
application'));
index.displaces를 표시합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" />
<title>Snapterest</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div id="react-application">
I am about to learn the essentials of React.js.
</div>
<script src="./app.js"></script>
</body>
</html>
문제는 이 예에서 nodeJs(require() 부분의 경우)와 npm 설치 및 npm 시작이 필요하다는 것입니다.전부요.
노드 없이도 다른 방법으로 할 수 있습니다.JS는 이렇게
app.module
var reactElement = React.createElement('h1', { className: 'header' },
'This is React');
ReactDOM.render(reactElement, document.getElementById('react-application'));
index.displaces를 표시합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" />
<title>Snapterest</title>
<script src=" /react-0.14.8.min.js"></script>
<script src=" /react-dom-0.14.8.min.js"></script>
</head>
<body>
<div id="react-application">
dsf
</div>
<script src="./app.js"></script>
</body>
</html>
이 예에서는 nodejs가 npm 설치 단계에서 Import해야 하는 반응 의존성을 Import하기 위해 cdn을 사용하고 있습니다.문제는 어떤 것이 더 낫냐는 것입니다.nodejs를 완전히 사용하지 않고 cdn만 사용할 수 있습니까?nodejs 및 npm 모듈(또는 bower.리액션 물질을 가질 수 있을까요?
감사해요.
제목에 제시된 질문에 대한 답변은 "아니오"입니다. 클라이언트 측에서 React를 사용하기 위해 node.js가 필요하지 않습니다.
실제로 두 번째 예는 클라이언트 측에서 node.js에 대한 언급 없이 React를 사용하는 것입니다.
즉, node.js를 사용하는 방법은 여러 가지가 있으며, 이는 React 기반 애플리케이션을 구축할 때 매우 유용합니다.
browserify 또는 webpack 등의 node.js 기반 빌드 도구를 사용하여 클라이언트 측 코드를 깔끔하고 깔끔한 패키지에 번들하여 클라이언트에 제공합니다.
들어 현재 중인 하여 "browserify", "browserify"에 저장된 Javascript 합니다.public/js/bundle.js이다.<script> 인 인 ★index.html이치노 React와Respect」를 포함한)의되어 있습니다.react ★★★★★★★★★★★★★★★★★」react-dom(다른 것 같습니다.클라이언트의 주된 이점은 페이지 요청 수와 필요한 대역폭을 줄이는 것입니다(Uglify를 사용할 수 있기 때문에).번들 전체를 최소화하는 JS).개발자에게 가장 큰 장점은 Babel과 같은 도구를 사용하여 글을 쓸 수 있다는 것입니다..jsx자바스크립트
node.js에 HTTP 서버를 씁니다.
최근 몇 년 동안 앱 전체를 node.js(클라이언트 측과 서버 측)로 빌드하는 것에 대해 많은 소문이 있었습니다.여기서의 주된 장점은 코드 재사용입니다.날짜를 화려하게 정리한 라이브러리를 작성했다고 상상해 주세요.클라이언트측 코드를 Javascript로, 서버측 코드를 PHP로 쓰는 경우 라이브러리를 다시 작성해야 합니다.양쪽에서 node.js를 사용하는 경우 한 번만 하면 됩니다.
node.js에 HTTP 서버를 작성하여 React 응용 프로그램과 통합합니다.
React로 작성된 한 페이지 어플리케이션(SPA)은 Javascript 코드가 클라이언트에 의해 수신되어 실행될 때까지 페이지가 렌더링되지 않는 문제가 있습니다.즉, Javascript를 실행하지 않는 클라이언트는 Google의 웹 크롤러와 같은 아무것도 볼 수 없습니다.따라서 페이지 색인을 작성하려면 클라이언트가 요청할 때 완전히 렌더링된 페이지를 제공할 방법을 찾아야 합니다.이에 대한 해결책은 서버 측 리액트 렌더링입니다.이것은 꽤 도전적인 주제입니다.관심이 있으신 분은 구글링을 해 보시기 바랍니다.
이제 당신의 질문에 대해서: 어떤 것이 더 나은가?항상 그렇듯이, 그것은 당신의 필요에 따라 다릅니다.
제 프로젝트 중 하나는 레거시 PHP 어플리케이션입니다.여기서 리액트 컴포넌트를 사용하기 위해 프런트 엔드 코드 중 일부를 고쳐 쓰고 있습니다.node.js HTTP 서버 또는 서버 측 렌더링이 필요합니까?아뇨, 전혀요.하지만 저는 개발자로서의 삶을 더 쉽게 하기 위해 Babel과 Browserify를 사용하고 있습니다.
제 개인 프로젝트 중 하나는 Next.js라는 프레임워크를 사용하여 작성된 작은 SPA로 서버 사이드 렌더링을 포함하고 있습니다.다른 테크놀로지를 사용하여 이 프로젝트를 작성할 수도 있었지만 클라이언트와 서버 간의 공유 코드베이스가 마음에 듭니다.
현재 승인된 답변에 몇 가지 핵심 정보가 누락된 것 같습니다.정답은 맞습니다.Node.js는 필요 없습니다.그러나 자주 사용되는 첫 번째 이유 중 하나는 사람들이 React를 쓸 때 JSX 형식을 사용하는 것을 선호하기 때문입니다.
JSX는 브라우저에서는 이와 같이 동작하지 않습니다.예를 들어 babel-standalone을 사용하여 브라우저가 JSX에 대처할 수 있도록 할 수 있지만, 이는 JSX 코드가 모든 페이지 로드에서 다시 컴파일된다는 것을 의미하며, 이는 효율적이지 않습니다.보다 효율적인 것은 사이트, 서버 측을 구축하면서 JSX를 컴파일하는 것입니다.이러한 툴의 대부분은 노드 기반이기 때문에 Node.js가 자주 사용되는 이유 중 하나입니다.
물론 JSX는 첫 번째 이유 중 하나일 뿐이지만 다른 이유도 있습니다.Node.js와 함께 제공되는 추가 Javascript 생태계 관련 툴이 많이 있습니다.예를 들어 자바 시스템에서도 사용할 수 있지만 항상 약간 해킹이 심합니다.실제로 다른 라이브러리 및 추가 리소스에 대해 사용 지침은 주로 노드 생태계를 위해 제공되며, 다른 항목은 사용자에게 더 많이 맡겨집니다.
React js는 클라이언트 측 라이브러리로 코드 전체를 순수한 Js(jsx 없음)로 쓰면 node.js가 필요하지 않습니다.
단, 코드 관리를 위해 리액트응용 프로그램은 여러 파일로 분할 또는 구조화되며 브라우저 상에서 실행할 수 있는 최종 클라이언트 측 js 스크립트를 컴파일, 결합, 패키징 및 생성하기 위해서는 node.js 모듈 또는 lib 처리가 필요합니다.
언급URL : https://stackoverflow.com/questions/41838728/does-react-really-need-nodejs-on-the-frontend-env
'source' 카테고리의 다른 글
| WordPress: 작성자 상자에 표시되지 않는 사용자 지정 사용자 (0) | 2023.03.08 |
|---|---|
| JWT 토큰보안에 의한 스프링부트 유닛 테스트 (0) | 2023.03.08 |
| jQuery를 사용하여 JSON 어레이의 키/값 쌍 루프 및 가져오기 (0) | 2023.03.08 |
| AngularJS 및 그 달러 변수 사용 (0) | 2023.03.08 |
| RestTemplate만 사용하는 경우 Spring Boot에서 Tomcat/jetty 자동 시작을 방지하는 방법 (0) | 2023.03.08 |