reactjs-cli-tools
v1.0.2
Published
A minimalist cli tool for React
Downloads
5
Readme
The official page of the tool is under construction if you want to help in the creation of the theme you can support this project in the sponsors button or here.
Created by Manu Codes
Installation
npm i -g reactjs-cli-tools
(try with sudo if it doesn't work)
Usage
Currently it only works to create components and you can do it in the following way:
run reactjs generate | g component | c <componentName> <directory> <ptions>
Options
-S, --style
: Create index.scss at the component folder
-F, --functional
: Create a functional component
-TS, --typscript
: Use .tsx extention
-T, --test
: Add .test.tsx file for tests
-ust, --useState
: Implements useState hook
-uef, --useEffect
: Implements useEffect hook
-uco, --useContext
: Implements useContext hook
-ume, --useMemo
: Implements useMemo hook
-ure, --useRef
: Implements useRef hook
-urd, --useReducer
: Implements useReducer hook
-udi, --useDispatch
: Implements useDispatch hook
-h, --help
: display help for command
#Example
The following command create a Functional Component with an implementation of useState and useEffect hook and a index.scss file for the component style:
reactjs g c Button ./components -F -S -ust -uef
Result:
components
Button/
index.jsx
index.scss
...
index.jsx:
import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import './index.scss'
/*
* Button
* Add description for your component
*/
export const Button = (props) => {
const [state, setstate] = useState(null)
useEffect(() => {
// effect
return () => {
// cleanup
}
}, [/* input */ ])
return (
<div className="Button">
</div>
)
}
Button.propTypes = {
}
export default Button;
index.scss:
.Button {
/* Put your component styles here ;) */
}
Fixes & Enhancements
reactjs-cli-tools is a young tool and there is still much to add, such as support for test and react native.