• Create React Components from The Command Line with Agrippa
  • Nathan Sebhastian
  • The Nuggets translation Project

Agrippa is a development tool that lets you create React components on the command line. It greatly reduces the amount of template code you need to write when creating React components.

Template code is the content of the component and is referenced in the project. Written once, it can be used anywhere in the project

The following is an example of template code. When creating a React component, write the following code: import imports dependent components or files, write component content, and export exports component content.

import React from 'react';
import propTypes from 'prop-types';
import './App.module.css';

export const App = () = > {
  return <h1>Hello world!</h1>;
};

App.propTypes = {};
Copy the code

You can use TypeScript instead of PropTypes. App writes the parts of your template code for your custom component names and function bodies

What Agrippa does is generate the React component from its command line instructions which generate this and this template code. You can create a React component, but you don’t have to write the template part yourself.

Agrippa’s “Generator” functionality is very similar to that of Bit, but there is a fundamental difference.

Bit is a tool for component-driven development that manages workspaces for individual components. Agrippa has nothing to do with development strategy or project architecture.

Start using Agrippa and create the React App

Before you start using Agrippa, you can install the Agrippa package using NPM or use NPX directly:

npm install -g agrippa
# or
yarn global add agrippa
# or 
npx agrippa
Copy the code

Agrippa has only two commands:

  • generate(abbreviatedgen) to generate components
  • initTo generate the configuration

Wait for the Agrippa configuration. Now create a React project and test the generate command.

npx create-react-app example-app
cd example-app
Copy the code

Now that you have the React project, start using Agrippa. Let’s create a new component called Button, as shown below. Note that you can use generate or gen commands:

agrippa generate button
# or
npx agrippa generate button
Copy the code

It creates the component folder directly in the root directory, as shown below:

├─ ├─ ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txt ├─ download.txtCopy the code

You can open Button/index.jsx to find the following:

import React from 'react';
export const Button = () = > {
return (
  <div />
 );
}
Copy the code

If you might want to build components in/SRC or even/SRC /components.

You can specify a directory by adding a –base-dir or –destination option to the generate command:

agrippa generate button --destination src
Copy the code

The Button component will now be generated in the/SRC folder

Agrippa also has options that you can add to generate components with different components.

For example, you can use the — STYLING CSS option to generate components that contain a.css file:

agrippa generate button --styling css
Copy the code

Agrippa also comes with some smart defaults so that it will generate the right components for your development environment. When you use a type script, it generates a.tsx component instead of a.jsx component.

The tool automatically retrieves the tsconfig.json file in the project to determine if you are using TypeScript.

When you use TypeScript in a project, here is the contents of the index.tsx file for the same Button component:

export interface ButtonProps {}
export const Button: React.VFC<ButtonProps> = () = > {
return (
  <div />
 );
}
Copy the code

In addition, you can add the –typescript — TS option to force Agrippa to generate type-based scripts for components.

When building a new component, you can also add PropTypes to the component by adding the – –props prop-types option.

You can view the full command entry Agrippa Generate Command Options here.

Next, let’s take a look at what Agrippa’s init command does.

Use the init command to create the Agrippa configuration file

The init command allows you to create configuration files, so you don’t have to add the same configuration items to the command every time you generate a new React component.

The configuration file is a Json file named.agripparc.json

For example, most of the time, you want to generate components in the/SRC or/SRC/Components directory.

When you use generate command without adding the –base-dir option, Agrippa will generate components in the current working directory (which is usually in the project root by default)

So we add the –base-dir option like this:

agrippa generate footer --base-dir ./src
Copy the code

Another option that you may want to include when generating new components is the STYLING option. If your project uses CSS modules, then all of your components probably use CSS modules.

Since Agrippa’s default STYLING option is None, you will need to configure this option whenever new components are generated, as follows:

agrippa generate footer --styling css
Copy the code

However, there is a problem that every time we create a component we have to write the — STYLING and –base-dir options.

agrippa generate footer --base-dir ./src --styling css
agrippa generate header --base-dir ./src --styling css
agrippa generate button --base-dir ./src --styling css
agrippa generate link --base-dir ./src --styling css
Copy the code

So we need.agripparc.json to do uniform configuration to solve the above problems.

You can add these options to the.agripparc.json shown below instead of including the same options every time a new component is generated:

{
  "baseDir": "./src",
  "styling": "css"
}
Copy the code

Now, the STYLING and baseDir options are set in the configuration file, just need the component name when generating a new component:

agrippa generate footer
agrippa generate header
agrippa generate button
Copy the code

With the Agrippa profile, you don’t have to write the same repeat option every time you create generate.

conclusion

Agrippa is a great command line tool that allows you to directly command the generation of React components. Learn the basics and apply them to new or existing projects.

It also comes with a number of options to help your project generate the right components. You can also create a configuration file to avoid adding the same options every time you build a new component.

Agrippa also includes some smart defaults. For example, when you use the generate command, it detects for itself whether you are using TypeScript. If so, it will generate a.tsx component file instead of a.jsx file.

In the future, Agrippa will have more features, including the ability to use styled components for component style options.

If you’re interested in learning more about the tool or have some helpful suggestions, be sure to check out Agrippa’s GitHub repository.