Inspired by Rails generate; Mikey is a CLI / Framework for React/Redux applications. Mikey was designed to be simple, intuitive to use, and increase development speed and productivity of React/Redux applications. Mikey can generate React/Redux projects and files, saving the developer valuable time that can be spent building features. Mikey can also be used in any React/Redux project and is intended to be a broad solution.
To Install Mikey:
$ npm install mikey -g
To see a list of commands:
$ mikey
To Generate a new project:
$ mikey new projectName
When you create a new project, Mikey will run npm install
automatically in the created project directory. All you have to do is be patient, it is not frozen.
Once it is done, cd to project and start the server with:
$ npm start
Mikey projects are compatible with React / Redux Dev Chrome Extensions and also have hot reloading enabled. Dependencies are kept as minimal as possible. Mikey also contains ES6, SCSS/CSS Loading, Testing Setup, Production/Dev Config, and Source Mapping.
To build for production:
$ npm run build
You will see a build file inside of your project directory which can you upload.
To generate a new react file:
$ mikey g_action fileName
$ mikey g_component fileName
$ mikey g_container fileName
$ mikey g_reducer fileName
$ mikey g_helper fileName
Custom Files(section blow):
$ mikey g_file fileType
Use these commands in the root of your project.
Containers are components which hold logic such as mapping state to props, lifecycle methods, dispatching, and random methods. Containers act as further separation of logic and view.
Components are primarily the view layer and rendered inside of Containers.
Reducers are responsible for updating the state of your application. Reducers are pure functions, meaning they do not mutate the state. Reducers take the current state and return a new state object.
Actions are dispatched with a type and payload. Actions work with Reducers in updating the application store. Actions can contain Ajax requests or new information generated by a User.
Helpers are used for organizing random methods which can clutter your Containers and Components. Using helpers enable you to reuse methods over and over throughout your project (DRYer).
On file creation, Mikey will look through your working project directory for actions/components/containers/reducers/helpers folders and create the corresponding file type. If none of these folders exist, Mikey will create the file in the root of your project.
Mikey also creates .mikeyPath
folder in your project and saves the path of the file type generated. This is to optimize the speed of file creation. By saving this path Mikey does not have to dynamically find the folder again after each generated file.
A Test file is also generated when you generate a file.
If your project directory changes at all, delete .mikeyPath
folder to recache folder paths. .mikeyPath
folder is added to .gitignore
also.
You cannot create files that already exist.
To generate a new file and import one or multiple dependencies to top of file:
$ mikey g_container fileName -i depName
To import multiple dependencies to top of file:
$ mikey g_component fileName -i depName -i depName -i depName
To import with curly brackets:
$ mikey g_action thisActionFile -i {connect},react-redux
You can import with a comma and it will split it correctly:
import {connect} from 'react-redux';
Mikey will remember previous imports and store them as defaults for each file type. Stored imports are only stored once per file type.
You can include defaults by typing -d Y
(Yes) for using defaults, at the end of the generation command:
$ mikey g_component JimmyBob -d Y
$ mikey list fileType
| $ mikey -l fileType
If you want to list all stored defaults:
$ mikey list all
| $ mikey -l all
$ mikey erase fileType
| $ mikey -e actions
If you want to erase all stored defaults:
$ mikey erase all
| $ mikey -e all
Mikey will allow you to save react files as templates from your current project. Create a file in containers / components / reducers / actions / helpers folders and use the:
$ mikey save_template fileType
This command will save the file inside of Mikey as a template. File selection is without the .js extension. A list of files you can save will be displayed.
Once you've saved a template, you can reuse it in any project.
$ mikey g_file fileType
A list of custom templates of that file type will be displayed. A prompt will be displayed in the console for template choice and desired file name. The template file name will be used by default if no new name is entered. File selection is without the .js extension
If you want to delete a custom template:
$ mikey delete_template fileType
A list of custom templates of that file type will be displayed. The prompt will then ask which file you would like to delete. File selection is without the .js extension
If you would like to look at saved custom templates:
$ mikey list_templates fileType
This will display all saved custom templates for current file type.
If you would like to contribute, it would be greatly appreciated.
$ mikey -h
| $ mikey -V
| $ mikey
Current: 1.7.1: Added more test templates. Test template is chosen based on which file you are generating. Fixed README and added LICENSE text. Removed some console.log statements which were redundant. Changed helper template to contain basic const.
1.6.3: Added Custom Template generation/saving/deletion/listing. Refactored file generation to be DRY'er. When you deal with custom templates, prompts will be given to obtain more details about files. List is displayed on template deletion command. Ability to save a file in current project to reuse.
1.5.0: Changed Project generation to spawn
instead of exec
. Added some fun tidbits like colors and art to project generation. Refactored project generation to be cleaner and output more helpful information. Updated project template dependencies.
1.4.4: Mikey displays help when just typing mikey
. Modified Project Template App.js and store.js file to be more logical. Added actions index to import all actions to.
1.3.6: Generating files also generate corresponding tests. Switched testing files to .test.js to keep with consistency of other aspects of mikey. Previous generated projects will need to switch test script in package.json to be compatible with newly generated tests. Added new container template.
1.2.4: Project Template uses enzyme for testing.
1.1.8: New CLI Commands which are direct and logical, testing integrated in Project Creation Template. README reflects all changes for New CLI Commands and movement towards Mikey as a Framework.
1.0.0: New Project Creation Template with More Concise Documentation.