create-rkravikr-react

A small CLI-style project and collection of React example templates maintained by Ravi Kumar Verma. The repo contains a tiny scaffolding script (index.js) that copies a starter example into a new folder, plus several example React mini-projects demonstrating common concepts (forms, lifecycle, profile cards, todo list, routing).

Quick summary

• What this repo is: a tiny project scaffolder + multiple small React example apps.
• Primary use: run node index.js <app-name> (or install the package) to scaffold a new project based on the lab-prog template.
• Bundler / dev server: Vite (see package.json scripts).

Features

• Lightweight CLI entrypoint at index.js that copies a template folder into a target folder.
• Several self-contained example directories demonstrating small React patterns:
  • lab-prog/ — form example (default template copied by the CLI)
  • lifecycle/ — lifecycle / hooks demo
  • profile-card/ — profile card component example
  • remainder/ — simple todo / remainder UI (with components)
  • routing/ — small React Router example

Requirements

• Node.js 18+ (recommended)
• npm (or pnpm/yarn) to install dependencies

Installation (developer / local)

1. Clone the repo:

git clone https://example.com/your-repo.git
cd create-rkravikr-react

2. Install dependencies (for working on this repo itself):

npm install

3. Run the Vite dev server (if you open one of the example apps directly):

npm run dev

Usage — scaffolding a new project

The project provides a small scaffolder in index.js. By default it copies the lab-prog folder into a folder named by the CLI argument.

• Scaffold a new project locally (no publish required):

node index.js my-new-app

# then:
cd my-new-app
npm install
npm run dev

• If you want to make the CLI globally available locally (optional):

# from repo root
npm link

# then you can run
create-rkravikr-react my-new-app

Note: npx create-rkravikr-react my-new-app will only work if this package is published to the npm registry.

What the scaffolder does

• The script at index.js sets sourceFolder to lab-prog and copies that folder into the current working directory under the name you provide. If you want a different template, either copy another folder (e.g. profile-card) manually or modify index.js to point sourceFolder to another directory.

Example of changing the template source (quick edit):

// inside index.js
const sourceFolder = path.join(__dirname, "profile-card");

Available scripts (from package.json)

• npm run dev — start Vite dev server
• npm run build — build production bundle with Vite
• npm run preview — preview production build locally
• npm run lint — run ESLint across the repo

Example: run an example directly

cd lab-prog
npm install
npm run dev

Project layout (top-level)

• index.js — small scaffolding CLI that copies lab-prog into the named folder
• package.json — scripts, deps (React 19, Vite, etc.)
• lab-prog/ — default template used by the scaffolder (form example)
• lifecycle/, profile-card/, remainder/, routing/ — additional example apps

Each example folder is a minimal React app (JSX + CSS) intended for learning and experimentation. They are not currently published as separate packages — they are simple example projects you can copy or run directly.

Notes on dependencies and compatibility

• React v19 is used in the examples.
• React Router used at version noted in package.json (react-router-dom v7+ API may be different from earlier versions).
• Vite is used as the dev server / build tool.

Contributing

If you'd like to contribute:

1. Open an issue describing the change or bug.
2. Create a branch, make changes, and open a pull request.

Guidelines:

• Keep example apps small and focused.
• If adding an example, include a short README inside the example folder explaining how to run it.

Troubleshooting

• If a copied app fails to start, ensure you cd into the copied folder and run npm install first.
• When using the CLI, ensure you have write permissions to the target directory.

License

This project uses the MIT license — see package.json for the license field.

If you want, I can also:

• Add small READMEs inside each example folder with instructions specific to that example.
• Update index.js to accept a --template flag so the CLI can choose which example to scaffold.

If you'd like one of those, tell me which option you prefer.