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
create-react-app <project-name> --scripts-version bttf-react-scripts
-
cd
into project - try
yarn generate-component SomeComponentName
ornpm 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);
});