기본 콘텐츠로 건너뛰기

개발자를 위한 React.js 툴 및 리소스

개발자를 위한 React.js 툴 및 리소스

개발자를 위한 React.js 툴 및 리소스

페이스 북이 2013 년에 라이브러리를 처음 공개 한 이후 React.js의 인기는 빠르게 증가하고 있습니다.이 프로젝트는 Github에서 다섯 번째로 가장 많이 출연 한 오픈 소스 프로젝트이며 React 개발자를위한 구인 광고도 크게 증가하고 있습니다. React는 사용자 인터페이스를 구축하기위한 간단한 JavaScript 프레임 워크입니다. 가장 두드러진 예로는 Facebook 및 Instagram이 있습니다.

React는보다 간단한 구조와 성능 최적화에 중점을 둔 Angular 또는 Backbone과 같은 MVC 프레임 워크에 대한 대안을 제공합니다. React가 앞으로 몇 년 동안 웹 개발 환경을 확실히 정의 할 것이기 때문에이 기사에서는 React 개발 영역에 발을 딛는 데 도움이되는 개발자 툴킷을 제공하고자합니다.

공식 React.js 문서

Facebook은 개발자에게 React의 주요 개념에 대한 자세한 문서를 제공합니다. 문서 외에도 React를 사용하여 대화 형 틱택 토 게임을 구축하는 방법에 대한 훌륭한 자습서와 React 개발자를위한 토론 포럼을 찾을 수 있습니다. 문서는 오픈 소스이므로 원하는 경우 편집 할 수도 있습니다.

공식 페이스 북 문서

React.js Github Repo

React Github Repo에서 필요할 때마다 React의 소스 코드를 확인할 수 있습니다. 현재 개발 상태에 대한 정보를 유지하려면 문제, 중요 시점 및 최신 풀 요청을 살펴볼 수도 있습니다. 문제가 발생하면 문제 해결 가이드를 약간 연구하는 것이 좋습니다.

React.js Github Repo

안녕하세요 월드 스타터 코드

빠른 반응을 원한다면 Codepen에서이 "Hello World"대화식 데모로 시작할 수 있습니다. 필요한 모든 자산과 시작 코드도 포함되어 있습니다. Babel도 켜져 있으므로 ECMAScript 6과 JSX 구문을 모두 사용할 수 있습니다. 이 펜을 포크하면 전체 환경을 스스로 설정할 필요없이 계속 진행할 수 있습니다.

JSFiddle 놀이터 반응 (JSX 유무)

React 연습을 시작할 수있는 장소를 원한다면 훌륭한 온라인 놀이터입니다. JSFiddle에서 호스팅되며 JSX가있는 버전과 JSX가없는 버전의 두 가지 버전이 있습니다. 더 편한 버전을 선택하십시오.

리 액트 앱 만들기

React 앱 작성은 React.js로 애플리케이션을 빌드하는 상용구입니다. Webpack, Babel 및 Browsersync와 같은 소수의 웹 개발 도구가 장착되어 있습니다. 이러한 도구는 기본적으로 작동하므로 도구 구성에 얽매이지 않고 즉시 작업을 시작할 수 있습니다. Facebook에서 사용하는 것과 동일한 프론트 엔드 스택을 제공하며 너무 번거 로움없이 풀 스택 React 개발에 뛰어들 수 있습니다.

React 앱 웹 사이트 홈페이지 생성

반응 CSS

ReactCSS를 사용하면 JavaScript에서 인라인 CSS 스타일을 추가 할 수 있습니다. ReactCSS는 React, Redux, React Native (React를 사용하여 네이티브 모바일 앱을 빌드하기위한 프레임 워크), 자동 접두사, 호버, 의사 요소 및 미디어 쿼리를 지원합니다. npm으로 빠르게 설치할 수 있습니다.

CSS 반응

반응 스타일

React Styleguidist를 사용하면 React.js 애플리케이션에 대한 스타일 가이드를 빠르게 생성 할 수 있습니다. MDX에 구성 요소의 README.md를 작성하면 생성기가 나머지를 처리합니다. 또한 Create React App과 함께 즉시 작동합니다.

반응 스타일 가이드 생성기

Belle React 부품

