2019년 11가지 리액트 UI 컴포넌트 플레이그라운드 (11 React UI Component Playgrounds for 2019)

이 글은 Jonathan Saring11 React UI Component Playgrounds for 2019글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

UI 구성 요소를 위한 유용한 온라인 플레이그라운드 및 에디터

구성 요소(components)의 시대가 도래함에 따라 애플리케이션 UI의 구성 요소는 개발 프로세스의 더 큰 부분을 차지하게 됩니다.
UI 구성 요소로 구축하면 개발 속도와 구성 요소를 구성하고 공유할 수 있는 기능이 프로세스에서 매우 중요해집니다.
문서 작성기(docs builders)에서 온라인 플레이그라운드 및 카탈로그를 라이브로 제작하고 공유 속도를 높이는 등 이 워크플로우를 지원하기 위해 많은 도구가 구성되었습니다.
올바른 도구를 찾도록 돕기 위해 여기 React 구성 요소를 시각화, 테스트, 공유 및 개발하는 데 도움이 되는 몇 가지 유용한 플레이어가 간략하게 나와 있습니다. 자유롭게 의견을 말하고 자신의 제안을 추가하세요!

1. Bit

presentation
React components with Bit
Bit은 구성 요소를 공유하고 협업하기 위한 플랫폼입니다. 구성 요소를 구성하고 재사용하여 새 애플리케이션을 더 빠르게 구축할 수 있습니다.
당신과 당신의 팀을 위해 모든 구성 요소를 사용할 수 있게 됩니다. 사용할 구성 요소를 검색, 발견 및 선택할 수 있습니다. Bit은 구성 요소(UI 및 서버측)를 시각화하여 이러한 환경을 단순화합니다.
presentation

그런 다음, 작동 방식을 배울 수 있는 라이브 플레이그라운드에서 구성 요소를 가지고 놀 수 있습니다. 그런 다음 NPM/Yarn을 사용하여 구성 요소를 설치할 수 있습니다.
presentation
Bit는 구성 요소에 대한 문서(코드의 문서)를 표시하고 테스트가 작동하는지 확인할 수 있도록 분리하여 테스트를 실행합니다. 구성 요소를 위한 엔드 투 엔드(End-to-end) 도구입니다.
Bit의 컴포넌트 플레이그라운드는 리스트에서 가장 기능이 풍부한 플레이그라운드는 아니지만, 전체 제품을 고려하면, 컴포넌트를 재생하고 사용하는 것이 첫 번째 선택입니다.
사용해보세요:

2. Codesandbox

presentation
Codesandbox는 온라인으로 구성 요소를 재생할 수 있는 좋은 방법입니다. 이 회사의 훌륭한 제작자들은 "온라인 코드 편집기"라고 말합니다(describe it). 이 기능은 전송, 번들링 및 종속성 관리와 같은 작업을 자동화하므로 한 번의 클릭으로 새 프로젝트를 쉽게 생성할 수 있습니다. 재미있는 것을 만든 후에 여러분은 단지 URL을 공유함으로써 그것을 다른 사람들에게 보여줄 수 있습니다. CodeSandbox에는 입력하는 동안 코드 결과를 보여주는 라이브 미리 보기가 있습니다."
Release of v2.5와 함께 새로운 사이드바, "보기 모드", 플로팅 미리보기 등과 같은 새로운 UI 기능이 도입되었습니다. 또한 구성 지원, GitHub 및 Angular 템플릿에 대한 깔끔한 통합 기능을 제공합니다.
Codesandbox 클라이언트는 GitHub에도 릴리스됩니다.
Play with this React example live on Codesandbox

3. StoryBook and Styleguidist

Storybook과 Styleguidist는 React에서 빠른 UI 개발을 위한 환경입니다. 두 가지 모두 Reacts 앱의 신속한 개발을 위한 훌륭한 도구입니다.
Storybook을 사용하면 JavaScript 파일에 스토리를 작성할 수 있습니다. Styleguidist를 사용하면 Markdown 파일에 예를 작성할 수 있습니다. Storybook은 한 번에 하나의 구성 요소 변동을 표시하지만 Styleguidist는 여러 구성 요소 변동을 표시할 수 있습니다. Storybook은 구성 요소의 상태를 보여주는 데 유용하며 Styleguidist는 다양한 구성 요소의 문서화 및 데모를 위해 유용합니다.

StoryBook

