reactbootdev v1.0.44

reactbootdev

Project Overview

The objective is to develop Reactjs with a focus on entity-centric architectures, boosting productivity and smoothly linking it with JPA to facilitate effective CRUD operations. This project manages validation, transformation, and communication with the server through entities.

Features⬆

• Page
• Entity
• Repository
• Api
• Form

Installation⬆

bash

• Install typescript, reactjs project

npx create-react-app my-app --template typescript

• Install dependencies

npm i reactbootdev

npm i react-router-dom axios recoil uuid env-cmd lodash
npm i @mui/material @emotion/react @emotion/styled
npm i @craco/craco craco-alias
npm i styled-components 

# `@tanstack/react-query`
npm i @tanstack/react-query
# `react-hook-form`
npm i react-hook-form
# `class-transformer`
npm i class-transformer reflect-metadata es6-shim
# `class-validator`
npm i class-validator

• Install dev dependencies

npm install -D nodemon
npm install --save-dev @types/uuid

tsconfig.json

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "baseUrl": "src",
    "paths": {
      "@src/*": [
        "./*"
      ],
      "@components/*": [
        "components/*"
      ],
      "@utils/*": [
        "utils/*"
      ]
    },
    // ...
  },
  "include": [
    "src",
    "craco.config.js"
  ]
}

tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@src/*": [
        "src/*"
      ]
    }
  }
}

craco.config.js

const CracoAlias = require("craco-alias");

module.exports = {
    plugins: [
        {
            plugin: CracoAlias,
            options: {
                source: "tsconfig",
                tsConfigPath: "tsconfig.paths.json",
            },
        },
    ],
};

.env.production, .env.development

• Create blank files in root directory

.gitignore

# reactbootdev
src/reactbootdev

package.json

• Adjust scripts for reactbootdev, nodemon, env-cmd, craco

  "scripts": {
    "rt": "npx reactbootdev",
    "rtstart": "npm run rt && npm run start",
    "rtbuild": "npm run rt && npm run build",
    "rtnodemon": "nodemon -V --watch src --ext js,mjs,cjs,json,jsx,ts,tsx --delay 5000ms --exec \"npm run rt\"",
    "build": "env-cmd -f .env.production craco build",
    "start": "env-cmd -f .env.development craco start",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

App.tsx

import React from 'react';
import {ReactBoot} from "@src/reactbootdev/component/ReactBoot";

function App() {
    return (
        <div className="App">
            <ReactBoot/>
        </div>
    );
}

export default App;

Usage

Page

@page

• Add @page("/url") to class

MyPage.tsx

• Simple page

import React from "react";
import {page} from "@src/reactbootdev/decorator/page";

@page("/")
export class MyPage  {
    render() {
        return (
            <div>
                <h1>My Page</h1>
            </div>
        );
    }
}

WelcomePage.tsx

• Page with function component

import React from "react";
import {page} from "@src/reactbootdev/decorator/page";

export function WelcomeComponent() {
    return (
        <div>
            <h1>Welcome</h1>
        </div>
    )
}

@page("/")
export class Welcome {
    render() {
        return <WelcomeComponent/>;
    }
}

Entity

@entity

• Add @entity to class

src/entity/ProjectEntity.ts

import {entity} from "@src/reactbootdev/decorator/Entity";
import BaseEntity from "@src/reactbootdev/entity/BaseEntity";

@entity
export class ProjectEntity extends BaseEntity {
    id: number | null = null;
    name?: string
    description?: string
    startDate?: string
    endDate?: string
}

Repository

• Recoil Based Repository

src/repository/ProjectRepository.ts

import BaseRepository from "@src/reactbootdev/repository/BaseRepository";
import {v4 as uuidv4} from 'uuid';
import {ProjectEntity} from "@src/entity/Project";

export class ProjectRepository extends BaseRepository<ProjectEntity> {
    static defaultRepositoryKey = uuidv4()
    static defaultEntityClass = ProjectEntity;
}

src/component/CreateComponent.tsx

• Single Entity

import {ProjectRepository} from "@src/repository/ProjectRepository";
import {ProjectEntity} from "@src/entity/Project";

const CreateComponent = () => {
    const repo = useRepository(ProjectRepository);

    useEffect(() => {
        const defaultEntity = new ProjectEntity()
        defaultEntity.name = "test"
        
        repo.setEntity(defaultEntity)
    }, [])
    
    return (
        <>
            {JSON.stringify(repo.getEntity())}
        </>
    );
}

• Multiple Entity

import {ProjectRepository} from "@src/repository/ProjectRepository";
import {ProjectEntity} from "@src/entity/Project";

const CreateComponent = () => {
    const repo = useRepository(ProjectRepository);

    useEffect(() => {
        const defaultEntity = new ProjectEntity()
        defaultEntity.name = "test"
        const defaultList = [defaultEntity, defaultEntity]
        
        repo.setList(defaultList)
    }, [])
    
    return (
        <>
            {JSON.stringify(repo.getList())}
        </>
    );
}

Api

• ReactQuery Based Api

Form

• ReactHookForm Based Form

bash

npm run rtstart

Samples⬆

Take a look on samples in ./src/test/reactjs for more examples of usages.

Release notes⬆

See information about breaking changes and release notes here.