React로 작업하려면 Node.js를 사용해야 합니까?
7295 단어 reactjavascriptwebdevnode
많은 사람들은 React 프로젝트를 실행하기 위해 이것을 사용해야 한다고 생각합니다. 특히 거의 모든 초보자 튜토리얼이 프로젝트 설정 지침에서 언급하기 때문입니다.
하지만 꼭 사용해야 하나요?
React 개발자가 Node.js를 좋아하는 이유는 무엇입니까?
Node.js는 다음과 같은 주요 이유로 React 작업을 더 쉽고 간소화할 수 있는 가장 인기 있는 "도구 플랫폼"을 제공합니다.
Node.js는 신뢰할 수 있는 JavaScript용 패키지 관리자인 NPM과 함께 제공됩니다. NPM CLI를 사용하면 React 프로젝트 종속성을 매우 쉽고 편리하게 관리할 수 있습니다.
더 구체적으로(그리고 인기 있는 예처럼) Webpack 패키지를 사용하면 다음을 매우 쉽게 수행할 수 있습니다.
CSS 등.(Babel 포함).
require() (CommonJS 모듈) 또는 import ... (ECMAScript 모듈) 구문을 사용하여 모듈 가져오기 관리를 활성화합니다. 이는 필요에 따라 캡슐화 및 가져오기 모듈을 갖는 데 유용합니다. GitHub에 인수되었습니다. Node.js를 사용해야 하나요?
프로토타입이나 작은 도구만 생성하면 되고 Webpack으로 빌드 파이프라인을 설정하는 것은 과도할 수 있습니다.
개인적으로 의 플랫폼을 사용하여 회사의 잠재적 후보자를 선별하기 위해 React 코딩 챌린지를 만들어야 하는 시나리오에 직면했습니다.
Node.js를 사용하지 않으면 HTTP 서버에 쉽게 드롭할 수 있는 작은 HTML 파일을 하나만 가질 수 있습니다.
React 애플리케이션에 Node.js를 사용하지 않으면 다음이 수반됩니다.
1. NPM 대신 CDN에서 React를 로드합니다.
HTML 파일에 다음을 포함합니다.
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
</head>
2. JSX 제거
다음을 렌더링하려면:
<div>
<h1>Hello World</h1>
<a>Test!</a>
</div>
다음과 같이 작성해야 합니다.
ReactDOM.render(
React.createElement('div', null,
React.createElement('h1', null, 'Hello World')
React.createElement('a', null, 'Test!')
),
document.getElementById('root'));
스크립트에 Babel을 포함할 수 있지만:
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
그런 다음 다음과 같이 JSX를 사용합니다.
<body>
<div id="root"></div>
<script type="text/jsx">
const App = () => [<Comp1/>, <Comp2/>];
const Comp1 = () => <h1>Hello World</h1>;
const Comp2 = () => <a>Test!</a>;
ReactDOM.render(
<App/>,
document.getElementById('root')
);
</script>
</body>
3. NPM 패키지 사용
일부 패키지에는
<script/> tag 에 포함할 수 있는 CDN 링크가 있습니다.그렇지 않은 경우 CoderPad 을 사용하는 것과 같은 해결 방법이지만 이것은 이 게시물의 범위를 약간 벗어납니다.
브라우저화 결론
요약하자면 Node.js와 이를 사용하는 패키지/도구는 React 프로젝트에서 수행해야 하는 모든 작업을 더 쉽게 만들어 전반적으로 훌륭한 개발자 경험을 제공합니다.
그러나 프로젝트 및 기본 설정에 따라 사용을 거부할 수 있으며 문제는 없습니다 😄
즐거운 코딩!! 🚀
Reference
이 문제에 관하여(React로 작업하려면 Node.js를 사용해야 합니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/eladtzemach/do-you-have-to-use-node-js-to-work-with-react-2hpa텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
