2016-11-25 1 views
1

이들은 index.html 파일는 반응

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <script src="https://cdnjs.cloudflare/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
    <script src="https://cdnjs.cloudflare/ajax/libs/react/0.14.7/react.js"></script> 
    <script src="https://cdnjs.cloudflare/ajax/libs/react/0.14.7/react-dom.js"></script> 
    </head> 
    <body> 
    <div id = "app"> 
    <script type="text/babel" src="app.jsx"> 


    </script> 
    </div> 
    </body> 
</html> 

의 내용 그리고 내 app.jsx 파일의 내용이 server.js 파일의

ReactDOM.render(
    <h1>Hello React!</h1>, 
    document.getElementById('app') 
    ); 

내용은

입니다있는 표현
var express = require('express'); 
var app = express(); 
app.use(express.static('public')); 

app.listen(3000,function(){ 
    console.log('Express server is up on port 3000'); 
}); 

그리고 package.json의 내용은

입니다.

내가 명령 노드 server.js, 페이지 로컬 호스트를 사용하여 파일을 실행하면 디렉토리 구조가 directory structure

입니다 : // 3000 빈 것으로 밝혀졌습니다. 기대했는데 안녕하세요.이 화면에 나타납니다. 나는 반응과 표현으로 시작하고 이것이 왜 그렇게되는지 알 수 없었다.

답변

0

express server에서 index.html 파일을 제공해야합니다. 현재 파일에 index.html을 파일 상대에 대한 올바른 경로를 settign하여 귀하의 server.js 코드에 다음을 추가하고 당신이 당신의 결과를

app.get("/", function(req, res){ 
    res.send('/path/to/index.html'); 
}); 
+0

불행히도 작동하지 않았습니다. –

+0

어떤 디렉토리 구조를 게시 할 수 있습니까? –

+0

디렉토리 구조가 질문 하단에 있습니다. –

0

을 볼 수 있어야합니다 그냥 대신이 시도 :

res.sendFile('public/index.html' , { root : __dirname}); 

이것은 나를 위해 일했다. 루트 : __ dirname은 위의 예에서 server.js가있는 주소를 가져 와서 index.html (이 경우)로 돌아 오면 반환 된 경로는 공용 폴더가있는 디렉토리로 이동합니다.

0

아웃. 오타 내가 바벨, 반응 및 React-Dom을 수입 한 곳이 있습니다.

수정 코드

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>** 

는 모두 세 가지 라이브러리 '.COM'놓쳤다. 페이지를 검사하여 발견되었습니다 (라이브러리가로드되지 않음).