2017-12-31 10 views
1

노드를 사용하여 웹 앱을 만들고 반응합니다. Node and React 어플리케이션을 분리하기보다는 React를 통합하고 싶습니다. 따라서 반응 앱보다는 반응 CDN을 index.html으로 가져 오려고했습니다. 내 서버는 index.html을 완벽하게 제공하지만 반응 구성 요소에 오류가 발생합니다.CDN을 사용하여 기존 Node Express 앱에 React를 통합합니다.

이 내 index.html

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>React Powered chat App</title> 
    </head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js" charset="utf-8"></script> 
    <script src="/scripts/main.js" charset="utf-8"></script> 
    <body> 
    Hello ! 
    <div id ='App'></div> 
    </body> 
</html> 

이 나는군요 내 main.js

class App extends React.Component { 
    render(){ 
    return (
     <div> 
     Hello ! 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<App />, document.getElementById('App')); 

오류가 내가 잘못했을 무엇

Uncaught SyntaxError: Unexpected token <      main.js:4 

이다? CDN과 반응 할 수 있습니까?

그리고 내가 react/cjs/react.development 라이브러리를 사용할 때 더 많은 오류가 발생했습니다. 그럼 읽기 후 this stackoverflow 질문/react/umd/libraries를 사용합니다. 그렇다면 cjsumd CDN 라이브러리의 차이점은 무엇입니까?

+0

[ReactDOMServer] (https://reactjs.org/docs/react-dom-server.html)를 공식 웹 사이트에서 추천 했습니까? –

답변

2

react가 JSX (자바 스크립트 내부의 HTML)를 사용하기 때문에 코드가 작동하지 않습니다. 브라우저에서 읽을 수 없으며 브라우저에서 읽을 수있는 일반적인 자바 스크립트로 변환해야합니다. 그런 transpiler는 바벨입니다. 귀하의 코드는 transpiler가 없기 때문에 작동하지 않습니다.

transpiler와 함께 번들로 제공되는 create-react-app과 반응을 시작하는 데 필요한 모든 것을 사용할 수 있습니다. 그리고 내가 알고 있듯이, 당신이 당신의 특급 백엔드를 추가하기를 원한다면, 여기에 tutorial이 있습니다. 그것은 당신이 익스프레스 백엔드에 create-react-app를 연결하는 것을 시작할 수 있도록 도와 줄 것입니다. 희망이 도움이됩니다.

+0

네, 이해합니다. 그렇다면 서버를 별도로 반응시켜야합니다. 아니면 고속 정적 미들웨어를 사용하여 index.html을 제공 할 수 있습니까? 은 app.use (express.statis (dirname + '../client'))와 같습니다. –

+0

할 수는 있지만 약간 땜질이 필요합니다. https://blog.codingbox.io/react-for-beginners-part-1-setting-up-repository-babel-express-web-server-webpack-a3a90cc05d1e이 링크를 확인하십시오. 이것은 익스프레스 서버에서 반응하지만 뜨거운 재로드가 없습니다. 따라서 매번 다시 시작해야합니다. 그러나 당신은 이것에 핫 리로딩을 추가 할 수 있습니다. – illiteratewriter

+0

두 튜토리얼을 시험해 보았습니다. 반응 앱을 별도로 사용하는 앱. 그리고 이제 개념을 분명히 이해합니다. –

2

JSX (자바 스크립트에 뿌려진 HTML 코드)가 일반 자바 스크립트 또는 ES6 코드가 아니기 때문에 브라우저에서 직접로드 할 수 없습니다.

그래서 문제는 CDN에서 반응 라이브러리를 얻지 못하고 있습니다. 괜찮습니다.

문제는 예를 들어 Babel을 사용하여 main.js 파일을 일반 JavaScript 코드로 옮겨야한다는 것입니다.

Babel을 사용하여 자동 번역을 수행하는 가장 일반적으로 사용되는 도구는 webpack입니다.

웹팩과 바벨을 자세히 설정하는 방법을 배우고 싶지 않다면 create-react-app을 사용하는 것이 좋습니다. 이렇게하면 어깨에서 모든 상용구를 설정하는 부담이 생기고 가능한 한 자바 스크립트 번들이 생성됩니다. 브라우저에서 직접 사용하십시오.

참고 : create-react-app를 사용하여 끝내면 CDN에서 React 라이브러리를 가져올 필요가 없습니다. 이미 CDN이 번들에 포함되어있을 것입니다.

+0

네, 이해합니다. 그렇다면 서버를 별도로 반응시켜야합니다. 아니면 고속 정적 미들웨어를 사용하여 index.html을 제공 할 수 있습니까? 은 app.use (express.statis (dirname + '../client'))와 같습니다. –

+0

물론 CRA 서버는 실제로 편의를 위해 제공되는 것으로, 코드 작업시 핫 모듈 재로드가 가능합니다.하지만 Express 정적 미들웨어로 서비스 할 수있는 JS 번들을 생성하는 데에도 사용할 수 있습니다. –

+1

create-react-app에서 index.html을 제공하지 않지만 npm을 실행하면 생성되는 Javascript 번들 –

관련 문제