Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • C create-react-app
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1,547
    • Issues 1,547
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 417
    • Merge requests 417
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Meta
  • create-react-app
  • Merge requests
  • !1886

Add `generate-component` script to react-scripts

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge github/fork/bttf/master into master Mar 23, 2017
  • Overview 2
  • Commits 7
  • Pipelines 0
  • Changes 28

Created by: bttf

Initially started out looking for a way to generate/scaffold components (much like ember-cli's generate command). Followed the discussion on https://github.com/facebookincubator/create-react-app/issues/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);
});
Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: github/fork/bttf/master