react.md

fronit React options

Using fronit for React

For fronit to make React components, start by writing React (or R) after fronit. Then provide a name for the file/component after React. See example below.

fronit React Hello

Note: Bare minimum needed to create a React component is fronit React ComponentName!

Note: If no options were called, fronit will default React components to a class component with a .jsx extension!

Note: If choosing multiple types, for instance, choosing Class and Functional or choosing .js and .ts in the same command line, only 1 will be chosen!

Note: If class component was chosen, but hook options were called, the class component will be created but hooks will be ignored! Same goes for the other way!

Options

Here are all the available options and their flags:

Component Types:

• Class Component:

-c or --class

• Functional Component:

-f or --functional

• Pure Component:

-p or --pure

• State:

-s or --state

Lifecycle Methods:

Note: these will only work with class components

• getDerivedStateFromProps:

--gdsfp or --getDerivedStateFromProps

• componentDidMount:

--cdm or --componentDidMount

• shouldComponentUpdate:

--scu or --shouldComponentUpdate

• getSnapshotBeforeUpdate:

--gsbu or --getSnapshotBeforeUpdate

• componentDidUpdate:

--cdu or --componentDidUpdate

• componentWillUnmount:

--cwu or --componentWillUnmount

• getDerivedStateFromError:

--gdsfe or --getDerivedStateFromError

• componentDidCatch:

--cdc or --componentDidCatch

Hooks:

Note: these will only work with functional components

• useState:

--us or --useState

• useEffect:

--ue or --useEffect

• useContext:

--uc or --useContext

• useReducer:

--ur or --useReducer

• useCallback:

--ucb or --useCallback

• useMemo:

--um or --useMemo

• useRef:

--uref or --useRef

• useImperativeHandle:

--uih or --useImperativeHandle

• useLayoutEffect:

--ule or --useLayoutEffect

• useDebugValue:

--udv or --useDebugValue

File Type

• JS file:

.js or --js

• JSX file:

.jsx or --jsx

• TS file:

.ts or --ts

• TSX file:

.tsx or --tsx

Others

Props:

• propTypes:

--ptypes or --propTypes

• defaultProps:

--dprops or --defaultProps

Fragments:

• Fragments:

--frag or --fragment

Options Coming Soon

• Custom functions in an array
  • ex. --custom[handleClick, handleSubmit]
• Redux/MobX
  • ex. --redux or --mobx
• React Context
• Styled Components
• If you know some options that developers would want, please suggest them and let's discuss!