Belle은 "버튼", "카드", "스피너", "토글", "등급", 다른 폼 구성 요소, 프로젝트 등 프로젝트에서 사용할 수있는 일련의 React 구성 요소를 갖춘 React 구성 요소 라이브러리입니다. 다른 사람. 구성 요소는 모바일 및 데스크톱 모두에서 작동하며 사용자 지정할 수도 있습니다.

벨은 유일한 React 컴포넌트 라이브러리가 아니며 Github에서 React 위젯 또는 Elemental과 같은 다른 훌륭한 라이브러리를 찾을 수 있습니다.

Belle React 부품

스토리 북

다른 사람의 구성 요소 라이브러리를 사용하지 않고 자신 만의 것을 만들고 싶다면 React 구성 요소의 UI 개발 환경 인 React StoryBook을 사용해보십시오. 스토리 북을 사용하면 대화식으로 구성 요소를 개발할 수 있습니다. 자세한 설명서가 있으며 Storybook Hub에서 개발을 시작할 수 있습니다.

스토리 북 반응

반응 부트 스트랩

React-Bootstrap은 인기있는 Bootstrap 3 프론트 엔드 프레임 워크와 React를 통합합니다. 개발자는 기본적으로 React.js를 사용하여 Bootstrap 구성 요소를 다시 작성했습니다. 그 결과 반복 횟수가 적고 성능이 향상된 깨끗한 코드 기반이 만들어집니다.

리포지토리가 활발히 개발되고 있으므로 앞으로 API가 변경 될 것입니다. 현재 개발 상태에 대해서는 프로젝트 로드맵을 확인하십시오.

반응 부트 스트랩

반응 도구

Chrome 용 React DevTools는 Chrome 개발자 도구의 확장이며 구성 요소 계층을 검사 할 수 있습니다. Facebook은 개발자 커뮤니티가 새로운 React 앱을 개발할 수 있도록 돕기 위해 노력했습니다. 브라우저에 간단히 Chrome 확장 프로그램으로 추가 할 수 있습니다. Github에서도 해당 소스 코드를 찾아 볼 수 있습니다.

Chrome 용 DevTools 반응

DevTools 애드온은 Firefox 브라우저에서도 사용할 수 있으며 Firefox 애드온 페이지에서 설치할 수 있습니다.

from http://mechasis.com/7 by ccl(A) rewrite - 2020-03-11 02:20:29

댓글

이 블로그의 인기 게시물

SPA (Single-page Application)

SPA (Single-page Application) 데스크탑에 비해 성능이 낮은 모바일에 대한 니즈가 증가하면서 스마트폰을 통해 웹페이지를 출력하기 위해서는 기존 방식과는 다른 접근이 필요해졌다. 이를 위해 등장한 기법이 바로 SPA이다. Single-page application (SPA) 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트 SPA에서 HTML, JavaScript, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가하는데, 보통 사용자의 동작에 응답하게 되는 방식이다. SPA와의 소통은 웹 서버와의 동적인 통신을 수반하기도 한다. 이러한 접근은 연속되는 페이지들 간의 사용자 경험의 간섭을 막고, 애플리케이션이 더 데스크톱 애플리케이션처럼 동작하도록 만들어준다. 예를 들어 보통 웹 사이트처럼 여러 페이지가 있고 로그인, 회원가입, 글쓰기 등 복잡한 기능을 지원하지만, 이는 처음 호출된 HTML 상에서 필요한 데이터만 호출하여 화면을 새로 구성해 주는 것으로 실제로 페이지의 이동이 일어나지 않는다. 기존의 웹 사이트는 내용이 변하지 않아도 페이지를 이동할 때마다 서버에서 코드를 생성해 새로 읽고 클라이언트에서는 이 코드를 페이지에 렌더링하게 된다. SPA에서는 이러한 부분들이 처음 웹 사이트 접속 시 한 번만 요청되고 페이지를 이동할 때는 변경되는 view 부분만 데이터를 받아서 렌더링하기 때문에 속도가 빠르다. 불필요한 코드 요청이 줄어 처리량과 트래픽이 적어진다. 물론 SPA에도 단점은 있다. Google 같은 검색 엔진은 SPA를 색인화하는 데 어려움을 겪는다. 한 페이지 내에서 모든 동작을 진행하다 보니 URL이 변경되지 않아 검색의 색인이 어렵다. 대표적인 라이브러리 및 프레임워크로는 React, Angular, Vue가 있다. 장점 간편한 운영 배...

[Vue] Angular 2 대신에 Vue.js를 선택한 이유

