jedwatson / generator-react-component

React Component Project Generator

generator-react-component

Yeoman generator for React Components

Builds a React Component project with useful gulp tasks for development, build and publishing.

See react-component-gulp-tasks for documentation on how to use the gulp tasks.

Getting Started

Install the generator:

npm install -g generator-react-component

Then run the generator:

yo react-component

... and follow the prompts.

How to develop your component

Source

Your component source code is in src. You can use JSX and ES6 syntax freely in your component source; it will be transpiled to lib with Babel before being published to npm so that your users will simply be able to include it.

It's a great idea to add a description, documentation and other information to your README.md file, to help people who are interested in using your component.

Example & Preview

Preview your component with LiveReload:

npm start

A webserver will be started on localhost:8000 running the examples in example/src.

You can use this playpen to test your component, and then publish it as live examples to GitHub Pages, which is a great way to let potential users try out your component and see what it can do.

Lint your code!

npm run lint

Your code will be linted with ESLint, using the Babel parser and the React plugin. You can customise the settings by editing the .eslintrc file.

Build and Publish

npm run build

This will build your lib, dist and example/dist folders ready for release.

You can then publish your component to npm and GitHub Pages by running:

npm run release

Other npm scripts

examples

Just run the examples server; no code will be built or watched, everything in example/dist will be served on localhost:8000.

publish:site

Usually run as part of the release script, this will copy the contents of example/dist to your gh-pages branch and push it.

watch

This task watches the src folder for changes, and builds automatically into lib. This is useful if you are developing your component in another project using npm link.

Feedback?

I'd love to hear it. Open an issue or submit a PR.

License

MIT License. Copyright (c) 2016 Jed Watson.

generator-react-component's Issues

Tag already exists error when running 'npm run release'

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();
            });
        });
    });

How to include CSS with package?

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?

Question: LESS?

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!

Question: How can I easily publish the examples/dist in gh-pages?

Should npm release do this?

Does not work with Node v8

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)

Would you like a default setup for tests?

@JedWatson

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.

What it would add

• devDependencies
  • babel
  • mocha
• package.json
  • test command
• mocha config
  • mocha.opts file with default command options
  • test/utils/dom.js with document mock and commented code for an browser setup with jsdom

Why Mocha over Jest?

There 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:

1. Extensibility Mocha is an un-opinionated library. Assertion-style (assert/expect/should) can (and must be chosen by the developer. The same goes for stub/mock/spy libraries. Jest is much more prescriptive, being built atop Jasmine.
2. Speed Mocha is insanely fast. This generator is designed mostly for small projects, I'm assuming 1-10 components. Mocha should perform exceptional for this use case. Jest has a theoretical speed benefit for large projects, running tests in parallel. But I don't sees this every being an issue.
3. Ergonomics The command-line API for 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. Mochas command-line interface is accessible and well documented.

Shortcomings

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.

What would you like to see?

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.

❤️

@chantastic

Getting babel error:

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?

Question? JSX

Is it possible to write JSX if not what things do I need to change to get JSX to work?

NODE_ENV is not a command in windows when npm run build

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.

https://github.com/kentcdodds/cross-env

using ES6 'fat arrow' function

how to parse ES6 'fat arrow' functions to ES5 using this generator? So far the building is crashing...

Gulp

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.

Exporting Multiple Components

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