Quickly Generate React Components! Command Line Tool - Trot.js

1

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!

https://www.npmjs.com/package/trot
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

component.

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.

Here is the live 1 page app I created with his tutorial and using Trot.
https://adventurebear.github.io/react-race-search/

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.

ORIGINAL POST:
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.

3 Likes
2

Hi @AdventureBear

Good job!

I would say that snippets would be the most closely related tool I could think of; they’re also not limited to just one type of syntax and can cover anything written in plain text.

Most text editors have some sort of snippet functionality, Atom, Visual Studio Code, Sublime Text etc…

3

Thanks Joe, I tried to create snippets for Webstorm but could not figure it out! I followed the instructions and no snippet was created. I like this tool because it will write the file.

However in testing it on my own computer I’m running into an issue I’m not experienced with…

When I install it it’s not working as a command line interface because it’s nested deeply in my current app’s node_modules folder.

WOndering if I should try a global install, or how to get it to run from the command line using “trot” as the command instead of “node.js app”

Clearly there is a lot to learn in all aspects of coding !

4

Huh, I’m not familiar with Webstorm so I couldn’t help you out there :disappointed:

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.

Unfortunately, I don’t have any experience building command line tools, I did find this blog post thought that might help you: https://developer.atlassian.com/blog/2015/11/scripting-with-node/

5

Yeah i’ve done some local testing and it’s not workign teh way I want…which is the way you suggested,
trot -c App -v 6 -f src
as an example from the root directory of your project.

Thansk for that link, taking a break and I’ll get back to it, it’s a start.

6

Thanks for that link, I did it. It is now a command line script and seems to be working. I havn’t tried it in a project yet but that’s next.

7

Well, that is a coincidence, since I just published my first NPM package too ^^.
https://www.npmjs.com/package/text-draw

It’s been a fun experience! I hope you’re enjoying the ride too :slight_smile: .

1 Like
8

Nice job dude, I installed it on my system and it works :smile:

One thing I noted is that when it logs the output when you create, it logs the template version of the file:

class [comp] extends Component {
   constructor(){
       super()
    }

    render(){
        return (
            <div>
                <h1>[comp]</h1>
            </div>

        )
    }

}

export default [comp]

Perhaps you could have it so that it logs the correct name instead of the placeholder?

9

Good idea Joe thanks

10

Congratulations! You’res looks more involved than mine!!

1 Like
11

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.

12

Nice man, this is why I love open source software, collaboration is such a marvelous thing.

Don’t forget to publish it to NPM if you haven’t already :slight_smile:

13

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. :slight_smile:

14

You might find it easier to document releases on github, rather than the readme: https://github.com/AdventureBear/trot/releases.

That way, when you do update, all you have to do is up the version in package.json and publish. You can sort the release info out afterwards.

1 Like
15

Ok, great…someone already thought of this! I’l check it out and move things over. Perfect.

16

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!

1 Like
17

Trot.js has been updated to version 1.1.x (breaking changes with 1.0.x) and now allows nesting of newly created child components inside your parent components.

This can be done with any level of nesting, for example nesting child components in a parent, and further nesting “grandchildren” in child components.

I mocked up my recipe react app in less than 10 minutes using create-react-app and trot, and could them immediately get to coding my logic (the logic took a few weeks!).

I’ve coded up my game of life using trot as well, and it’s a really great way to quickly mock up the boilerplate for a react app of any complexity.

Let me know how it’s going by creating any issues or replying here. Thanks and I’d appreaciate a github star and of course any pull requests or feature requests.

2 Likes
18

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.