Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add generate-component script to react-scripts #1886

Closed
wants to merge 7 commits into from

Conversation

bttf
Copy link

@bttf bttf commented Mar 23, 2017

Initially started out looking for a way to generate/scaffold components (much like ember-cli's generate command). Followed the discussion on #1492 but saw the scope was a bit larger than what I needed. This PR accomplishes providing a script to use for generating skeleton components. It's not finished and can use some work (eject use-case comes to mind), but wanted to get it out there to share w/ others and to get some feedback.

One of the 'big' changes I did was rename the template directory to templates, and within it, placed the app templates inside app/ and component templates in component/.

Steps to verify:

  • changes to react-scripts in this PR have been published to npm under bttf-react-scripts
  1. create-react-app <project-name> --scripts-version bttf-react-scripts
  2. cd into project
  3. try yarn generate-component SomeComponentName or npm run generate-component SomeComponentName

Examples:

$ yarn generate-component Checkbox && tree src/
yarn generate-component v0.21.3
$ react-scripts generate-component Checkbox
✨  Done in 0.31s.
src/
├── App.css
├── App.js
├── App.test.js
├── Checkbox.js
├── Checkbox.test.js
├── index.css
├── index.js
└── logo.svg
$ yarn generate-component MyTextArea MyTextArea && tree src/
yarn generate-component v0.21.3
$ react-scripts generate-component MyTextArea MyTextArea
✨  Done in 0.33s.
src/
├── App.css
├── App.js
├── App.test.js
├── Checkbox.js
├── Checkbox.test.js
├── MyTextArea
│   ├── MyTextArea.js
│   └── MyTextArea.test.js
├── index.css
├── index.js
└── logo.svg
$ yarn generate-component Checkbox
yarn generate-component v0.21.3
$ react-scripts generate-component Checkbox
Component/test file with name `Checkbox` exists. Cannot create component.
error Command failed with exit code 1.
$ cat src/Checkbox.js
import React, { Component } from 'react';

export default class Checkbox extends Component {
  render() {
    return (
      <div>
        <h1>Welcome to your new React Component</h1>
      </div>
    );
  }
}

$ cat src/Checkbox.test.js
import React from 'react';
import ReactDOM from 'react-dom';
import Checkbox from './Checkbox';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Checkbox />, div);
});

@viankakrisna
Copy link
Contributor

@bttf This is a wonderful feature! I really like that it create the test as well :)

@Timer
Copy link
Contributor

Timer commented Jan 9, 2018

Closing as stale. I suggest people use something like nwb for building libraries.

@Timer Timer closed this Jan 9, 2018
@lock lock bot locked and limited conversation to collaborators Jan 20, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants