Generate React components by replicating your own

Last update: Jul 27, 2022

generact

Generated with nod NPM version Build Status Coverage Status


Tool for generating React components by replicating your own.
It's intended to work no matter how your file structure is.


generact

 Are you looking for a VS Code extension? Try vscode-generact.


It already works with boilerplates such as create-react-app (above example), react-boilerplate, react-starter-kit and ARc (ok, I'm self-promoting here πŸ˜† ). So, most likely this will work for you with your current project.

Install

$ npm install -g generact

Motivation

Facebook poll Facebook poll

I usually work on different projects with different file structures. Whenever I needed to create a new component, the approach I used was to copy and paste a similar or very basic component and start writing the new component from it. Talking with other developers, this seemed like a very common process.

However, I've never been satisfied with that. It looked like I was doing a robot job. So why not create a robot to do that?

Usage

$ cd ~/my-projects/my-react-project
$ generact

That will scan ~/my-projects/my-react-project for components to replicate.

Specify another root path to find components

If you want to replicate components from another directory, you can do that by using root option:

$ generact --root relative/or/absolute/path/to/any/react/project

Specify component path to replicate

generact will probably find all component files inside the root path automagically (using list-react-files). But, if it doesn't, you can still pass in the component path:

$ generact relative/or/absolute/path/to/component.js

Contributing

PRs are welcome.

Use npm run watch while coding.

License

MIT Β© Diego Haz

GitHub

https://github.com/diegohaz/generact
Comments
  • 1. Alternative pattern for matching local imports

    Closes #14

    Hi, I've managed some time to try to solve your issue, hope will be useful :)

    Current solution is far from being perfect, nonetheless as alternative, matches local imports in one .replace() cycle and passes assumed tests.

    Drawbacks:

    • current master code badly matches in dependency import (previously reported in issue),
        -    import NodeButtonComponent from 'node-component/lib/Button'
        +    import NodeButtonComponent from 'node-component/lib/AnotherButton'
    
    • the naming of import is not changing, IMO it's 'ok' as fair as we are not replacing inherited imports usage (eg. <SimpleButton> in code is not replacing currently)
        -    import SimpleAnotherButton from './SimpleAnotherButton'
        +    import SimpleButton from './SimpleAnotherButton'
    

    There is possibility for making it more readable/customisable by running multiple .replace(), but it would suffer from performance penalty and unexpected overwriting.

    Let me know about your thoughts on my contribution, thanks!

    Reviewed by Xarvalus at 2018-05-31 14:30
  • 2. Support for react native

    Does it support react native project? I added the extension to my vs code and tried in react native project but it was not working not even creating the directory. I also tried with installing generact globally but no use.

    Reviewed by Shhzdmrz at 2018-04-12 07:03
  • 3. Exposed functions to add support for editor extensions

    • moved actual replication step of replicate into separate function in utils.js
    • added option to pass in the current working directory for some of the util functions (because process.cwd() doesn't work for vscode extensions)
    • exposed utils.js so that its functions can be used by other modules
    • added typescript definition file for those functions (only the ones i used in vscode-generact)
    Reviewed by Dennitz at 2017-07-04 12:05
  • 4. Update dependencies to enable Greenkeeper 🌴

    Let’s get started with automated dependency management for generact :muscle:

    ⚠️ We found a yarn.lock file in this repository. You need to use greenkeeper-lockfile to make sure it gets updated as well.

    This pull request updates all your dependencies to their latest version. Having them all up to date really is the best starting point. I will look out for further dependency updates and make sure to handle them in isolation and in real-time, as soon as you merge this pull request.

    I won’t start sending you further updates, unless you have merged this very pull request.


    🏷 How to check the status of this repository

    There is a badge added to your README, indicating the status of this repository.

    This is how your badge looks like :point_right: Greenkeeper badge

    πŸ™ˆ How to ignore certain dependencies

    In case you can not, or do not want to update a certain dependency right now, you can of course just change the package.json file back to your liking.

    Add a greenkeeper.ignore field to your package.json, containing a list of dependencies you don’t want to update right now.

    // package.json
    {
      …
      "greenkeeper": {
        "ignore": [
          "package-names",
          "you-want-me-to-ignore"
        ]
      }
    }
    
    πŸ‘©β€πŸ’» How to update this pull request
      # change into your repository’s directory
      git fetch
      git checkout greenkeeper/initial
      npm install-test
      # adapt your code, so it’s working again
      git commit -m 'chore: adapt code to updated dependencies'
      git push origin greenkeeper/initial
    
    ✨ How the updates will look like

    As soon as you merge this pull request I’ll create a branch for every dependency update, with the new version applied. The branch creation should trigger your testing services to check the new version. Using the results of these tests I’ll try to open meaningful and helpful pull requests and issues, so your dependencies remain working and up-to-date.

    -  "underscore": "^1.6.0"
    +  "underscore": "^1.7.0"
    

    In the above example you can see an in-range update. 1.7.0 is included in the old ^1.6.0 range, because of the caret ^ character. When the test services report success I’ll delete the branch again, because no action needs to be taken – everything is fine. When there is a failure however, I’ll create an issue so you know about the problem immediately.

    This way every single version update of your dependencies will either continue to work with your project, or you’ll get to know of potential problems immediately.

    -  "lodash": "^3.0.0"
    +  "lodash": "^4.0.0"
    

    In this example the new version 4.0.0 is not included in the old ^3.0.0 range. For version updates like these – let’s call them β€œout of range” updates – you’ll receive a pull request.

    Now you no longer need to check for exciting new versions by hand – I’ll just let you know automatically. And the pull request will not only serve as a reminder to update. In case it passes your decent test suite that’s a strong reason to merge right away :shipit:

    πŸ’β€β™‚οΈ Not sure how things are going to work exactly?

    There is a collection of frequently asked questions and of course you may always ask my humans.


    Good luck with your project and see you soon :sparkles:

    Your Greenkeeper Bot :palm_tree:

    Reviewed by greenkeeper[bot] at 2017-07-15 02:27
  • 5. react-slingshot

    Some boilerplates, such as react-slingshot and electron-react-boilerplate, have flat structure like the following:

    components
    β”œβ”€β”€ AboutPage.js
    β”œβ”€β”€ AboutPage.spec.js
    β”œβ”€β”€ App.js
    β”œβ”€β”€ FuelSavingsForm.js
    β”œβ”€β”€ FuelSavingsForm.spec.js
    β”œβ”€β”€ FuelSavingsResults.js
    β”œβ”€β”€ FuelSavingsResults.spec.js
    β”œβ”€β”€ FuelSavingsTextInput.js
    β”œβ”€β”€ FuelSavingsTextInput.spec.js
    β”œβ”€β”€ HomePage.js
    β”œβ”€β”€ NotFoundPage.js
    └── Root.js
    

    generact can find component files, but it doesn't replicate .spec ones together. We need to cover this case.

    It also happens with create-react-app, for App.js, App.css and App.test.js. Currently, we only replicate App.js.

    Reviewed by diegohaz at 2017-06-05 05:44
  • 6. Action required: Greenkeeper could not be activated 🚨

    🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

    To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

    Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

    If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

    We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

    Reviewed by greenkeeper[bot] at 2017-06-03 18:13
  • 7. It could order by component name, not by file name

    I've got files structure, where child components of some main components are in sub-folders.

    eg

    TaskEditor/index.tsx, TaskEditor/Comments/index.tsx etc.

    So when I search for TaskEditor

    I've got

    image

    (and actually it was not 4th, I had to arrow down as it was like 20th)

    I think it could take all files matching, and then order by component name match

    Reviewed by pie6k at 2020-02-01 08:45
  • 8. String replace in copied file?

    Tried this for the first time. I was expecting it to string replace all the names in the new file, but it seems that's not currently a feature unless something broke for me.

    Is is something you'd consider?

    1. generact BigDogs
    2. Set new name SmallDogs
    3. generact auto replaces all versions of BigDog with SmallDog (so bigDog->smallDog, big_dog->small_dog, etc)
    Reviewed by flybayer at 2019-05-13 20:49
  • 9. The tool should pick up both capitalized and uncapitalized files

    My component folder have 5 files:

    • index.js
    • SignUp.js
    • signUp.styles.js
    • signUp.duck.js
    • signUp.saga.js and the cli only picks up SignUp.js and index.js (please correct me if I'm wrong, thanks).

    I checked the getFiles function inside utils.js and saw that it could be tweaked a little bit to support detecting both capitalized and uncapitalized files. Any idea is highly appreciated.

    Reviewed by bl5ck at 2018-11-24 02:50
  • 10. Component doesn't replace file name

    Hi,

    Thanks for creating this library. I am having one issue. After generating new component I am getting same file name. For example AppAnything is new component. But it file name is Button.js. Please note folder name change AppAnything after generating new component.

    I am using windows machine.

    Reviewed by marmikdesai at 2017-11-17 06:30
  • 11. BEM CSS Classes are not completly updated

    Hello,

    I tried to copy a Dashboard component into a new Configuration one. I use CSS BEM notation in this project, so CSS classes are like Dasboard__JobList. The issue is that classes are not updated:

    render() {
      return <section className="Configuration">
        <Content>
          <Title>Jobs</Title>
          <div className="Dashboard__JobList">
            { /* ... */ }
          </div>
        </Content>
      </section>;
    };
    

    I'll create a PR soon solving this issue. Can you give me any hint to keep in mind for developing your library?

    Thanks!

    Reviewed by Angelmmiguel at 2017-07-17 07:40
:control_knobs: Adds an option to your dev menu to console.log the contents of your AsyncStorage.
:control_knobs: Adds an option to your dev menu to console.log the contents of your AsyncStorage.

Async Storage Dev Menu Item This module adds an item to your shaky menu that lets you see what's in your AsyncStorage by logging it to your (JavaScrip

Jul 1, 2022
ADB service auto restarting shell. really helpful if you are as lazy as i am and don't want to restart your adb service manually when it stops detecting your android phone.

adb-auto-restarter ADB service auto restarting shell. really helpful if you are as lazy as i am and don't want to restart your adb service manually wh

Feb 14, 2022
See what packages are increasing your react-native bundle size πŸ“¦
See what packages are increasing your react-native bundle size πŸ“¦

react-native-bundle-visualizer See what's inside of your react-native bundle ?? Uses the awesome source-map-explorer to visualize the output of the Me

Jul 28, 2022
A CLI tool built to ease your daily React Native development
A CLI tool built to ease your daily React Native development

React Starter GearboX - a CLI tool built to ease your daily React Native development. Rationale Inspired by the cordova tool and motivated by the, uhh

Feb 14, 2022
πŸ“ A devtool for measuring pixel dimensions on your React Native screens

react-native-ruler ?? A devtool for measuring pixel dimensions on your React Native screens This is a proof of concept I threw together on a flight. E

Jul 25, 2022
react-native-user-defaults When to use UserDefaults when you want to store some small ,insensitive and permanent information in your app Installation

react-native-user-defaults When to use UserDefaults when you want to store some small ,insensitive and permanent information in your app Installation

Sep 26, 2021
React-Native library for the WidgetKit framework. Integrate a Widget into your App πŸπŸ“±
React-Native library for the WidgetKit framework. Integrate a Widget into your App πŸπŸ“±

react-native-widgetkit React-Native Library for the iOS ?? WidgetKit framework Table of Contents ?? Introduction ??‍?? Installation ??‍ Usage ????‍??

Jul 16, 2022
Call any JS functions from your native code

react-native-eval React has a good tutorial how to integrate React View to already existing application, but it doesn't provide a good way if you deci

Jul 19, 2022
react-native-webp adds support for WebP images for react-native components.

react-native-webp adds support for WebP images for react-native components. Installation npm install react-native-webp --save rnpm link (or manually a

Jul 19, 2022
The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools
The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools

React Native Debugger Run the redux example of react-navigation with Redux DevTools setup This is a standalone app for debugging React Native apps: Ba

Jul 30, 2022
Snoopy is a profiling tool for React Native, that lets you snoop on the React Native Bridge.
Snoopy is a profiling tool for React Native, that lets you snoop on the React Native Bridge.

React Native Snoopy UPDATE: I wrote an article with the story behind this library. Snoopy is a profiling tool for React Native, that lets you snoop on

Jul 19, 2022
Google Analytics for React Native! Compatible with react-native-ab

react-native-google-analytics is no longer maintained ?? Check out expo-firebase-analytics for universal React support (iOS, Android, web, & Electron)

Apr 25, 2022
Create responsive styles that use media query on react native web and Dimensions API on react native.

Create responsive styles that use media query on react native web and Dimensions API on react native.

May 10, 2022
βš›οΈ A web tool to support React Native developers in upgrading their apps.
βš›οΈ A web tool to support React Native developers in upgrading their apps.

Upgrade Helper A web tool to help you upgrade your React Native app with ease! ?? Open the tool! ?? How it works The Upgrade Helper tool aims to provi

Aug 3, 2022
Haul is a command line tool for developing React Native apps, powered by Webpack
Haul is a command line tool for developing React Native apps, powered by Webpack

A command line tool for developing React Native apps Notice We're actively working on a Haul successor, which would provide long awaited features like

Aug 3, 2022
:iphone: React Native Package Manager
:iphone: React Native Package Manager

Dear friends, Last November me (@Kureev) and Mike (@grabbou) started RNPM. We aimed to bring you a better developer experience and bridge the tooling

Jul 22, 2022
Rename react-native app with just one command

react-native-rename Rename react-native app with just one command This package assumes that you created your react-native project using react-native i

Aug 3, 2022
A react native module that lets you to register a global error handler that can capture fatal/non fatal uncaught exceptions.
A react native module that lets you to register a global error handler that can capture fatal/non fatal uncaught exceptions.

react-native-exception-handler A react native module that lets you to register a global error handler that can capture fatal/non fatal uncaught except

Aug 9, 2022
A platform to ease integration&delivery of React Native apps in existing mobile applications
A platform to ease integration&delivery of React Native apps in existing mobile applications

Electrode Native is a mobile platform that streamlines the integration of React Native components into existing mobile applications. With minimal chan

Jul 25, 2022