React.js: 튜토리얼의 예가 작동하지 않습니다.
http://facebook.github.io/react/docs/tutorial.html에서 React.js 튜토리얼을 진행하고 있습니다.다음은 내 파일입니다.
template.template:
<html>
<head>
<title>Hello React</title>
<script src="http://fb.me/react-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx" src='tut.js'>
</script>
</body>
</html>
및 tut.disc:
/** @jsx React.DOM */
var data = [
{author: 'Tldr', text: 'This is a comment'}
]
var CommentBox = React.createClass({
render: function() {
return (
<div className='commentBox'>
<h1>Comments</h1>
<CommentList data={this.props.data} />
<CommentForm />
</div>
)
}
})
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return <Comment author={comment.author}>{comment.text}</Comment>
})
return (
<div className='commentList'>
{commentNodes}
</div>
)
}
})
var CommentForm = React.createClass({
render: function() {
return (
<div className='commentForm'>
Hello World, I am a comment
</div>
)
}
})
var Comment = React.createClass({
render: function() {
return (
<div className='comment'>
<h2 className='commentAuthor'>
{this.props.author}
</h2>
{this.props.children}
</div>
)
}
})
React.renderComponent(
<CommentBox data={data} />,
document.getElementById('content')
)
그런데 브라우저로 열면 빈 페이지가 뜬다.내가 뭘 잘못하고 있지?
크롬으로 로드할 수 없습니다.file://XHR 경유 URL(다른 곳에서 설명한 바와 같이 브라우저 내 변환의 동작 방식)몇 가지 옵션이 있습니다.
- 다른 브라우저를 사용합니다.파이어폭스가 작동한다는 거 알아
- 로컬 웹 서버를 시작합니다(Python에는 웹 서버가 포함되어 있으므로 설치는 매우 간단합니다.http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python)).
- 스크립트를 다른 파일이 아닌 인라인에 넣습니다.이와 같은 간단한 작업도 가능하지만 코드가 복잡해지면 다른 옵션 중 하나를 사용해 보는 것이 좋습니다.
다음 명령어를 사용할 수 있습니다.그러나 명령어 전에 크롬 프로세스를 중지해야 할 수도 있습니다. 태스크 매니저로부터 받을 수도 있습니다.
"C:\Program Files (x86)\Google\"Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security
두 번째 방법은 크롬 바로 가기 속성에서 --allow-file-access-from-files 플래그를 사용할 수도 있습니다.그러나 이것은 개발 목적으로만 권장됩니다.
JSXtransformer는 Ajax를 사용하여 소스를 로드하려고 합니다.이 방법은 에 적합하지 않습니다.file://패스
즉, HTTP 서버(apache, grunt connect 등)를 사용하여 소규모 프로젝트를 처리해야 합니다.또는 스크립트 소스를 스크립트 태그에 직접 넣습니다.
Chrome의 경우 오리진 검사를 사용하지 않도록 설정할 수 있습니다. 자세한 내용은 Chrome에서 동일한 오리진 사용 안 함 정책을 참조하십시오.물론 개발에만 사용하세요.
어떤 이유로든 Chrome에서는 로컬 웹 서버로는 충분하지 않은 것 같습니다.Python 3.4 사용 및 사이트 보기http://localhost:8000다음 오류가 발생했습니다.
오리진 간 리소스 공유 정책에 의해 오리진 'https://fb.me'의 리다이렉트 로드가 차단되었습니다.요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.따라서 오리진 'http://localhost:8000'은 액세스가 허용되지 않습니다.
튜토리얼에 포함된 Babel 스크립트에서 동일한 오류가 발생하지 않았다는 점을 고려하면 이상합니다.
는 이 를 해결할 수 .integrity ★★★★★★★★★★★★★★★★★」crossorigin의 script리액트 및 리액트돔을 로드하는 데 사용되는 태그, 변경:
<script src="https://fb.me/react-0.14.7.min.js"
integrity="sha384-zTm/dblzLXQNp3CgY+hfaC/WJ6h4XtNrePh2CW2+rO9GPuNiPb9jmthvAL+oI/dQ"
crossorigin="anonymous"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"
integrity="sha384-ntqCsHbLdMxT352UbhPbT7fqjE8xi4jLmQYQa8mYR+ylAapbXRfdsDweueDObf7m"
crossorigin="anonymous"></script>
수신인:
<script src="https://fb.me/react-0.14.7.min.js"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"></script>
Paul O'Shannessy의 답변에서 2번을 확장합니다.
좋은 해결책은 다음과 같습니다.
python2가 있는 경우.x:
$ cd /myreact-project/htmlfiles/
$ python -m SimpleHTTPServer
python3의 경우.x
$ cd /myreact-project/htmlfiles/
$ python -m http.server
에 ''를 가리킬 수 있습니다.http://192.168.1.2:8000/<myfile.html>또는 python 모듈이 당신의 파일을 서비스하고 있는 곳이라면 어디서든 번거로움 없이 어떤 브라우저에서든 사용할 수 있습니다.
JSFiddle은 당신의 코드와 그 기능을 가지고 있습니다.스크립트를 이동해 보겠습니다.head 앞서서tut.js또 잊지 key이치노피들린에 넣었어요
언급URL : https://stackoverflow.com/questions/20904098/react-js-example-in-tutorial-not-working
'programing' 카테고리의 다른 글
| Twitter API 오류 215 (0) | 2023.03.22 |
|---|---|
| Content-type을 "application/json" POST 메서드, RESTful API로 변경 (0) | 2023.03.17 |
| AngularJS : 1개의 Angular 방향에서 여러 서브 요소를 변환합니다. (0) | 2023.03.17 |
| WordPress가 빈 post_in 배열에서 쿼리 결과를 표시하는 이유는 무엇입니까? (0) | 2023.03.17 |
| 'node_modules/@testing-library/react/dist/pure.js'에서 'react-dom/client' 모듈을 찾을 수 없습니다. (0) | 2023.03.17 |