reaxi

react + cli

npm i -g reaxi

installing

reaxi

npx reaxi

one time use

• ⏩ quick create React components, pages and much more: full list

• :hand_over_mouth: Full Typescript Support --ts

• 📝 write jsx in cli

• 🚀Full next.js compatible (with further commands --next)

• 📦 library support: redux / apollo / styled / storybook

• 🔧 you can config your favorite options as defaults reaxi config

witness the power 👌

reaxi component PrettyButton --styled button --state --effect --ref --test --stories --fn --memo --callback --ts -p 'children, data, height, width, color' -c '<button color={color}>Click</button>'

Summary

Requirements - Usage - Generate - Parameters -

Examples - Next.js - Redux

Requirements

if you have node and can run npx you're ready to go

node --version
npm --version

basic knowledge of react: components / pages

Usage:

npx reaxi <generatorType> <name> --options...

reaxi component name # if installed global

# reaxi <type> <name> --options

reaxi list

to see all generators available

Generate

reaxi is the ultimate generation tool for react (can provide scaffold, configs)

how to create components, pages, ... in react ?

manual (boring) method:

• create a new file,
• Rename it,
• try to remember the syntax and type in letter by letter or type rfc and wait until intellisense wakes up

generate faster:

reaxi

just give a type, name and we're ready

optionally: start the component with props, content, state, effect, styled and more

full typescript support --ts

TIME

time is a precios thing and doing repeating tasks can costs worth of.... @todo

types: components, pages, hooks ,

with optional: content, props, useState, useEffect

Parameters:

type (required)

component
page
hook

name (required)

Name of the generated component

-n PrimaryButton

export default function PrimaryButton() {
    return <div></div>;
}

-c / --content

kickstart the component with content (can be jsx)

-c "<button class='btn btn-primary' onClick={()=> func} >Submit</button>"

remember to put the content inside "" quotes

export default function Component() {
    return (
        <div>
            <button class="btn btn-primary" onClick={() => func}>
                Submit
            </button>
        </div>
    );
}

-p / --props

kickstart the component with props

-p "children, data"

export default function Component({ children, data }) {
    return <div></div>;
}

--state

start the component with useState:

reaxi -g component -n StateComponent --state

import { useState } from 'react';

export default function StateComponent() {
    const [state, setState] = useState();

    return <div></div>;
}

--effect

start the component with useEffect:

--effect

import { useEffect } from 'react';

export default function EffectComponent() {
    useEffect(() => {
        effect;
    }, [dependencies]);

    return <div></div>;
}

--ref

start the component with useRef:

--ref

import { useRef } from 'react';

export default function WithRefComponent() {
    const MyRef = useRef();

    return <div></div>;
}

--styled <htmlElement>

import styled from 'styled-components';

// by default is div
// but you can pass any <htmlElement> like
// --styled main
// article, h1, p, ....

const Styled = styled.div`
    /* css */
`;

export default function StyledComponent() {
    return <div></div>;
}

--stories

Storybook

includes a .stories file with the component

reaxi component MyComponent --stories

// MyComponent.js
// MyComponent.story.js

--test

includes a .test file with the component

reaxi component MyComponent --test

// MyComponent.js
// MyComponent.test.js

--aw

change the generation to arrow functions

const Component () => <div></div>

--fi

Component as folder index

MyComponent/index.js

--fn

Component as folder name

MyComponent/MyComponent.js

-f / --folder

override the default folder path to generate:

-f ./my-components-path

defaults:

• components: ./components
• pages: ./pages
• hooks: ./hooks
• redux: ./store
• apollo: ./cache
• tests: ./__tests__

You're at:

JohnDoe/Documents/ReactProjects/my-app/

reaxi component -n Header --folder ./src/layout

will be created at:

JohnDoe/Documents/ReactProjects/myapp/src/layout/Header.js

if you want to create at src/components:

--folder src/components

./src/components/Component.js

examples:

reaxi component CustomButton -c '<button onClick="() => fn ">Im a button mate</button>'
reaxi component Text -c 'paragraph'
reaxi component Heading -c 'Custom experiences, code, mod !'
reaxi component Container -c '{children}' -p 'children, height, width'
reaxi component DataTable -c '{data.map(item=>{<li key={item.id}>{item}</li>})}' --state --effect -p 'data'

Ultimate React

reaxi ultimate <params>

...

Next.js

--next

next.js specific commands

start a page with: Static Generation: --SSG --getStaticProps

Server-side Rendering --SSR --getServerSideProps

Stable Incremental Static Regeneration: --ISR --getStaticPaths

Redux

reaxi redux <params>

redux-toolkit

--slice

redux specific command, creates a complete slice

--store

redux specific command, creates a store folder with all configs set

Roadmap:

• [x] generate components
• [ ] generate pages
• [ ] generate hooks
• [ ] generate styled
• [ ] generate ...

• [ ] generate redux store / slices
• [ ] generate apollo client / cache

• [ ] next.js version

  --next (getStaticProps / getServerSideProps / getStaticPaths )

Bug report:

...

Feature Request:

...

Contributing:

mixins -> data -> generators -> your pretty new component ✨

templates data can be modified by mixins passed by options

reaxi [under dev]

global, package.json, much more coming soon