Structor를 통해 React 구성 요소 만들기

Structor 소개

React UI Builder 변경 Structor

reactGitHub wiki에서도 Structor를 언급했다.
Structor: http://helmetrex.com/
이전에는 React UI Builder라는 이름이었으나 패턴을 바꾸면서 Structor가 된 것 같습니다.

Structor로 할 수 있는 거.

브라우저에서 Material-II 또는 React-Bootstrap 기반 구성 요소를 만들 수 있습니다.또한 어셈블리의 원본을 파일에 저장하여 사용할 수도 있습니다.그나저나 소스는 ES6를 기반으로 만들었다.
유튜브에 몇 개의 영상을 올렸는데 개요를 볼 수 있다.
YouTube: Speed designing of ToDo list with ReactJS and Redux
미묘한 부분도 있지만 빠른 조립품을 만들어 보고 싶다면 도움이 될 수 있다.

설정

Structor 설치

npm에 Structor를 전체적으로 설치합니다.$ npm install structor -g설치가 완료되면 임의의 디렉터리에 Structor 작업용 디렉터리를 만들고 이 디렉터리로 이동하여 Structor를 실행합니다.

$ cd {Structor作業用のディレクトリ}
$ structor

그리고 나서

Structor started successfully.
Please go to http://localhost:2222/structor

터미널에 표시되면 http://localhost:2222/structor를 방문하십시오.
↓ 이런 화면이 나온다.

보일러판의 선택

브라우저에 Structor를 표시한 후 작업을 시작하려면 페이지에 표시된 보일러 패널을 선택합니다.
이번에는 material-ui-prepack을 사용해 보세요.
보일러 보드 오른쪽 위의 "Clone"을 클릭합니다.

Clone이면 아래처럼 조금 기다려요.참을성 있게 기다리다.
(몇 분 지나도 끝나지 않았으면 다시 읽어보자. 이미 끝난 것 같다.)

Clone이 끝나면 다음 화면이 표시됩니다.

대표적인 내용

슬라이드 전환

다음 그림과 같이 화면의 왼쪽 위 모서리에 있는 선택 목록에서 페이지를 전환합니다.

화면에 추가할 수 있는 구성 요소 목록

화면에 추가할 구성 요소를 화면 오른쪽 위에서 "+"단추를 누르고 구성 요소 목록에서 만들 구성 요소를 선택하십시오.

+를 클릭하여 어셈블리 그룹: 을 표시합니다.

추가하기 전에 미리 볼 수도 있습니다.

화면에 실제로 추가하려면 먼저 다음 그림과 같이 어셈블리를 배치할 근처의 어셈블리를 클릭하여 어셈블리 메뉴를 표시합니다.

그 구성 요소에 놓으려면'Before','After'느낌으로 원하는 버튼을 눌러주세요.
Before를 클릭하면 다음 그림과 같이 위에 배치됩니다.

구성 요소 사용자 정의

방금 배치한 어셈블리의 색상과 같은 특성을 변경하려면 다음 그림에서 브러시 버튼을 클릭합니다.

그리고 화면 오른쪽에 속성 화면을 표시하여 변경할 수 있습니다.

제목을 바꾸어 보았다.

구성 요소 속성 보기

속성을 직접 편집하려면 구성 요소를 누르십시오.위 그림과 같이 어셈블리 추가 메뉴가 표시되면 Cancel 을 클릭합니다.

맨 오른쪽에 있는 기어 버튼을 클릭하면 편집 화면이 표시됩니다.

iconElementRight.props.나는 label을 변경해 보았다.

구성 요소의 소스 코드 내보내기

기어 버튼을 클릭하여 편집 화면의 Component 탭 페이지를 표시합니다.

"Generate Component's source code"를 클릭하면 다음 화면으로 전환하여 Group 이름, Component 이름을 입력하고 "Next"단추를 누릅니다.
Group은 어셈블리 일람표에 생성된 어셈블리를 표시하는 그룹입니다. 새 어셈블리를 생성하려면 고유한 이름을 입력합니다.