This is a simple Yeoman Generator to help speed up the stubbing of a React <Component />. Each component is treated as an individual Module / Package with all files being co-located including optional tests.
Default Methods:
# ES6 Class extending React.Component
yo react-up <ComponentName> class
# Pure function
yo react-up <ComponentName> pure
# Note: `pure` is the default `type`, meaning you can simply run:
yo react-up <ComponentName>
# Create a new test / spec file
yo react-up <name> test
# Example used to show what information is made available to the templating engine
yo react-up MyTest example
Customization:
To create or modify existing methods available, simply update the object
returned in mappings.js of your local template folder. It's
a simple object with 3 properties.
example: {
description: 'example',
detail: 'The prompt presented to the user.',
files: [
[src1, destination1],
[src2, destination2]
]
}
And to run your custom generator we give it a name and pass in the type which should match the key set above.
# All generators are run using:
yo react-up name type
# We end up with something like:
yo react-up StatelessComponent pure
And to run your custom generator we give it a name and pass in the type which should match the key set above. And voila, we've just created a self-contained Component that can be tailored to suite my needs.
Installation:
Install Yeoman and this generator using NPM. Assuming NodeJS is installed:
# Install yeoman and the generator
npm install -g yo
npm install -g generator-react-up
Setup:
Running the generator for the first time will prompt a few questions to get things setup.
# Run the initial setup (should be run from the project root)
yo react-up
# You can run the setup at any point using:
yo react-up:setup
| 1. Would you like to run the setup? | |
| Running setup simply copies some files into a local directory of your choosing. This is done to enable a deeper level of customization. | Yes! |
| 2. Run generator from the current directory? | |
| Setting this to no will mean that each new Component is created in the Project root, the same location this setup should be running from :) | Yes |
| 3. Enter a custom domain | |
| The value entered here will be added to the package.json inside of each self-contained Component. | example.com |
| 4. Enter a local template path | |
| Feel free to set this to what makes the most sense. Optionally, you can choose to add either, or, .yo-rc.json / template folder chosen to your .gitignore or similar. | _templates/ |