영상2000×1100 189KB
React 개발을 마스터하기 위한 선별된 무료 리소스 목록
목차
동기 부여
이 프로젝트는 React로 애플리케이션을 구축하는 방법을 배우고 개념을 이해하려는 사람들을 위한 최고의 무료 리소스 를 수집하는 것을 목표로 합니다. 2 Functional Programming, Composition, Unidirectional Data Flow 및 기타 많은 것과 같은 채택과 함께 제공됩니다.
필수 경로
왜 반응합니까?
반응
- React 문서 - 빠른 시작 섹션 19 basic
- React를 배우는 길 20 basic
ES2015+
- ES6 배우기(ECMAScript 2015) 9 basic
- ES6 탐색 5 advanced
- ES2016 및 ES2017 살펴보기 6 advanced
라우팅
- React 라우터 문서 14 basic
상태 관리
리덕스 2
- Redux 시작하기 27 basic
- Idiomatic Redux로 React 애플리케이션 구축하기 7 advanced
번들러
웹팩 2
물건 만들기
- 여러 프로젝트 아이디어 26
- 반응 - TodoMVC 9
- React 프로젝트 부트스트랩 5
- 날씨 앱 빌드 10
- React + Redux의 SoundCloud 클라이언트 4
- 반응 생태계에 대한 입문서: 1 1, 2 및 3.
- JSON 웹 토큰(JWT) 인증을 사용하여 React/Redux 앱 빌드 10
선택적 경로
정적 유형 검사기
흐름
타이프스크립트 1
불변 데이터 구조
불변.js 삼
이 가이드를 사용하는 방법
선형 접근 방식 을 사용하여 이 가이드를 완료하세요. 즉, 필수 경로 의 첫 번째 리소스부터 시작해야 합니다. 30 그리고 이전을 마친 후 다음으로 넘어가고, 배운 내용을 내면화하기 위한 실용적인 프로젝트를 만들어 보세요.
React의 생태계는 초보자에게 압도적입니다. 각각의 새로운 도구를 배울 수 있는지 확인 isolatedly .
React, Webpack 및 ES2015+에 대한 섹션에서 초기 리소스는 더 피상적이며 마지막 리소스는 해당 주제에서 더 깊이 설명합니다. 기본 사항을 먼저 배우고 나중에 다시 시작할 수 있지만 해당 문제에 대한 기본 지식 없이는 건너뛰지 마십시오.
필수 경로 를 완료한 후 선택 경로 에서 하나 이상의 주제를 선택할 수 있습니다 . 동일한 선형 접근 방식으로 이 섹션을 진행할 필요가 없으며 필요 및/또는 희망에 따라 학습할 새로운 주제를 선택해야 합니다.
협업 방법
새 섹션 또는 새 리소스를 제안하려면 각 리소스/섹션에 대해 해당 항목을 추가/제거해야 하는 이유를 설명하는 하나의 문제 를 엽니다 . 최소 5명이
귀하의 표시를 승인( )하면 풀 리퀘스트를 생성하도록 초대됩니다.
이러한 협업 방식을 유지하는 이유는 리소스 목록이 매우 간결하여 여기에 나열된 주제를 마스터하려는 사람들을 위한 최고의 리소스만 제공되도록 하기 위함입니다.
팀
- 프로젝트 작성자 : 에릭 더글라스 2
- 프로젝트 관리자 : Eric Douglas 2
- 기여자 : 기여자
영감 및 추가 리소스
영감
- 당신은 반응의 요점을 놓치고 있습니다 7
- 당신을 슬프게 하는 반응 2
- 반응 방법 2
- React 학습을 위한 타임라인 8
- React 애플리케이션 개발 학습을 위한 5단계 2
- React 학습 경로 2
추가 리소스
굉장한 반응
12
React 생태계에 관한 멋진 것들의 모음입니다.
반응
사용자 인터페이스 구축을 위한 JavaScript 라이브러리
React 일반 리소스
반응 커뮤니티
반응 온라인 놀이터
반응 튜토리얼
React 일반 튜토리얼
- React 공식 튜토리얼 삼
- Visual Studio Code에서 React 사용하기
- Scrimba - 대화식으로 무료로 React 배우기 2
- FreeCodeCamp 리액트 챌린지 삼
- 리액트 치트시트 4
- 반응 패턴 2
- React를 사용한 설정 흐름 1
반응 후크
- 반응 후크 4
- Redux를 React Hooks 및 컨텍스트로 교체하기 삼
- React Hooks 치트 시트: 일반적인 문제에 대한 솔루션 잠금 해제 1
- React Hooks로 데이터를 가져오는 방법은 무엇입니까? 1
- 이해하기 쉬운 React Hook 레시피 1
- 멋진 반응 후크 9
- 실용적인 예인 Hooks를 사용하여 React 채팅 앱 빌드 1
리액트와 타입스크립트
반응 성능
- 반응 최적화 성능 1
- React 프로파일러 소개
- React 최적화: 가상 DOM 설명
- React의 주요 성능 문제를 최적화하기 위한 확실한 가이드
- Twitter Lite 및 고성능 반응형 프로그레시브 웹 앱 대규모
- React DevTools 프로파일러를 사용하여 React 앱 성능 문제 진단
- 반응 성능을 높이는 5가지 주요 사례
- 반응은 느리고 반응은 빠름: 실제 반응 앱 최적화
- 반응 창으로 큰 목록 렌더링하기
내부 반응
- 화해 1
- React Fiber 아키텍처
- 나만의 React 빌드 1
- Inside Fiber: React의 새로운 조정 알고리즘에 대한 심층 개요
- 시각적 블록 구성표에 의한 전체 React 코드 기반 설명 1
인터뷰 질문에 반응
반응 도구
반응 개발 도구
- create-react-app - 하나의 명령을 실행하여 최신 웹 앱 설정
- react-starter-kit - 동형 웹 앱 상용구
- react-devtools - Chrome 및 Firefox 개발자 도구에서 React 구성 요소 계층 구조 검사
- react-hot-loader - 실시간으로 React 구성 요소 조정
- react-loadable - Promise가 있는 구성 요소를 로드하기 위한 고차 구성 요소
- loadable-components - React 코드 분할이 쉬워졌습니다.
- reactotron - React 및 React Native 프로젝트를 검사하기 위한 데스크탑 앱
- 동화책 1 - UI 컴포넌트 개발 및 테스트
- docz - Zero Config, Markdown + JSX를 사용한 라이브 리로딩 문서
- react-styleguidist - 생활 스타일 가이드가 있는 격리된 React 구성 요소 개발 환경
- 반응 우주 1 - 재사용 가능한 React 구성 요소를 만들기 위한 개발 도구
- eslint-plugin-react - ESLint에 대한 특정 린트 규칙에 반응합니다.
- eslint-plugin-jsx-a11y - JSX 요소의 a11y 규칙에 대한 정적 AST 검사기
- react-ax - React 애플리케이션에 대한 접근성 감사
- codesandbox - 통합된 React DevTools를 사용한 신속한 React 개발을 위한 온라인 IDE입니다.
- DataFormsJS JSX 로더 - 웹 페이지에서 직접 JSX를 JS로 빠르게 변환하기 위한 소형 JavaScript 컴파일러
반응 프레임워크
- 다음.js 4 - 반응 프레임워크
- gatsby.js - React 기반의 무료 오픈 소스 프레임워크
- 반응 관리자 2 - REST/GraphQL API를 기반으로 B2B 애플리케이션을 구축하기 위한 프론트엔드 프레임워크
- 리믹스 4 - 마지막으로 React Router 제작자의 킬러 React 프레임워크
반응 스타일링
- styled-components - 구성 요소 연령에 대한 시각적 기본 요소
- 감정 - JavaScript로 CSS 스타일을 작성하도록 설계된 라이브러리
- radium - React 컴포넌트 스타일링을 위한 툴체인
- jss 1 - CSS용 저작 도구
- aphrodite - 서버 측 렌더링, 브라우저 접두사 및 최소 CSS 생성을 지원하는 프레임워크에 구애받지 않는 CSS-in-JS
반응 라우팅
- 반응 라우터 1 - React를 위한 선언적 라우팅
- navi - React를 위한 선언적 비동기 라우팅
- curi - 단일 페이지 애플리케이션을 위한 JavaScript 라우터
- Reach - React용 차세대 라우팅
React 컴포넌트 라이브러리
- 재료 UI 2 - 더 빠르고 쉬운 웹 개발을 위한 React 컴포넌트
- 개미 디자인 4 - 자연과 결정의 가치를 지닌 디자인 시스템
- 청사진 1 - 웹용 React 기반 UI 툴킷
- 유창한 UI 1 - Microsoft 웹 경험을 구축하기 위한 일련의 React 구성 요소
- react-bootstrap - React로 만든 부트스트랩 컴포넌트
- reactstrap - 간단한 React Bootstrap 4 구성 요소
- semantic-ui-react - 공식 Semantic-UI-React 통합
- 상록 - 에버그린이 세그먼트에 의해 UI 프레임 워크 반응
- grommet - 깔끔한 패키지에서 접근성, 모듈성, 반응성 및 테마를 제공하는 반응 기반 프레임워크
- 차크라의 2 - React 애플리케이션을 위한 간단하고 모듈식이며 접근 가능한 UI 구성 요소
- 베이스 2 - styled-system으로 빌드된 기본 UI 구성 요소에 반응
- react-fontawesome - React용 Font Awesome 5 구성 요소 라이브러리
- reakit - React에 대한 액세스 가능하고 구성 가능하며 사용자 정의 가능한 구성 요소
- rsuite - React 컴포넌트 모음
- atlaskit - Atlassian 디자인 지침에 따라 구축된 Atlassian의 공식 UI 라이브러리입니다.
- 베이스웹 1 - Base Web은 웹 제품을 시작, 발전 및 통합하기 위한 기반입니다.
- 초기 반응 2 - 머티리얼, 부트스트랩 및 사용자 정의 테마를 특징으로 하는 50개 이상의 구성 요소가 있는 React용 완전한 UI 프레임워크.
- 반응 bulma 구성 요소 2 - Bulma 프레임워크용 React 컴포넌트
- 반응불마 1 - Flexbox 기반의 모던 CSS 프레임워크용 React.js 컴포넌트
- rbx - React를 위한 포괄적인 Bulma UI 프레임워크
- trunx - TypeScript로 구현된 멋진 Bulma의 아들인 Super Saiyan React 구성 요소
- tailwind-react-ui - TypeScript로 구현된 멋진 Bulma의 아들인 Super Saiyan React 구성 요소
- 꼬리 UI 삼 - tailwindcss 기반의 깔끔한 UI
- zeit-ui/반응 1 - 모던하고 미니멀한 React UI 라이브러리
반응 멋진 구성 요소
- 멋진 React 구성 요소 목록 4
- 반응 선택 2 - React를 위한 Select 컴포넌트
- react-beautiful-dnd 1 - React로 목록을 위한 아름답고 접근 가능한 드래그 앤 드롭
- react-dnd - React용 드래그 앤 드롭
- 반응 그리드 레이아웃 2 - 반응형 중단점이 있는 드래그 및 크기 조정 가능한 그리드 레이아웃
- 반응 테이블 1 - 가볍고 빠르며 확장 가능한 React용 데이터 그리드
- react-data-grid - React로 만든 Excel과 유사한 그리드 구성 요소
- 반응 드래그 가능 1 - 드래그 가능한 컴포넌트 반응
- 반응 크기 조정 및 이동 가능 1 - React용 크기 조정 및 드래그 가능한 구성 요소
- 반응 크기 조정 2 - 핸들로 크기를 조정할 수 있는 간단한 React 구성 요소
- 반응 크기 조정 상자 1 - React의 크기 조정 가능한 구성 요소
- react-searchbox-awesome - 최소한의 검색창
- react-sortable-pane - React의 정렬 및 크기 조정 가능한 창 구성 요소
- react-spaces - 중첩 가능한 크기 조정, 고정, 스크롤 가능한 구성 요소
- 반응 날짜 1 - 쉽게 국제화할 수 있고 모바일 친화적인 웹용 datepicker 라이브러리
- react-big-calendar - 캘린더 구성 요소
- react-datepicker - ReactJS Datepicker
- 반응 목록 1 - 다재다능한 무한 스크롤 React 구성 요소
- react-intl - React 앱 국제화
- 반응-i18next 1 - React의 국제화가 제대로 이루어졌습니다.
- react-aria-modal - 완전히 접근 가능한 React 모달
- 반응 단축키 1 - React를 위한 선언적 단축키 및 포커스 영역 관리
- 반응 키다운 1 - React 구성 요소를 위한 경량 키다운 래퍼
- 반응 기쁨 1 - 앱에 대한 가이드 투어 만들기
- 반응 가상화 1 - 큰 목록 및 표 형식 데이터를 효율적으로 렌더링하기 위한 React 구성 요소
- react-window - 큰 목록과 테이블 형식 데이터를 효율적으로 렌더링하기 위한 React 구성 요소
- react-text-mask - React용 입력 마스크
- 반응 로딩 스켈레톤 2 - 앱에 자동으로 적응하는 스켈레톤 화면 만들기
- 반응 스핀킷 1 - React용 CSS로 애니메이션된 로딩 표시기 모음
- 가감 저항기 1 - React로 제작된 접근 가능한 슬라이더 구성 요소
- qrcode.react - React와 함께 사용하기 위한 QR 구성 요소
- react-archer - React 요소 사이에 화살표 그리기
- react-pdf-viewer - React용 PDF 뷰어
- react-parallax-tilt - React 구성 요소에 틸트 호버 효과를 쉽게 적용
명령줄에 대한 반응
- 잉크 - 대화형 명령줄 앱에 대한 반응
- react-blessed - 축복받은 터미널 인터페이스 라이브러리용 React 렌더러
반응 테스트
- 농담 2 - 유쾌한 JavaScript 테스팅 프레임워크
- enzyme - React용 JavaScript 테스팅 유틸리티
- react-testing-library - 간단하고 완전한 React DOM 테스트 유틸리티
- react-hooks-testing-library - 좋은 테스트 사례를 권장하는 React 후크 테스트 유틸리티
- 위엄 있는 2 - Jest용 제로 구성 GUI
반응 라이브러리
- react-border-wrapper - React에서 div 테두리를 따라 요소를 배치하기 위한 래퍼입니다.
- react-magic - React의 강력한 기능으로 일반 HTML을 자동으로 AJAXify
- react-toolbox - Google의 Material Design 사양을 구현하는 일련의 React 구성 요소
- tcomb-react - React 구성 요소의 모든 소품을 확인할 수 있는 라이브러리
- react-responsive - 반응형 디자인을 위한 반응의 미디어 쿼리
- react-cursor - Facebook React와 함께 사용하기 위한 기능적 상태 관리 추상화
- Omniscient.js - 불변 데이터의 빠른 하향식 렌더링을 위한 React 구성 요소 추상화
- Touchstonejs - 아름다운 하이브리드 모바일 앱을 개발하기 위한 React.js 기반 UI 프레임워크입니다.
- Elemental - React.js 웹사이트 및 앱용 UI 툴킷
- StateTrooper - CSP를 사용하여 React 애플리케이션의 상태를 중앙에서 관리
- Preact: 동일한 ES6 API를 사용하는 빠른 3kb React 대안입니다.
- riotjs - React와 유사한 3.5KB 사용자 인터페이스 라이브러리
- Maple.js - 웹 컴포넌트의 개념을 React로 가져오기
- react-i13n - React 애플리케이션을 계측하기 위한 성능, 확장성 및 플러그형 접근 방식
- 반응 아이콘 - 인기 있는 아이콘 팩의 sv 반응 아이콘
- react-open-doodles - 반응 구성 요소로서의 멋진 무료 일러스트레이션.
- Keo - 파이프, 메모이즈 등과 같은 기능적 장점이 있는 React 구성 요소를 생성하기 위한 보다 기능적인 Deku 접근 방식을 위한 일반 기능…
- Bit - 애플리케이션 전반에서 react 및 기타 웹 구성 요소를 관리하고 사용하기 위한 가상 리포지토리
- AtlasKit - Atlassian의 React UI 라이브러리
- ReactiveSearch - Elasticsearch용 UI 구성 요소 라이브러리
- Slate - 서식 있는 텍스트 편집기를 구축하기 위한 완전히 사용자 정의 가능한 프레임워크입니다.
- react-json-schema - JSON 정의를 노출하는 React 구성 요소에 매핑하여 JSON에서 React 요소를 구성합니다.
- compose-state - React에서 여러 setState 또는 getDerivedStateFromProps 업데이터 작성
- react-lodash - React 구성 요소로서의 Lodash
- react-helmet - React용 문서 헤드 관리자
- Stator - React에 대한 기본 제공 지원으로 간단하고 평범한 JavaScript 상태 관리
- ClearX - 학습 곡선이 전혀 없는 React를 위한 빠르고 손쉬운 상태 관리. ClearX는 React 애플리케이션에 대한 문제 분리에 있어 뛰어난 유연성을 제공합니다.
- react-snap - 구성이 필요 없는 SPA용 정적 사전 렌더링
- Draft.js - 텍스트 편집기를 빌드하기 위한 React 프레임워크
- 굴절 - 반응성 프로그래밍의 힘을 활용하여 구성 요소를 과급
- react-desktop - React로 빌드된 OS X 및 Windows UI 구성 요소
- Reapop - React 및 Redux 알림 시스템
- react-extras - React 작업에 유용한 구성 요소 및 유틸리티
- 반응 인스턴트 검색 1 - Algolia의 React 및 React Native 애플리케이션에 대한 번개처럼 빠른 검색
- 업피 2 - 웹 브라우저를 위한 차세대 오픈 소스 파일 업로더
- react-motion - 애니메이션 문제를 해결하는 스프링
- react-esi - React Edge 사이드 포함
- hookstate - 후크를 기반으로 하는 현대적이고 매우 빠르고 확장 가능한 React의 상태 관리
- Universal-model-react - React용 통합 상태 관리 솔루션
반응 통합
- 이유반응 1
- 반응 레일
- 리액트JS.NET 2
- om - ClojureScript 인터페이스
- 시약 - React.js에 대한 최소한의 ClojureScript 인터페이스
- Express React 보기
- 반응 페이지 미들웨어
- ngReact - Angular의 React 컴포넌트
- coffee-react-transform - Coffeescript에 대한 React JSX 지원을 제공합니다.
- sprockets-coffee-react - CJSX용 스프로킷 전처리기
- react-kup - jsx for coffeescript에 대한 간단하고 방해가 되지 않는 대안
- Turbo-react - Turbolink와 React를 결합하여 DOM diff 적용
- react-bacon - Bacon.js와 함께 React를 사용하기 위한 작은 모듈
- msx - Mithril에 대한 호출을 출력하도록 조정된 React의 JSX Transformer
- React.withBackbone - React 16 준비 백본 바인딩
- 백본 리액트 컴포넌트
- react-backbone - 반응을 위한 백본 인식 믹스인
- NestedReact - Backbone Views 및 NestedTypes 모델과의 투명한 통합
- backbone-reaction - React, Backbone 및 일부
- react.backbone - 백본 마이그레이션을 더 쉽게 만드는 React용 플러그인
- reactbone - 백본용 React 확장
- backbone-react-ui - 백본 및 백본 페이지네이터와 함께 사용하기 위한 React 구성 요소
- react-events - 반응 구성 요소에 대한 선언적 관리 이벤트 바인딩
- react-mixin-manager - React mixin 등록 관리자
- gsap-react-plugin - React.js 구성 요소 상태를 트위닝하기 위한 GSAP 플러그인
- @plaxdan의 react-topcoat - React 라이브러리로 빌드된 Topcoat CSS 구성 요소
- @arnemart의 react-topcoat - Topcoat용 React 구성 요소 모음
- reactdown - 마크다운 구문을 사용하여 React 구성 요소 작성
- react-jade - Jade를 React JavaScript로 컴파일
- jade-react - Jade 템플릿을 React.DOM 표현식으로 컴파일
- gulp-jade-react - Jade 템플릿을 Gulp를 사용하여 설탕이 제거된 React JSX로 컴파일
- sbt-reactjs - npm을 사용하여 SBT 플러그인 반응
- scalajs-react - Scala.js와 Facebook의 React 간의 유죄
- react-xtags - React를 사용하여 xtags 구현하기
- jreact - 서버 측 Java에서 반응(Rhino 또는 Nashorn 사용)
- React.hiccup - sweet.js로 작성된 JSX의 완전한 대체
- react-play - JDK8의 Nashorn을 사용하여 Play 프레임워크에서 React 구성 요소 렌더링
- rx-react - RxJS에서 React와 함께 작동하는 유틸리티
- react-with-di - DI가 있는 해킹된 React.js 프로토타입
- reactfire - 간편한 Firebase 통합을 위한 ReactJS 믹스인
- fireux - ReactJS용 Firebase + Redux
- react-clickdrag-mixin - React 컴포넌트용 ClickDrag 믹스인
- React에서 KeystoneJS의 관리 UI 다시 작성 1
- react-masonry-mixin - Masonry용 독립 실행형 믹스인(@desandro)
- react-packery-mixin - Packery(Metafizzy)용 독립 실행형 믹스인 1
- react-dropzone - React.js가 있는 간단한 HTML5 드래그-드롭 영역입니다.
- aframe-react - A-프레임 VR + 반응
- react-three-fiber - threejs용 반응 조정자(웹 및 반응 네이티브) 2
- react-three - three.js를 사용하여 3D 장면을 만들고 제어하기 위한 React 바인딩 2
- react-three-renderer - React를 사용하여 three.js 캔버스로 렌더링 1
- react-threejs - React와 Three.js 간의 가장 간단한 바인딩 1
- react-masonry-css - CSS로 구동되는 Fast Masonry 레이아웃, 종속성 없음
- react-captcha - Google용 react.js reCAPTCHA 1
- reptcha - Google reCAPTCHA를 위한 깨끗하고 현대적이며 단순한 React 래퍼
- react-recaptcha-that-works - 작동하는 React용 reCAPTCHA 브리지
반응 상태 관리
AR 및 VR 반응
- 반응 360 삼 - React를 사용하여 흥미진진한 360도 및 VR 경험 만들기
- 바이로 반응 1 - React Native를 사용하여 AR/VR 애플리케이션을 빠르게 구축하기 위한 플랫폼
양식
- 반응 양식 삼
- react-formal - React에 대한 더 나은 양식 유효성 검사 및 가치 관리, 최소한의 배선 제공 1
- react-forms - React용 양식 라이브러리
- valuelink - 확장된 React 링크를 사용한 완전한 기능의 양방향 데이터 바인딩
- wingspan-forms - Facebook React용 동적 양식 라이브러리
- newforms - React의 동형 양식 처리
- formjs - Reactjs용 폼 생성기
- react-form-builder - React.js용 폼 빌더
- plexus-form - JSON-Schema를 사용하여 반응하기 위한 동적 양식 구성 요소
- tcomb-form - 코드를 적게 작성하는 폼 개발을 위한 UI 라이브러리
- Formsy-react - React JS용 양식 입력 빌더 및 유효성 검사기
- Raw React 배우기: 엄청나게 간단한 형태
- Winterfell - React에서 복잡하고 검증되고 확장 가능한 JSON 기반 양식 생성
- Redux-Autoform - 메타데이터에서 동적으로 Redux-Forms 생성 1
- uniform - 폼을 쉽게 생성하고 검증하기 위한 React 구성 요소 및 도우미 묶음
- formik - 눈물이 없는 React의 양식
- NeoForm – 양식 상태 관리 및 검증을 위한 모듈식 HOC
- react-jsonschema-form – JSON 스키마에서 웹 양식을 빌드하기 위한 React 구성 요소
- 목록 보기 선택 - 기본 구성 요소가 있는 React Native의 토글 가능한 선택 상자
- 최종 양식
- formland - 간단하고 유연하며 확장 가능한 구성 기반 양식 생성기
- react-reactive-form - React의 반응형과 같은 각도
- unform - 중첩 필드, 유효성 검사 등으로 제어되지 않는 양식 구조를 만드는 ReactJS 양식 라이브러리입니다! 1
- 형식 - 반응 후크 시대를 위한 우아한 형식 관리 기본 요소
- react-hook-form - 사용하기 쉬운 유효성 검사를 통해 유연하고 확장 가능한 고성능 양식
자동 완성
- @rackt의 react-autocomplete - WAI-ARIA 호환 React 자동 완성 2
- @moroshko의 react-autosuggest - WAI-ARIA 호환 React autosuggest 구성 요소 1
- @eliseumds의 react-autocomplete- 일부 ReactJS + RxJS 맛보기 1
- @prometheusresearch의 react-autocomplete - React 기반의 자동 완성 위젯 1
- @gragland의 instatype - 간단한 반응 자동 완성 구성 요소
- downshift - 단순하고 유연한 WAI-ARIA 호환 향상된 입력 React 구성 요소를 빌드하기 위한 기본 요소
- React Bootstrap Typeahead - 스타일링을 위해 Bootstrap에 의존하고 원래 Twitter의 typeahead.js에서 영감을 받은 React 기반 자동 완성입니다.
제도법
- react-art - ART 드로잉 라이브러리에 대한 React Bridge 2
- react-canvas - React 컴포넌트를 위한 고성능 렌더링
- react-famous - Famo.us를 사용한 60FPS의 복잡한 3D 애니메이션 UI
- react-kinetic - React를 사용하는 KineticJS를 통한 HTML5 Canvas
- react-svg-morph - svg 구성 요소를 다른 구성 요소로 모핑합니다.
- react-hooks-svgdrawing - React 후크로 SVG 그리기 1
- react-svg-pan-zoom - SVG에 팬 및 확대/축소 기능을 추가하는 React 구성 요소입니다.
데이터 관리
- Immutable.js - 자바스크립트용 불변 데이터 컬렉션
- cortex - React로 데이터를 중앙에서 관리하기 위한 자바스크립트 라이브러리
- vers - 최신 클라이언트 측 모델 추상화 라이브러리
- imvvm - React를 위한 불변의 Model-View-ViewModel
- morearty.js - 순수 JavaScript에서 React에 대한 더 나은 상태 관리
- value - React를 위한 불변 데이터 저장소
- react-resolver - React 구성 요소에 대한 데이터를 재귀적으로 지연 로드하는 동형 라이브러리
- Freezer-js - React를 위한 가볍고 반응적인 불변 데이터 구조
- MobX - 간단하고 확장 가능한 상태 관리
- baobab - 커서가 있는 JavaScript 영구 및 선택적으로 변경할 수 없는 데이터 트리
- baobab-react - Baobab에 대한 React 통합
- immstruct - React와 같은 구성 요소 기반 라이브러리에서 위에서 아래로 속성에 대한 기록이 있는 변경할 수 없는 데이터 구조
- Seamless-immutable - 일반 JS 배열 및 객체와 하위 호환되는 JavaScript용 불변 데이터 구조
- tydel - 유형이 지정된 모델 및 컬렉션, React 바인딩 포함
- 확장 가능-불변 - 모든 Immutable.js 데이터 구조 확장
- statty - React 및 Preact 앱을 위한 작고 눈에 잘 띄지 않는 상태 관리 라이브러리
- Hydux - "배터리 포함"이 포함된 느릅나무와 같은 React용 상태 관리자
- ReSub - 더 나은 React 구성 요소 및 데이터 저장소를 작성하기 위한 라이브러리
- ProppyJS - 기능적인 소품 구성을 위한 작은 라이브러리
- WatermelonDB - 10,000개의 레코드로 확장되고 빠른 속도를 유지하는 강력한 React 및 React Native 앱을 위한 차세대 데이터베이스
- RxDB - JavaScript 애플리케이션을 위한 실시간 데이터베이스
- 이펙터 - 빠르고 강력한 반응 상태 관리자. 간단하고 빠르며 안전한 코드를 작성하고 반응 상태를 쉽게 관리할 수 있습니다.
- reactn - React, 내장된 전역 상태 관리 포함
- immer - 현재 상태를 변경하여 다음 불변 상태를 만듭니다.
지도
- react-googlemaps - Google 지도에 대한 반응 인터페이스 5
- react-maps - React용 맵 컴포넌트 1
- react-google-maps - React.js Google 지도 통합 구성요소
- react-gmaps - React.js용 Google 지도 구성요소
- react-map-gl - MapboxGL-js와 오버레이 API를 위한 React 래퍼
- google-map-react - 동형 Google 지도 React 구성 요소
- react-mapbox-gl - API가 친숙하게 반응하도록 하는 mapbox-gl-js 래퍼
- google-maps-react - React, 지연 로딩 종속성, 현재 위치 찾기 및 Fullstack React 팀의 테스트 기반 접근 방식을 사용하는 선언적 Google Map React 구성 요소입니다.
- react-leaflet - 전단지 맵을 위한 React 구성 요소
- react-geo - react, antd 및 ol을 사용하는 지리 관련 구성 요소 집합
- pigeon-maps - 외부 종속성이 없는 ReactJS 맵
차트
- DevExtreme React Chart - 부트스트랩 및 머티리얼 디자인을 위한 고성능 플러그인 기반 React 차트 1
- react-chartjs - chart.js를 사용하는 일반적인 반응 차트 구성 요소
- react-stockcharts - ReactJS 및 d3로 고도로 사용자 정의 가능한 주식 차트
- Number Picture - React & D3를 사용하여 애니메이션 시각화를 구성하기 위한 낮은 수준의 빌딩 블록입니다. 1
- Victory - 대화형 데이터 시각화를 구축하기 위한 구성 가능한 React 구성 요소 모음
- Recharts - 멋진 선언적 API로 D3에 구축된 차트 작성 라이브러리
- React-ApexCharts - ApexCharts용 React 구성 요소(대화형 SVG 차트 라이브러리)
- reaviz - D3.js 기반 React 데이터 시각화 라이브러리
- react-vis - 다음 원칙을 염두에 두고 설계된 React 시각화 라이브러리입니다.
- nivo - D3 및 React 라이브러리를 기반으로 구축된 풍부한 데이터 시각화 구성 요소 세트를 제공합니다.
- vx - 재사용 가능한 저수준 시각화 구성 요소 모음입니다. D3의 강력한 기능을 결합하여 시각화를 생성하고 DOM 업데이트를 위한 React의 이점을 결합합니다.
- echarts-for-react - 매우 간단한 React용 ECharts 래퍼입니다.
- Chartify - CSS를 사용하여 차트를 작성하기 위한 React 플러그인입니다.
- Semiotic - React와 D3를 결합한 데이터 시각화 프레임워크입니다.
네이티브 반응
React를 사용하여 네이티브 앱을 빌드하기 위한 프레임워크
React 네이티브 일반 리소스
- React Native 공식 사이트 2
- 리액트 네이티브 GitHub
- React 네이티브 뉴스레터
- 리액트 네이티브 플레이그라운드
- 네이티브 굉장 목록에 반응 36
- 네이티브 StackOverflow 반응
- 네이티브 라디오 반응
React 네이티브 튜토리얼
- React 네이티브 튜토리얼 2
- React Native 소개: JavaScript로 앱 빌드
- React Native 소개: JavaScript로 iOS 앱 빌드 1
- React Native와 비동기 함수의 만남
- React Native의 제스처 감지 – 예기치 않은 패닝 수정
- React Native가 포함된 디지털 스마트 미러 연구실
- React Native의 아름다움: JavaScript로 첫 번째 iOS 앱 빌드(1부)
- React Native의 아름다움: JavaScript로 첫 번째 iOS 앱 빌드(2부) 1
- React Native Flexbox의 미니 코스
- Flexbox에 대한 완전한 가이드
- 테스트 주행 반응 네이티브 애플리케이션
- TypeScript와 함께 React Native 사용하기
React 네이티브 개발 도구
- 반응 네이티브 코드 푸시 1 - CodePush용 React Native 모듈
React 네이티브 샘플 앱
네이티브 상용구에 반응
- React Native 앱 만들기 - Expo 유무에 관계없이 빌드 구성 없이 모든 OS에서 React Native 앱 만들기 1
- Snowflake - Redux, Parse.com, Jest로 네이티브 iOS 및 Android 반응(88% 적용 범위) 1
- Ignite - React Native, 상용구, 플러그인, 생성기 등을 위한 가장 인기 있는 CLI입니다!
- React Native Starter Kit - 모바일 애플리케이션 개발을 부트스트랩하는 강력한 시작 프로젝트
네이티브 굉장 구성 요소에 반응
- Expo - 크로스 플랫폼 모바일 앱을 만들기 위한 Expo 플랫폼
- react-navigation - React Native 앱의 라우팅 및 탐색
- react-native-social-share - iOS 및 Android 네이티브 Twitter 및 Facebook 공유 팝업을 React Native와 함께 사용 1
- react-native-fbsdk - iOS Facebook SDK를 둘러싼 래퍼
- react-native-side-menu - 사이드 메뉴를 생성하는 간단한 사용자 정의 가능한 구성 요소 1
- react-native-mapbox-gl - Mapbox GL 반응 네이티브 모듈 2
- react-native-icons - React Native의 빠르고 쉬운 아이콘
- react-native-vector-icons - NavBar/TabBar를 지원하는 React Native용 사용자 정의 가능한 아이콘 3000개
- react-native-google-signin - React Native용 Google 로그인
- react-native-picker-modal-view
- react-native-gifted-chat - React Native를 위한 가장 완벽한 채팅 UI
- 반응 네이티브 빠른 이미지 1 - FastImage, 고성능 React Native 이미지 컴포넌트
- 재활용 목록보기 1 - React Native 및 웹을 위한 고성능 목록 보기!
- react-native-largelist 1 - React Native를 위한 최고의 큰 목록 구성 요소
- react-native-gesture-handler - 플랫폼 네이티브 터치 및 제스처 시스템을 React Native에 노출하는 선언적 API
- rn 자리 표시자 1 - React Native에서 텍스트 또는 미디어 콘텐츠를 렌더링하기 전에 자리 표시자 항목을 표시합니다.
React 네이티브 라이브러리
- 보초 반응 네이티브 1 - 웹 앱, 모바일 앱 및 게임에 대한 실시간 충돌 보고.
- realm-js - Realm은 모바일 데이터베이스입니다: SQLite 및 키-값 저장소의 대안
- react-native-device-info - React Native iOS 및 Android용 기기 정보
리덕스
JavaScript 앱용 예측 가능한 상태 컨테이너
Redux 일반 리소스
리덕스 도구
- react-redux - Redux용 공식 React 바인딩
- redux-devtools - 핫 리로딩, 작업 재생 및 사용자 정의 가능한 UI가 있는 Redux용 DevTools
- redux-toolkit - 효율적인 Redux 개발을 위한 공식적이고 독단적인 배터리 포함 도구 세트
- redux-form - 양식 상태를 유지하기 위해 react-redux를 사용하는 고차 컴포넌트 1
- redux-thunk - redux용 썽크 미들웨어
- redux-logger - redux용 로거 미들웨어
- reselect - Redux용 선택기 라이브러리
- normalizr - 스키마에 따라 중첩된 JSON을 정규화합니다.
- redux-saga - Redux 앱을 위한 대안적 부작용 모델 1
- redux-data-fx - Redux의 선언적 부작용 1
- redux-observable - Redux용 RxJS 미들웨어
- redux-analytics - Redux용 분석 미들웨어
- redux-undo - redux 상태 컨테이너에 실행 취소/다시 실행 기능을 추가하는 고차 감속기
- redux-search - 클라이언트 측 검색을 위한 Redux 바인딩
- redux-mock-store - redux 비동기 작업 생성자와 미들웨어를 테스트하기 위한 모의 저장소
- redux-immutable - Immutable.js 상태에서 작동하는 Redux CombineReducers의 동등한 기능을 만듭니다.
- redux-react-i18n - redux/react용 i18n 솔루션
- R16N - redux/react I18n 솔루션
- redux-actiontyper - Redux에 대해 덜 장황한 작업 유형을 만드는 도우미
- redux-state-validator - JSON 스키마를 사용하여 redux 상태 값과 객체 유형을 검증하는 간단한 redux 미들웨어
- redux-persist - redux 저장소를 유지 하고 재수화합니다.
리덕스 튜토리얼
- ES6에서 React 및 Redux를 사용하여 애플리케이션 빌드 1
- Redux 시작하기 1
- Idiomatic Redux로 React 애플리케이션 구축하기 1
- 리덕스 튜토리얼
- React, Redux 및 Immutable 시작하기: 테스트 기반 자습서: 1부 2
- React, Redux 및 Immutable 시작하기: 테스트 주도 튜토리얼: 2부 1
- 전체 스택 Redux 자습서
- Redux 및 React-Router를 사용한 서버 측 렌더링 1
- Redux에 대한 심층 소개
- 단위 테스트 Redux 앱
- JWT 인증으로 React 및 Redux 앱 보호
- React, Redux 및 redux-saga를 사용하여 이미지 갤러리 구축
- redux로 API를 호출하는 단순화된 접근 방식
- React Redux 기반 헌혈 데모 애플리케이션
- LearnCode.academy Redux 튜토리얼 시리즈
- 실용적인 Redux
- 초보자를 위한 완전한 React Redux 튜토리얼 1
몹X
JavaScript 앱을 위한 간단하고 확장 가능한 상태 관리
MobX 일반 리소스
MobX 도구
MobX 튜토리얼
- MobX 및 React에 대한 10분 소개
- MobX로 React 앱의 복잡한 상태 관리
- Redux에서 MobX로 애플리케이션 리팩토링
- Redux 또는 MobX: 혼란을 해소하려는 시도
그래프QL
쿼리 언어
GraphQL 사양
GraphQL 도구
- GraphCMS - GraphQL 헤드리스 CMS
- GraphQL CMS
- 몽구스 스키마를 GraphQL로
- REST API에 대한 GraphQL 브리지
- GraphQL Playground - 더 나은 개발 워크플로를 위한 GraphQL IDE
GraphQL 튜토리얼
- GraphQL 소개
- GraphQL에 대한 첫인상
- GraphQL과 같은 방식으로 쿼리 모델링
- 얇고 그래픽
- GraphQL 개요 - GraphQL 및 Node.js 시작하기
- GraphQL로 기본 API 작성
- Node.js와 SQL로 GraphQL 서버 구축하기
- GraphQL 둘러보기: 변수
- Graphql 사용 방법 - GraphQL용 전체 스택 자습서
GraphQL 구현
- graphql-js - JavaScript 용 GraphQL의 참조 구현
- react-transmit - JavaScript Promise 기반 릴레이 영감 라이브러리
- graphql-ruby - Facebook의 GraphQL의 Ruby 구현
- graphql-java - GraphQL 자바 구현
- sangria - Scala GraphQL 클라이언트 및 서버 라이브러리
- graphql-php - GraphQL 참조 구현 의 PHP 포트
- graphene - 간단 해진 Python의 GraphQL
- graphqllib - Python 용 GraphQL 구현
- graphql-dotnet - .NET 용 GraphQL
- graphql-go - Go/Golang용 GraphQL
서버 통합
데이터베이스 통합
- Hasura - Postgres의 즉각적인 실시간 GraphQL
- Prisma - GraphQL 서버에서 무거운 작업을 수행하는 고성능 오픈 소스 GraphQL ORM과 같은 * 레이어입니다.
- graphql-bookshelf - BookshelfJS 모델 주변에서 GraphQL 스키마를 정의하는 데 도움이 됩니다.
- GraphpostgresQL - PostgreSQL 용 GraphQL
- 낙서 - Node.js GraphQL ORM
- sql-to-graphql - SQL 데이터베이스 구조를 기반으로 GraphQL API 생성
- graphql-sequelize - Sequelize를 통한 MySQL 및 Postgres용 GraphQL 및 릴레이
계전기
데이터 기반 React 애플리케이션
릴레이 일반 리소스
릴레이 튜토리얼
릴레이 도구
- graphql-relay-js - 반응 릴레이를 지원하는 graphql-js 서버 구성을 돕는 라이브러리
- react-router-relay - React Router를 위한 릴레이 통합
- relay-local-schema - GraphQL 서버 없이 릴레이 사용
- relay-codemod - 릴레이 API를 업데이트하기 위한 jsodeshift 기반 Codemod 스크립트
아폴로
GraphQL 기반 데이터 스택
Apollo 일반 리소스
아폴로 도구
비디오
reactjsvideos.com 6
중요한 회담
- Pete Hunt: React: 모범 사례 재고 - JSConf EU 2013 8
- Pete Hunt: React: 모범 사례 재검토(업데이트됨) - JSConf.Asia 2013
- Tom Occhino와 Jordan Walke: Facebook의 JS 앱 - JSConfUS 2013 29
- 반응: JS의 CSS
- 피트 헌트: 예측 가능하고 정확하지 않음 - Mountain West JavaScript 2014
- Hacker Way: Facebook에서 웹 앱 개발에 대한 재고
- Christopher Chedeau: 반응이 확장되는 이유는 무엇입니까? - JSConf2014
- Christopher Chedeau: React의 아키텍처 - OSCON 2014
- Pete Hunt: React RESTful UI 렌더링 - 스트레인지 루프 2014
- 피트 헌트: Instagram.com 작동 방식 - OSCON 2014 1
- Bill Fisher 및 Jing Chen: React 및 Flux - NewCircle 교육 2014
- Sebastian Markbage: 최소 API 노출 영역 - JSConf EU 2014
- Avik Chaudhuri: 대규모 JavaScript 테스트 및 정적 유형 시스템 - Scale 2014
- React Native & Relay: 최신 웹 기술을 모바일로 가져오기 - f8 2015)
- Citrusbyte, GraphQL: Nick Schrock과 함께하는 수평 플랫폼
- Laney Kuenzel: 릴레이의 돌연변이 및 구독 - JSConf 2015
- 현재와 미래에 반응하고 후크를 사용하여 90% 더 깨끗한 반응 - React Conf 2018
- 반응 회의 1
- 반응 동영상
- 멋진 반응 토크
React.js Conf 2015 재생 목록 2
ReactEurope Conf 2015 Day 1 재생 목록
ReactEurope Conf 2015 Day 2 재생 목록
ReactRally Conf 2015 재생 목록
React.js Conf 2016 플레이리스트
React 암스테르담 2016 플레이리스트 1
ReactEurope Conf 2016 Day 1 재생 목록
ReactEurope Conf 2016 Day 2 재생 목록
ReactRally Conf 2016 플레이리스트
React.js 암스테르담 2018 재생 목록 2
비디오 자습서
데모 반응 앱
- 해커뉴스-반응-graphql 2 - React 및 GraphQL을 사용하여 범용 JavaScript로 재작성된 Hacker News 클론
- 반응 감소 2 - React 및 Bootstrap4로 제작된 무료 관리 템플릿
- reactjs-tmdb-app 1 - 반응형 React The Movie 데이터베이스 앱
- 반응 장바구니 삼 - React Redux로 구축된 간단한 전자상거래 카트 애플리케이션
실제 반응 앱
- kibana - Elastic Stack에 대한 창
- 파이어폭스 디버거 1 - 어디서나 작동하는 Firefox 디버거
- 스펙트럼 – 간단하고 강력한 온라인 커뮤니티
- 가장 중요한 1 - 오픈 소스 Slack 대안
- 과잉 반응 - Dan Abramov의 개인 블로그
- winamp2-js 2 - 브라우저용으로 재구현된 Winamp 2
- 드노트 1 - 다중 장치 동기화 및 웹 인터페이스가 있는 명령줄 노트북
기부금
이 목록은 React에 대한 흥미로운 것들의 개인 모음으로 시작되었습니다. React가 시작될 당시 React는 베타 버전이었고 JSX를 JS로 변환하는 특수 스크립트가 있었고 Flux조차도 아직 게시되지 않았습니다. React는 이제 주류가 되었고 많은 일들이 일어났습니다. 이 목록을 광고 게시판이나 실험을 공개적으로 푸시하는 장소로 사용하지 마십시오. 여기에서는 완전히 무료인 리소스만 사용하십시오. 여러분의 기여와 제안은 진심으로♡ 환영합니다. (✿◠‿◠)
멋진 반응 - 추가 리소스:
멋진 React 라이브러리, 리소스 및 빛나는 것들의 모음입니다.
절대적으로 멋진 React 구성 요소 및 라이브러리
리액트 리소스
- React, Redux, ES6 등에서 수집한 선별된 튜토리얼 및 리소스 링크 6
- Angular의 ng-resource에서 영감을 얻었습니다.
- 내가 좋아하는 reactjs 도구 및 자습서의 개인 목록입니다.
- 유용한 반응 리소스의 간단한 목록
멋진 반응 후크
Awesome React Native는 최고의 React Native 라이브러리, 도구, 자습서, 기사 등을 선별하는 멋진 스타일 목록입니다. PR 환영합니다!
'Study > React' 카테고리의 다른 글
리액트(React) | Redux 넌 도대체.... 정체가 뭐냐? (0) | 2021.09.27 |
---|---|
React RoadMap / Everything that is there to learn about React and the ecosystem in 2021. (0) | 2021.08.08 |
[React JS] 리액트 | Deploy operator | 전개 연산자에 대해서 알아보자. (0) | 2021.04.24 |
[React JS] 리액트 템플릿 문자열 | Template String (0) | 2021.04.24 |
[React JS] 리액트 | React JS에 필요한 자바스크립트 주요 문법 (0) | 2021.04.24 |