[Vue] Angular 2 대신에 Vue.js를 선택한 이유 들어가며 이 글은 Medium 의 "Why we moved from Angular 2 to Vue.js(and why we didn't choose React)" 글을 번역한 글입니다. 항상 이상적일 수만은 없는 실제 프로젝트 여건에서 신중하게 프레임워크를 고민하고 선정해 나가는 과정을 상세하게 기술한 글입니다. Angular 2로 구축되어 있는 프로젝트를 업그레이드 & 마이그레이션 하는 과정에서 프로젝트의 현 상황과 여건을 반영한 프레임워크 선정 기준을 세우고, Vue.js 프레임워크를 적용해 나가는 개인 경험담이 담겨져 있습니다. 급격하게 요동치는 프론트엔드 프레임워크 시대에, 프론트엔드 개발자로서 항상 어떤 프레임워크를 선정해야 할지 고민하는 데 인사이트를 제공하는 글이 되길 바랍니다. 본문 우리는 최근에 Rever 라는 사이트에 Vue.js로 개발한 웹 페이지를 오픈했습니다. 16주 동안 641 개의 커밋이라는 강도 높은 개발 과정을 지나고 나니, Vue.js 도입하기를 잘했다는 생각이 듭니다. 8 달 전에 우리는 Angular 2를 쓰고 있었습니다. 정확하게 말하자면 Angular 2 베타 9 버전이었죠. 외주가 Angular 2로 제작해놓은 웹 사이트가 있었는데, UX/UI부터 설계까지 한 번도 만족한 적이 없었습니다. 심지어 어느 부분에 대해서는 Angular 2 자체가 맘에 들지 않았어요. 경험담을 더 얘기하기 전에, Angular 2 베타 9와 Angular 2.0는 완전히 다른 제품이라고 말하고 싶습니다. 그렇기 때문에 문제가 있었죠. Beta 9부터 2.0.0까지 8 개의 Beta 버전이 있었습니다. RC 8 개와 2.0.0 버전, 그리고 업그레이드까지 합치면 총 17 개의 버전이 있었죠. 우리는 Beta 9에서 2.0.0으로 업그레이드를 시도했지만, 상당히 많은 부분들이 호환되지 않아 업그레이드 작업이 버거워졌습니다. ...

(주)레터플라이 채용 정보: 프로그래밍을 생각하면 가슴이 뛰는 개발자...

(주)레터플라이 채용 정보: 프로그래밍을 생각하면 가슴이 뛰는 개발자... Angular.js, Python, MySQL 중 한 가지 언어에 뛰어나신 분도 좋고 개발 업무 전반적으로 센스가 있으신 분도 환영합니다. 맡은 업무를 성실하게 수행해 나갈 수 있는 책임감과 태도를 갖고계신 분, 그리고 항상 새로운 방법론에 도전하고 포기를 모르는 분일수록 저희와 더욱 잘 맞을 것 같습니다. Angular.js, Python, MySQL 중 한 가지 언어에 뛰어나신 분도 좋고 개발 업무 전반적으로 센스가 있으신 분도 환영합니다. 팀 내 뛰어난 풀스택 개발자분들이 Angular.js, Python, MySQL 모두 작업 가능하시니 오셔서 함께 배우며 즐겁게 작업하시면 됩니다. 맡은 업무를 성실하게 수행해 나갈 수 있는 책임감과 태도를 갖고계신 분, 그리고 항상 새로운 방법론에 도전하고 포기를 모르는 분일수록 저희와 더욱 잘 맞을 것 같습니다. 개발 업무: 레터플라이의 핵심 기능인 편지, 사진을 제작하는 레터에디터, 포토에디터 개발. 이 기능들은 "모바일 웹을 통한 출력제품 생산 자동화 기술"(특허 출원 준비중)로서 레터플라이에서 자체개발했습니다. 근무 지역: 광화문역 5번출구 바로 앞 근무 환경: 책임과 존중을 중요시하는 수평적인 분위기, 도전적이며 서로에게 배우는 문화 근무 시간: 10-19시, 출근시간 자유 지정. 급여: 연봉/스톡옵션 협의 지원 방법: 팀 지원하기 더 많은 내용은 더 많은 내용은 더팀스 에서 확인하세요! from http://theteams.tistory.com/721 by ccl(A) rewrite - 2020-03-20 09:20:18