I am new to react.js and somehow i have setup react environment with gulp build tool. I want to create custom React component and use it in another component. Please look at my code and help me.
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>
);
}
}
and 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();
}
});
});
}
Directory Structure is
ReactPractice
|
|---index.html
|---gulpfile.js
|--app
|---Components
| |--Header.js
|---Controller
| |--Login.js
Error when gulp file is run
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)
The path in the import statement is relative to where it is called from. Relative to Login.js, you need to move up a directory to access components/Header.js. Change the import to:
import {Header} from '../components/Header';