반응 스캐폴드 생성

NPM: https://www.npmjs.com/package/react-scaffold-generate
라이브 데모: http://rsg.drewweth.com

에 대한

이 프로젝트는 React용으로 생성되는 레일 스캐폴드 포트입니다. 여기에서 Rail's scaffold generator에 대해 자세히 알아볼 수 있습니다. 주로 MVC(모델, 뷰, 컨트롤러) 생성기에 사용했습니다. CRUD 작업, 양식 생성, 양식 유효성 검사, 목록 세부 정보 프레젠테이션 페이지, 데이터베이스 마이그레이션, ActiveRecord를 통한 SQL 쿼리 및 모든 스타일을 하나의 명령으로 추상화했습니다.

이 프로젝트는 파일 템플릿, 동적 양식 생성, 라우팅 및 CRUD 상태 관리를 활용하여 이러한 개념을 React에 적용하고 많은 상용구 설정을 건너뛰어 모든 프로젝트를 강화합니다. 하나의 명령으로 전체 앱을 만듭니다.

다음은 react-scaffold-generate가 하나의 명령 후에 무엇을 할 수 있는지에 대한 배포된 데모입니다: http://rsg.drewweth.com

여기에서는 "인벤토리"개체를 관리하는 데 필요한 모든 파일을 만듭니다.


아래는 모델의 상태를 관리하기 위해 생성기가 생성한 5개의 서로 다른 페이지 사진입니다.

사용 예:

NPM 패키지: https://www.npmjs.com/package/react-scaffold-generate

템플릿 설치npm install -g react-scaffold-generate
새 React 앱 만들기

# Create new app called example-app
npx create-react-app example-app 
# Change working directory to example-app cd example-app


# Create component Template for Inventory with 4 attributes
react-scaffold-generate generate Inventory \
    name:string \
    description:string:textarea \
    isSold:boolean \
    seller:string:email

출력은 다음과 같습니다.

Success wrote and merged models.json to src/components/models.json
Success wrote model.js to src/components/Inventory/model.js
Success wrote static component to src/components/Form.js
Success wrote static component to src/components/Router.js
Success wrote static component to src/components/State.js
Success wrote static component to src/components/Shared.js
Success wrote static component to src/components/Networking.js
Success wrote static component to src/components/ScaffoldHome.js
Success wrote static component to src/components/Component.css
Success wrote model component to src/components/Inventory/Details.js
Success wrote model component to src/components/Inventory/Edit.js
Success wrote model component to src/components/Inventory/List.js
Success wrote model component to src/components/Inventory/New.js
Success wrote model component to src/components/Inventory/Routes.js
Success wrote index.js component to index.js

react-scaffold-generate에서 사용하는 의존성 설치

# Used for browser routing, very common React dependency
npm install --save react-router-dom
# Used for form generation form UI and css
npm install --save @rjsf/material-ui
# Dependency for notifications
npm install --save react-notifications

템플릿의 일부가 <App>에서 <Router>를 src/components/Router.js.로 바꾸는 index.js를 덮어씁니다.

마지막 단계, 예제 앱 시작

npm start

명령 인수

react-scaffold-generate generate [ModelName] [list of attributeName:attributeType:atributeFormat
모델의 속성 목록은 다음과 같습니다.


유형
체재
설명


부울

버튼 참/거짓

부울
고르다
참과 거짓을 구분하기 위해

끈

끈

끈
이메일
@ 및 . 도메인

끈
우리
프로토콜://도메인

끈
데이터-uri
UTC8로 파일

끈
데이트
현지 날짜

끈
날짜 시간
현지 날짜 및 yyyy/mm/dd

끈
비밀번호
입력을 표시하지 않음

끈
색깔
16진수 코드로 직렬화된 색상 선택기

끈
텍스트 영역
단락 텍스트 양

숫자

더블

숫자
위아래
증가 및 감소

숫자
범위
최소/최대 사이

정수

정수 값


more details on react-jsonschema-form types

모델을 생성한 후 src/components/MODEL_NAME/model.js로 이동하여 필드, 유형, 표시 형식 및 필드가 필요한지 여부(기본값은 필요하지 않음, 즉 false)를 포함하는 모델 정의를 검사하고 변경할 수 있습니다.

내부 구조(무슨 일이야)

• 공통 파일 세트와 모델 특정 파일 세트가 있습니다. 공통 파일은 src/components에 생성되며 상태 관리, 앱 라우터, 동적 양식 구성 요소 등에 대한 논리를 포함합니다.

• 모델별 파일은 src/components/MODEL_NAME에서 생성되며 상태 작업(목록, 세부 정보, 편집, 신규)에 대한 구성 요소, 모델에 대한 라우팅 세부 정보를 포함하는 경로 구성 요소 및 모델의 스키마를 보유하는 model.js를 포함합니다. JSON 형식의 모델.

• scaffold로 생성된 모델의 이름이 포함된 키 목록이 포함된 파일models.json이 있습니다. 이 파일은 Navbar를 생성하고 경로를 동적으로 가져오는 데 사용되며 react-scaffold-generate가 실행될 때 병합됩니다.

• 현재 '모든 공통 파일(Components.css 포함) 및 모델별 디렉토리 내용(model.js 포함)은 생성기가 실행될 때 덮어씁니다(이를 방지하기 위해 플래그를 추가하지 않았습니다). 만일을 대비하여 사용자 지정 논리와 스타일을 되돌릴 수 있도록 git을 사용하십시오.

지역 개발

이 저장소를 복제한 후 다음을 실행합니다.

# Install dependencies
npm i
# Creates example-app, runs react-scaffold-generate, installs extra dependencies
npm run setup
# Runs templater and example-app
npm run watch

setup example-app을 만들고 해당 디렉토리에 종속성을 설치합니다. watch 템플릿 또는 cli.js가 업데이트되면 템플릿과 example-app을 다시 로드합니다.

기여

저장소를 분기하고 풀 요청을 엽니다.

https://github.com/firstcontributions/first-contributions

기능 토론이나 질문이 있는 경우 Github에서 문제를 열고 discussion 레이블을 지정하십시오.