INTRODUCING CRAB!

A React CLI tool

The crab command line utility is intended as a CLI for React. It is drawn from extensive experience with the value of the comprehensive Ember CLI tool, but also inspired in part by VueCLI and create-react-app.

You can use crab to speed up your React development workflow, quickly scaffolding an app or adding new components instantly. This also includes full support for Redux.

npm install -g crab-cli

Vs create-react-app

Crab differs from create-react-app in three core ways.

A more comprehensive example scaffold. In particular, fully implemented Sass support, and a working router - one of the most challenging and poorly documented areas of the React ecosystem.
It includes code generators, which facilitate the creation of elements of UI, while improving React's developer experience.
Where create-react-app is setup and built with Webpack, crab uses ParcelJS. Parcel is much more user-friendly and provides support for a huge amount of the modern web world with zero config.

Usage

create

generate

destroy

crab

Create a file - currently a component, route or ES6 class - for React, using current best-practise.

Simple example

crab generate component components/Menu

As the generate command is aliased to g, and the file type is optional and defaults to component, the following is identical.

crab g components/Menu

A .js is appended to the filename automatically and is not required, but is harmless and will not duplicate if accidentally added.

You can create a component in any directory structure as long as the structure itself already exists.

crab g components/ui/nav/NavBar

It is also not necessary to be in the root, and more commonly easier to execute from the "app/components" directory.

You can now also generate a route, which will automatically try to add to the router and optionally the menu.

Options

Option	Description
-f, --functional	Creates a functional rather than class based component
-r, --redux	Add Redux boilerplate to this code
-t, --typescript	Create a typescript component rather than ES6
--menu	Add route to menu if possible (route only)
--path [value]	The path to use for a route link (route only)
--content	Content to put into the render block. Line breaks will be respected and can just be entered like so: </h2>\n<p>
--imports	Pre-written import statements to include in the head. Again, line breaks are respected.

Note that the last two options are intended to facilitate scripted generation of components, and do not particularly help daily workflows.

Create a new React app with crab, scaffolding up an app into the provided directory.

The app created is built for rapid development, and is set up with some example routes, instructions for how to get started, working sass impementation, and support for some advanced JavaScript features like async/await.

Optionally you can also scaffold with full Redux support, which will handle all the boilerplate and bindings that comes with React + Redux.

cd ~/Code
crab create my-new-app --redux
cd my-new-app
crab generate components/ContactUs --redux
parcel index.html
code .

This will create an app with redux support, build and serve the application at http://localhost:1234 with hot module reloading, add a new redux-aware component for a contact page, and open it for editing in Visual Studio Code.

Options

Option	Description
-r, --redux	Include redux dependencies and files, and create App as a working redux aware container
-t, --typescript	Create a TypeScript project. This will save as a permanent setting
--no-git	Skip git setup, does not init repository or add a .gitignore file to application

The core purpose of the crab CLI package is to allow you to execute the crab command. This will output a 🦀.

crab crab //Output: 🦀

Options

Option	Description
-a, --ascii	Creates an ascii crab instead: (\/)!_!(\/)