jedwatson / generator-react-component Goto Github PK
View Code? Open in Web Editor NEWReact Component Project Generator
License: MIT License
React Component Project Generator
License: MIT License
Hi Jed,
Awesome project! Thanks so much for your work.
The error code I have when I finish installing new project and try to "npm start" is:
MBP-Quang:react-signature dangquang2011$ npm start
[email protected] start /Users/dangquang2011/Desktop/SignaturePad/react-signature
gulp dev
(node:87592) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[00:26:13] Using gulpfile ~/Desktop/SignaturePad/react-signature/gulpfile.js
[00:26:13] Starting 'dev:server'...
[00:26:13] Finished 'dev:server' after 20 ms
[00:26:13] Starting 'build:example:files'...
[00:26:13] Starting 'build:example:css'...
events.js:160
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE :::8000
at Object.exports._errnoException (util.js:1007:11)
at exports._exceptionWithHostPort (util.js:1030:20)
at Server._listen2 (net.js:1253:14)
at listen (net.js:1289:10)
at Server.listen (net.js:1385:5)
at ConnectApp.server (/Users/dangquang2011/Desktop/SignaturePad/react-signature/node_modules/gulp-connect/index.js:62:19)
at new ConnectApp (/Users/dangquang2011/Desktop/SignaturePad/react-signature/node_modules/gulp-connect/index.js:38:10)
at Object.module.exports.server (/Users/dangquang2011/Desktop/SignaturePad/react-signature/node_modules/gulp-connect/index.js:185:12)
at Gulp.<anonymous> (/Users/dangquang2011/Desktop/SignaturePad/react-signature/node_modules/react-component-gulp-tasks/tasks/dev.js:6:11)
at module.exports (/Users/dangquang2011/Desktop/SignaturePad/react-signature/node_modules/orchestrator/lib/runTask.js:34:7)
npm ERR! Darwin 15.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.2.1
npm ERR! npm v3.9.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `gulp dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'gulp dev'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-signature package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gulp dev
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-signature
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-signature
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/dangquang2011/Desktop/SignaturePad/react-signature/npm-debug.log
How do I resolve this? I have searched everywhere.
Should npm release
do this?
Hi Jed, awesome project! What's the best way you've found to add CSS to a released component? Seems like just giving a dist file for people to copy/paste into their project is the modus operandi.
Also, how would you generally incorporate a less task into a generated react component that is meant to produce 'final' css, vs. the example and host page styling included? I've never used gulp, so it's not obvious to me if there's a task included in the react-component-gulp-tasks that I'm missing.
Thanks for any insights!
Would you accept a PR that added a default setup for testing the component?
I'd like to see this library ship with a bare-minimum testing setup. I'm no testing expert but I've spent a significant amount of time working out a testing setup for our teams. I've found Mocha and React shallowRenderer to be the best setup available today.
test
commandmocha.opts
file with default command optionstest/utils/dom.js
with document
mock and commented code for an browser setup with jsdomThere are 3 reasons I think Mocha is a great choice for testing in this project. None of these reasons will be a surprise to you but I'll list them for thoroughness:
Jest
is totally opaque. I am not aware of a way to easily watch
the filesystem or run a single test via the command-line. This slows the feedback loop dramatically when BDDing a component. Mocha
s command-line interface is accessible and well documented.One benefit that Jest has over Mocha is that it's being built alongside React. This becomes obvious in issues like this where tests fail due to an expectation in React for a global.document
definition, despite the fact that shallowRenderer
is designed for testing without a document
.
Mocha makes it pretty simple circumvent these. But a small amount of configuration is necessary.
I'd love to get started of this. Let me know if you think it would be a good fit for the project and what your criteria for acceptance would be.
❤️
Getting babel error:
Browserify Error { ReferenceError: [BABEL] /Users/max/workspace/frontend/resources/assets/js/react-components/example/src/example.js: Unknown option: /Users/max/workspace/frontend/.babelrc.presets while parsing file: /Users/max/workspace/frontend/resources/assets/js/react-components/example/src/example.js
if i do not want to remove babelrc, but how do i ignore this babelrc file?
Error: Command failed: git tag -a -m "Release v1.0.0" 'v1.0.0'
fatal: tag 'v1.0.0' already exists
at ChildProcess.exithandler (child_process.js:207:12)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:191:7)
at maybeClose (internal/child_process.js:852:16)
at Socket.<anonymous> (internal/child_process.js:323:11)
at emitOne (events.js:96:13)
at Socket.emit (events.js:188:7)
at Pipe._handle.close [as _onclose] (net.js:492:12)
I temporarily bypassed it by commenting out line #11 in ./node_modules/react-component-gulp-tasks/tasks/release.js
module.exports = function (gulp, config) {
gulp.task('publish:tag', function (done) {
var pkg = JSON.parse(require('fs').readFileSync('./package.json'));
var v = 'v' + pkg.version;
var message = 'Release ' + v;
git.tag(v, message, function (err) {
// if (err) throw err; // Commented out this line
git.push('origin', v, function (err) {
if (err) throw err;
done();
});
});
});
Hi, Jed. In windows, set NODE_ENV=production
is ok, but NODE_ENV=production
will throw an error, I found a node package cross-env
, it can help to set environment variables cross platform.
Broken dependency on require-dir within gulp-git, stack trace:
ypeError: require.extensions.hasOwnProperty is not a function
at requireDir (/Users/Kyle/Development/PactSafe/pactsafe-react-sdk/node_modules/require-dir/index.js:93:37)
at Object. (/Users/Kyle/Development/PactSafe/pactsafe-react-sdk/node_modules/gulp-git/index.js:4:18)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object. (/Users/Kyle/Development/PactSafe/pactsafe-react-sdk/node_modules/react-component-gulp-tasks/tasks/release.js:1:73)
Is it possible to write JSX if not what things do I need to change to get JSX to work?
I have a few different components inside a generator-react-component skeleton and I'm wondering if there's any way to export multiple components from the skeleton
how to parse ES6 'fat arrow' functions to ES5 using this generator? So far the building is crashing...
I admit this is a bit of a newbie question. I'm making a simple React Component that also depends on a CSS file. How do I make it so that the CSS file is included automatically when people install and require the NPM package?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.