나는 react.js를 처음 접했고 어떻게 든 gulp 빌드 도구로 반응 환경을 설정했습니다. 커스텀 React 컴포넌트를 만들어 다른 컴포넌트에서 사용하고 싶습니다. 내 코드를보고 도와주세요.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React and ES6</title>
</head>
<body>
<div id="testdiv"></div>
<script src="web/js/dist/login.js"></script>
</body>
</html>
Header.js
import React from "react";
export class Header extends React.Component {
render(){
return (
<nav class="navbar navbar-static-top">
<div class="navbar image-container"></div>
<nav class = "navbar menu-container">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact Us</a></li>
</ul>
</nav>
</nav>
);
}
}
및 Login.js
import React from "react";
import {render} from "react-dom";
import {Header} from "./components/Header.js";
class Login extends React.Component {
render(){
return(
<div>
<Header/>
<h1>Login Test!!</h1>
</div>
);
}
}
render(<Login/>, window.document.getElementById("testdiv"));
gulpfile.js
// declarations, dependencies
// ----------------------------------------------------------------------------
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var gutil = require('gulp-util');
var babelify = require('babelify');
var notifier = require('node-notifier');
var watchify = require('watchify');
// External dependencies you do not want to rebundle while developing,
// but include in your application deployment
var dependencies = [
'react',
'react-dom'
];
// Gulp tasks
// ----------------------------------------------------------------------------
gulp.task('scripts', function () {
bundleApp(true);
});
gulp.task('deploy', function (){
bundleApp(true);
});
gulp.task('watch', function () {
gulp.watch([
'./app/Controller/*.js'
], ['scripts']);
});
var notify = function(title, message) {
notifier.notify({
title: title,
message: message
});
gutil.log(title + ': ' + message);
};
// When running 'gulp' on the terminal this task will fire.
// It will start watching for changes in every .js file.
// If there's a change, the task 'scripts' defined above will fire.
gulp.task('default', ['scripts','watch']);
var reactFiles = {
path: [
{
from: ['app/components/Header.js'],
to: 'Header.js'
},
{
from: ['app/components/Home.js'],
to: 'Home.js'
},
{
from: ['app/controller/login.js'],
to: 'login.js'
}
],
watchPath: ['web/controller/*.js']
};
// Private Functions
// ----------------------------------------------------------------------------
function bundleApp(isProduction) {
// Browserify will bundle all our js files together in to one and will let
// us use modules in the front end.
var finished = 0;
reactFiles.path.map(function(reactModuleEntry){
var appBundler = browserify(reactModuleEntry.from)
.transform(babelify, { presets: ['es2015', 'react'] })
.bundle();
appBundler.pipe(source(reactModuleEntry.to))
.pipe(gulp.dest('./web/js/dist'))
.on('finish', function() {
finished++;
if (finished === (reactFiles.path.length - 1)) {
notify('Reactify', 'build: done')
//done();
}
});
});
}
디렉토리 구조는
ReactPractice
|
|---index.html
|---gulpfile.js
|--app
|---Components
| |--Header.js
|---Controller
| |--Login.js
gulp 파일 실행시 오류
events.js:72
throw er; // Unhandled 'error' event
^
Error: Cannot find module './components/Header.js' from '/home/subro/reactpractice/app/controller'
at /home/subro/reactpractice/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
at load (/home/subro/reactpractice/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
at onex (/home/subro/reactpractice/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
at /home/subro/reactpractice/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
at Object.oncomplete (fs.js:107:15)
import명령문 의 경로 는 호출 된 위치를 기준으로합니다. 에 비해 Login.js액세스하려면 디렉토리 위로 이동해야합니다 components/Header.js. 가져 오기를 다음으로 변경하십시오.
import {Header} from '../components/Header';
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다