이를 통해 구성 요소 라이브러리를 탐색하고, 각 구성 요소의 다양한 상태를 보고, 대화식으로 구성 요소를 개발 및 테스트할 수 있습니다.
presentation
StoryBook은 앱과 격리된 상태로 구성 요소를 개발할 수 있도록 지원하며, 이를 통해 구성 요소의 재사용 가능성과 테스트 가능성을 높일 수 있습니다.
웹에서 hot-reload로 구성 요소를 탐색하고, 해당 속성을 재생하고, 즉각적인 인상을 받을 수 있습니다. 여기서(here) 몇 가지 인기 있는 예를 찾을 수 있습니다. 플러그인을 사용하면 개발 프로세스의 속도를 높일 수 있으므로 코드 수정과 시각적 출력 간의 주기를 단축할 수 있습니다.

Styleguidist

React Styleguidist는 hot reloaded된 Dev Server와 구성 요소 propTypes를 나열하는 Living Style Guider가 있는 구성 요소 개발 환경입니다.
및 .md 파일을 기반으로 편집 가능한 사용 예를 보여 줍니다.
presentation
ES6, Flow 및 TypeScript를 지원하며 즉시 Create React App을 사용할 수 있습니다. 자동 생성된 사용 문서를 통해 Styleguidist는 팀의 다양한 구성 요소를 위한 문서 포털 역할을 할 수 있습니다.

4. React component playground

presentation
Formidable labs에 의해 구축된 component-playground는 편집 가능한 소스 및 라이브 미리보기로 React 구성 요소를 렌더링하기 위한 구성 요소입니다.
이 제품은 빠르고 쉬운 설정과 통합을 위해 설계되었으며, babel-standalone 으로 제작되었습니다.
build. 보다 친숙한 편집기 설정을 사용하는 동안 react-live보다 번들 크기가 큽니다(아래 참조).
presentation
react-live와 달리 component-playground는 server-side 렌더링을할 수 없습니다. 그러나 raw evaluation와 out-of-the-box할 수 있는 pretty-printed을 지원합니다. 멋진 프로젝트이니 마음껏 구경하세요.

5. Stackblitz

