I searched around for a simple tool like this and could not find one so… I wrote my own, and now I am a published NPM coder!
Updated to version 2.0.0 which is compatable with the removal of PropTypes from react. If your project uses ‘prop-types’, the current syntax is correct. If you’re not using them (which is not best practice), just delete the line.
Also includes default blank state object just waiting for your data!
Currently in version 1.1.1, with this command line tool, you can create new component files quickly in ES6 (or optionally ES5) including the bare necessities of importing react files, and rendering your main
In version 1.1.0 I added the ability to create a CSS file alongside the component file, according to the methodology recommended by Andrew Farmer.
I used this on my own projects and it saved me all the tedious typing involved in creating new component files and also prevented the introduction of typos.
You don’t have to follow his system to use Trot, but for the CSS options, it helps to understand his system (if someone knows if this is a ‘standard’ basic approach to CSS/React I’d like to link to the original resource. Still learning.
it is on version 0.0.2 and will likely need a lot of initial patches before it’s “prime time ready”. but if you are an FCC camper learning or writing react, please consider helping me improve this package.
The first thing on my -todo list is to add ES6 syntax as well, I’ll do that this evening most likely.
I welcome any and all feedback on improvements to my code, features you’d like to see, suggestions on adding flag options, etc.
Huh, I’m not familiar with Webstorm so I couldn’t help you out there
To use the tool in the way you want, you’ll likely need to install it globally so you can run it from anywhere on your system. However, I think you need to do a bit more setup to get it working as a proper CLI tool, so you can type: trot -c app.js App.
Actually Justin Clagg submitted a pull request that cleaned up the underlying code for the templates and also simply rmoved the console log of it for improved readability. I think that’s good b/c a console full of text output spannign lines may get unwieldy.
that was one of my questions…I merged the pull request, do I also have to republish?
One annoying thing…I’m trying to keep a change long, obviously I don’t need every little thing there, but I need to update the readme with the correct version number and comments BEFORE publishing. Some how I find that an annoyance to document the version before I have the version.
I am posting again at the bottom here to get a bump and let everyone know i’ve updated this package to include an optional CSS file created along with the component file.
When using the CSS option, Trot will automatically import the css file into your component file, give your main rendering Div the appropriate matching class name, and create a starter style in your css with a grayish background and lightish text so you know right away your code is working. (if you are using hotloading).
The CSS structure is from Andrew Farmer’s “Your First React App” which I used and it saved me HOURS of time…great instruction. I used trot to build my app as well and it makes coding React from the ground up more fun!
Updated to version 2.0, which is compatible with prop-types having been removed from react. Actually collaborator Jay Hayes updated this back in November and I’ve just now updated the versioning and NPM package.