react-clix v1.0.2
React-CLIX
React-CLIX is a CLI tool to scaffold React projects with Redux and RTK Query. It provides useful commands to streamline React development, including setting up Redux, RTK Query, and creating React components easily.
Installation
To install react-clix globally, run:
npm install -g react-clixAlternatively, if you do not want to install it globally, you can install it locally in your project:
npm install react-clix --save-devAfter installing locally, you can run the commands using npx:
npx react-clix <command>Commands
1. create-app <name>
Creates a new React application with an optional TypeScript setup.
Global Usage:
react-clix create-app my-appLocal Usage:
If you have installed react-clix locally in your project, run:
npx react-clix create-app my-appOptions:
-t, --typescript: Use a TypeScript template for the project.
Example:
react-clix create-app my-app -tOr, using npx for local installation:
npx react-clix create-app my-app -t2. init-redux
Initializes a Redux store in an existing React project. This command will create a store.js file in the src directory, including basic Redux setup and configuration.
Global Usage:
react-clix init-reduxLocal Usage:
If react-clix is installed locally, run:
npx react-clix init-reduxExample:
cd my-existing-react-app
react-clix init-reduxOr:
cd my-existing-react-app
npx react-clix init-redux3. add-rtk-api <apiName>
Adds a new RTK Query API with the specified name to the Redux store. It generates the API slice in the src/services/ directory and sets up everything for you.
Global Usage:
react-clix add-rtk-api <apiName>Local Usage:
If react-clix is installed locally, run:
npx react-clix add-rtk-api <apiName>Example:
react-clix add-rtk-api authApiOr:
npx react-clix add-rtk-api authApi4. create-slice <sliceName>
Creates a new Redux slice with the specified name and integrates it into the Redux store. It also updates the necessary files to include hooks for easy usage within React components.
Global Usage:
react-clix create-slice <sliceName>Local Usage:
If react-clix is installed locally, run:
npx react-clix create-slice <sliceName>Example:
react-clix create-slice userSliceOr:
npx react-clix create-slice userSlice5. create-component <componentName>
Generates a new React component in the specified path under the src directory. By default, it creates the component in the src/components folder. You can also specify a relative path.
Global Usage:
react-clix create-component <componentName>Local Usage:
If react-clix is installed locally, run:
npx react-clix create-component <componentName>Options:
-p, --path <path>: Relative path from thesrcdirectory where the component should be created.
Example:
react-clix create-component MyComponent -p components/uiOr:
npx react-clix create-component MyComponent -p components/uiExamples
Creating a New React App:
Global:
react-clix create-app MyNewApp -tLocally:
npx react-clix create-app MyNewApp -tInitializing Redux in an Existing App:
Global:
cd MyExistingApp react-clix init-reduxLocally:
cd MyExistingApp npx react-clix init-reduxAdding an RTK Query API:
Global:
react-clix add-rtk-api productsApiLocally:
npx react-clix add-rtk-api productsApiCreating a Redux Slice:
Global:
react-clix create-slice cartSliceLocally:
npx react-clix create-slice cartSliceCreating a React Component:
Global:
react-clix create-component Button -p components/commonLocally:
npx react-clix create-component Button -p components/common
Installation for Development
If you are developing react-clix or want to modify it:
Clone the repository:
git clone https://github.com/yourusername/react-clix.gitInstall the dependencies:
npm installTo test your CLI tool locally, link it globally:
npm link
This will allow you to use react-clix commands globally on your machine.
Contributing
Contributions are welcome! Please open an issue or submit a pull request to contribute to the project.
License
This project is licensed under the MIT License - see the LICENSE file for details.