presentation
Stackblitz는 Visual Studio Code로 구동되는 "웹 애플리케이션을 위한 온라인 IDE"입니다. Codesnadbox와 마찬가지로 StackBlitz도 URL 링크를 통해 공유 가능한 Angular & React 프로젝트를 만들 수 있는 온라인 IDE입니다.
입력 시 종속성 설치, 컴파일, 번들링 및 핫 재로드 작업을 자동으로 처리합니다(automatically takes care). 인텔리전스 스마트 보완 기능((w/ type definitions from npm), 프로젝트 검색(Cmd+P), Go to Definition 및 기타 주요 VS Code 기능은 즉시 "작동"됩니다.
StackBlitz는 또한 Progressive Web App API’s를 사용하여 실시간 개발 서버를 브라우저에서 실행하므로 오프라인으로 코딩을 계속할 수 있습니다. 편집기의 핵심 패키지는 this GitHub repo에서 호스팅됩니다. 마음껏 뛰어 들어가세요.
https://stackblitz.com/
The online code editor for web apps. Powered by Visual Studio Code. - StackBlitz Edit descriptionstackblitz.com

6. React live

presentation
react-component-playground와 마찬가지로, 이것은 Formidable labs의 React playground이기도 합니다. React Live는 React 구성 요소를 렌더링하고 사용자에게 편집 가능한 소스 코드와 라이브 미리 보기를 제공하는 기능을 강조합니다.
서버측 렌더링을 지원하고 작은 번들로 제공되며, Bublé를 통해 코드를 전송하는 동안 이 코드는 Prism.js를 사용하여 표시됩니다. 그런 다음 변환된 코드가 구성 요소인 경우 미리 보기 구성 요소에서 렌더링됩니다. react-live입니다. 실시간 편집 리액트 코드를 위해 프로덕션 중심의 플레이그라운드를 제공하는 것을 목표로 하여 컴포넌트 플레이그라운드보다 모듈적이고 사용자 정의가 가능합니다. 한번 보세요.

7. JS Bin

presentation
Remy Sharp의 친숙하고 사랑받는 오픈 소스 공동 웹 개발 디버깅 툴은 온라인 코드 플레이그라운드의 선구자입니다.
JS Bin을 사용하면 코드를 작성하고 코드를 실시간으로 저장하고 전체 미리 보기를 실시간으로 렌더링할 수 있습니다. URL을 공유하고 편집하여 함께 작업할 수 있으며 원격 렌더링을 통해 플랫폼의 모든 장치에서 JS Bin의 출력을 실시간으로 볼 수 있습니다.
JS Bin은 커피스크립트, LESS, Markdown 및 Jade를 포함하여 즉시 프로세서를 제공합니다. 원격 Ajax 호출을 디버그할 수도 있습니다. CSS 및 JSX 지원을 통해 온라인 리액트 구성 요소를 사용하는 데 유용한 도구가 됩니다. 다음은 JS Bin을 사용하여 일반적인 React 에코시스템 도구를 설정하는 간단한 가이드(a short guide)입니다.
JS Bin A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...jsbin.com

8. CodePen

presentation
CodePen은 FrontEnd 개발자들이 시각적으로 스냅샷을 재생하고 공유할 수 있는 널리 인기 있는 온라인 개발 환경입니다. 개발자가 창의적으로 "펜"이라고 명명된 코드 조각들을 만들어 테스트할 수 있는 온라인 코드 편집기 및 오픈 소스 학습 환경으로 기능합니다.
HTML, CSS 및 JavaScript 스냅샷을 작성하고 실시간 미리 보기, 디버그, 공유 및 코드를 직접 확인할 수 있습니다. 사전 프로세서 구문에는 Sass, LESS, Stylus, PostCSS Markdown, Haml, Slim, Pug 등이 있으며 CodePen은 전시용 "프레젠테이션" 모드도 있습니다.
다음은 CodePen에 React 플레이그라운드를 설정하는 데 필요한 유용한 체크 시트(Cheatsheet)입니다.
CodePen A front end web development playground.codepen.io
Play with this React example by Dan Abramov live on Codepen

9.JSFiddle

presentation
Oskar Krawczyk와 Piotr Zalewa JSFiddle에 의해 2009년 JS에서 만들어졌으며 온라인에서 코드를 가지고 놀기 위한 베테랑이자 인기 도구입니다. 코드를 입력하여 결과를 볼 수 있는 패널을 제공합니다.
HTML — structure code, no need to add body doctype head , 자동으로 추가됩니다.
CSS — 스타일입니다. pre-pocessor에서 SCSS로 전환할 수 있습니다
JavaScript — behavior. 사용할 수 있는 프레임워크와 코드 pre-pocessor가 많이 있습니다..
Fiddle을 저장, 실행 및 심지어 다른 사용자와 작업하고 공유할 수 있으며, JSFiddle에서 호스팅 코드의 일부를 건너뛰고 GitHub 저장소에서 편집기에 직접 로드할 수 있도록 GitHub 통합을 제공할 수도 있습니다.
다음은 JSFiddle로 React 설정을 설정하는 두 가지 옵션(1+2)입니다.
Create a new fiddle - JSFiddle Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.jsfiddle.net

10. PlayCode

presentation
Playcode.io를 통해 Frontend 실험이 신속하게 이루어집니다. URL을 통해 프로젝트를 공유하고 전체 웹 응용 프로그램을 생성하고 데모처럼 도메인에 게시할 수 있습니다. playcode.io.입니다. 또한 콘솔을 사용하여 디버깅, jQuery, React, Vue 등과 같은 javascript용 lib를 사용할 수 있습니다.코드를 변경할 때마다 플레이코드 서버에 저장됩니다. 한번 보세요.
https://playcode.io/

11. UiZoo

presentation
Noam Elboim UiZoo.js가 만든 새롭고 유용한 동적 React component library는 구성 요소를 보여 주며, 이를 격리된 환경에서 개발하고 이미 가지고 있는 것을 탐색할 수 있도록 합니다.
각 구성 요소에 대한 페이지와 구성 요소를 검색 및 필터링하는 사이드바를 생성하는 UiZoo.js에 구성 요소 및 해당 문서를 제공할 수 있습니다.
JSDoc을 사용하면 구성 요소의 설명서를 구문 분석하여 구성 요소 페이지에 설명, 가능한 소품 및 전체 JSX 예를 비롯한 시각적 정보를 표시합니다. 이 프로젝트는 자체 version의 Doctrine을 사용하여 다양한 JSDoc 태그를 지원합니다. 자유롭게 GitHub를 살펴보시기 바랍니다.


Learn more





이 글은 번역 글입니다. 원본 링크입니다.



https://www.facebook.com/groups/224179755005643/

안녕하세요! Early adopter입니다.페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp