DOCUMENTATION

Quick-React Class Libraries API Documentation

N-ary Tree Class Library

Quick-React Class Library

Quick-React VS Code Extension

 

Quick-React Usage Documentation

Quick-React markup utilizes a JSX-like code syntax to describe the nested structure of your React components, the hooks you would like to utilize, and form elements that you wish to include in a component. You can get started by using the Quick-React Website to add a project to your account and start writing your project code or you can write your code in a .JS or .JSX file in the root level of the /src directory of your react project.

Quick-React does not install JS modules and dependencies and requires that create-react-app is utilized to create the base components and structure of your React project. You can then use Quick-React in your /src directory to jump-start your project.

Minimum markup code requirements:

Enclose your project code with React <> and </> tags. Include a self-closing Config component tag. Finally, enclose your project markup with <App> and </App> tags. 

<>
    <Config />
    <App>
        /* Your Quick-React Markup Here */
    </App>
</>

Quick-React Markup Code

Quick-React markup is a collection of React component tags, which each should be named with a name starting with a capital letter and should only include letters and numbers in the name. The Quick-React component tags may either be self-closing, ending with a forward slash and greater than character />, or must include a second matching closing component tag. Opening and closing tags for separate components cannot overlap.

Valid self-closing and paired component tags:

<>
    <Config />
    <App>
        <Header />
        <MainContent>
            <Article />
        </MainContent>
        <Footer />
    </App>
</>

Invalid markup that will be rejected as containing syntax errors:

<>
    <Config />
    <App>
        <Header>        <---- Not self-closing and no matching </Header> closing tag
        <link>          <---- Components should start with an initial cap
        <MainContent>   <---- The MainContent and Article opening and closing tags overlap
            <Article>
        </MainContent>
            </Article>
        <Foo-ter />     <---- Components should have names consisting only of letters and numbers
        <1Copyright />  <---- Component names cannot start with a number
    </App>
</>

Quick-React Component Tag Organization

Quick-React component tags not only specify what folders and files will be generated by the app, their placement, type, and nesting also specify the React hierarchy of the components and how they will be nested and called from one another.

Starting at the <App> level, which corresponds to the App.js file common to typical React projects, self-closing components and components with opening tags at that level will be imported and included in the App.js file.

In Sample #1, displayed directly below, Header, MainContent, and Footer will be imported and added to App.js. Quick-React will automatically create the following directories for all project within the /src folder: /components, /assets, and /images. Within the components directory a directory will be created for each component utilizing the component's name. Inside the component's directory, an index.js file will be created and will include the starting boilerplate JSX code for the component.

Looking at Sample #1 again, Header, MainContent, and Footer will be imported and rendered in App.js. Within the MainContent component, Article1, Article2, and Article 3 will be imported and will be rendered within the MainContent component. The Article2 component will import in the RegForm component and will render it as a child component. The nested structure of the React tags in the markup determine the nested structure of the components in the generated directories and files.

Sample #1 - Quick-React Markup Code

<>
    <Config />
    <App>
        <Header />
        <MainContent>
            <Article1 />
            <Article2>
                <RegForm />
            </Article2>
            <Article3 />
        </MainContent>
        <Footer />
    </App>
</>

Quick-React Component Attributes

The flexibility of Quick-React is provided through the ability to specify attributes for each component. Attributes serve to specify what boilerplate or scaffolding code should be generated by the app with each component.

Quick-React recognizes the following list of attributes that can be included inside a component tag:

  • bootstrap, bootstrap=true
  • reactbootstrap, reactbootstrap=true
  • react-bootstrap, react-bootstrap=true
  • fetch, fetch=true
  • fetch=GET
  • fetch=POST
  • fetch=PUT
  • fetch=DELETE
  • fetch=PATCH
  • fetch=get
  • fetch=post
  • fetch=put
  • fetch=delete
  • fetch=patch
  • link, link=true
  • switch, switch=true
  • route, route=true
  • router, router=true
  • map, map=true
  • form, form=true
  • forminputs='text, textarea, password, checkbox, radio, select'
  • hooks='useEffect, useState, useReducer, useContext, useLocation, useHistory, useParams'
  • useEffect, useEffect=true
  • useState, useState=true
  • useReducer, useReducer=true
  • useContext, useContext=true
  • useLocation, useLocation=true
  • useHistory, useHistory=true
  • useParams, useParams=true

The Quick-React parser goes out of its way to allow attributes to be specified in many different formats. You can include an attribute keyword by itself, or you can use the attribute=true variation of the attribute to indicate you wish to include the element. You can also list attributes as a comma separated list, with a comma, or a comma and space separating the attributes. Hooks may be listed in one attribute using a hooks='list of hooks' or hooks="list of hooks" format. Form inputs may also be specified in a single quote or double quote delimited format using the forminputs='list of field inputs' attribute.

*# or *## Attribute Multiplier

Quick-React supports an Emmet-style syntax of following an attribute with an * character and a single or 2-digit number, signifying that the referenced attribute element should be repeated the specified number of times.

[name1, name2, ....] Named Elements

Quick-React utilizes generic names for its generated boilerplate code function names and variable names. However, form field inputs, useEffect, useReducer, and useContext support custom names, which can be specified by including a square-bracket enclosed list of names following the attribute name. Examples are shown in code Sample #2 below.

Sample #2 - Quick-React Component Attributes

// Utilize react-bootstrap components for forms and other elements when possible.
// It is recommended to place the react-bootstrap attribute in the Config component.
// Utilize react-router for this project.

<Config react-bootstrap router />   


// Include useState, useReducer, and useContext in MainContent.
// Include base code for link, switch, and route React components.

<MainContent hooks="useState, useReducer, useContext" link switch route />


// Include code for an async fetch GET function.
// Include import statements and base code for useLocation, useHistory, and useParams hooks.
// Include a sample controlled HTML form and form handler functions.
// Include a sample array.map() anonymous function in the return rendering section of 
// this functional component.

<DataList fetch=GET useLocation useHistory useParams form map />


// Generate a form, including labels, with 4 text fields, 2 textarea fields, a password and confirm password field, 
// 5 checkboxes, and 2 radio buttons

<RegForm form forminputs="text*4, textarea*2, password, checkbox*5, radio*2" />


// Generate a form, including labels, with 3 named text fields and 2 named textarea fields

<RegForm fetch=PUT form forminputs="text[first_name, last_name, email], textarea[description, comments]" useState[loggedIn] />