분류 Reactjs

궁극의 ReactJS 리소스 🛠2021년 웹 개발자용

컨텐츠 정보

  • 조회 33 (작성일 )

본문

ReactJS로 작업하는 경우 React-redux Admin Template FreeAdmin Dashboard Template React 컬렉션을 확인하십시오. 또한 ReactJS UI 프레임워크는 북마크할 수 있는 유용한 컬렉션입니다.


Official Resources: 


Communities: 


External Resources: 


UI Libraries: 


UI 구성 요소 라이브러리는 버튼, 입력, 대화 상자 등과 같은 기성 UI 구성 요소의 (일반적으로) 강력한 세트입니다. 레이아웃을 위한 빌딩 블록 역할을 합니다. 모듈식 특성 덕분에 구성 요소를 다양한 방식으로 배열하여 고유한 효과를 얻을 수 있습니다.


Material UI(MUI) - 더 빠르고 쉬운 웹 개발을 위한 React 컴포넌트 


MUI 


머티리얼 UI 이제 MUI는 Google의 머티리얼 디자인 가이드라인을 기반으로 구축된 구성 요소 집합입니다. 액세스 가능하고 구성 가능한 많은 UI 위젯으로 구성됩니다. 게다가 구성 요소는 자체 지원되며 표시해야 하는 스타일만 삽입하므로 응용 프로그램의 성능이 향상될 수 있습니다. 또한 Material UI에는 활성 유지 관리자와 강력한 커뮤니티가 있습니다. 또한 웹 개발을 위해 React 구성 요소가 더 빠르고 쉽습니다. 따라서 최고의 ReactJS UI 프레임워크 중 하나입니다.


Blueprint - A React-based UI toolkit for the webs 


blueprint 


BlueprintJS는 웹용 React 기반 UI 툴킷입니다. 최신 브라우저 및 IE 11에서 실행되는 데스크톱 애플리케이션을 위한 복잡하고 데이터 집약적인 웹 인터페이스를 구축하는 데 최적화되어 있습니다. 이것은 모바일 우선 UI 툴킷이 아닙니다. 게다가, Blueprint의 React 컴포넌트는 주로 데스크탑 애플리케이션에서 사용하기 위한 것입니다.


React-bootstrap - React로 빌드된 부트스트랩 구성 요소 


React BootstrapReact-Bootstrap은 Bootstrap JavaScript를 대체합니다. 각 구성 요소는 jQuery와 같은 불필요한 종속성이 없는 진정한 React 구성 요소로 처음부터 빌드되었습니다. 게다가, 가장 오래된 React 라이브러리 중 하나인 React-Bootstrap은 React와 함께 진화하고 성장하여 UI 기반으로 탁월한 선택이 되었습니다. 또한 React 구성 요소 모델은 각 구성 요소의 형태와 기능에 대한 더 많은 제어를 제공합니다. 또한 각 구성 요소는 접근성을 염두에 두고 구현됩니다. 따라서 최고의 ReactJS UI 프레임워크 중 하나입니다.


Reactstrap - 간단한 React Bootstrap 4 구성 요소 


Reactstrap 


Reactstrap 라이브러리에는 제어 및 구성을 선호하는 React Bootstrap 4 구성 요소가 포함되어 있습니다. 게다가 이 라이브러리는 jQuery나 Bootstrap JavaScript에 의존하지 않습니다. 그러나 react-popper를 통한 Poppers.js는 도구 설명, 팝오버 및 자동 뒤집기 드롭다운과 같은 콘텐츠의 고급 위치 지정에 의존합니다.


Ant-design - 자연과 결정의 가치를 지닌 디자인 시스템 


Ant design 

Ant Design React UI 라이브러리는 엔터프라이즈급 제품을 위한 디자인 시스템입니다. Ant Design 프로젝트를 기반으로 하며 풍부한 대화형 UI를 구축하기 위한 고품질 구성 요소 및 데모 세트가 포함되어 있습니다. 또한 구성 요소에는 수십 가지 언어에 대한 국제화 지원이 포함됩니다.


Chakra-ui - React 애플리케이션을 위한 간단하고 모듈식이며 접근 가능한 UI 구성요소 


Chakra UI 


Chakra UI는 멋진 ReactJS UI 프레임워크 중 하나입니다. React 애플리케이션을 빌드하는 데 필요한 모든 구성 요소를 제공하는 간단하고 모듈식이며 액세스 가능한 구성 요소 라이브러리입니다. 또한 Chakra UI는 WAI-ARIA 표준을 엄격하게 따릅니다. 또한 모든 구성 요소는 기본적으로 적절한 속성과 키보드 상호 작용과 함께 제공됩니다.


Semantic UI React - 공식 Semantic-UI-React 통합 


Semantic UI React 

시맨틱 UI는 개발 프레임워크에 인간 친화적인 HTML을 사용합니다. 또한 React, Angular, Meteor, Ember 및 기타 여러 프레임워크와 통합됩니다. 게다가 모든 j Query 기능은 React에서 다시 구현되었습니다. 또한 Semantic UI React 앱 위에 Semantic UI CSS 테마를 로드할 수 있습니다. 또한 마크업에 대한 완전한 액세스 권한을 갖게 되므로 구성 요소를 유연하게 사용자 지정할 수 있습니다.


다음은 다른 React UI 라이브러리 및 프레임워크입니다.


  • Evergreen - Evergreen React UI Framework by Segment
  • Fluent UI - A set of React components for building Microsoft web experiences
  • Grommet - A react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
  • Rebass - React primitive UI components built with styled-system
  • Reakit - Accessible, Composable and Customizable components for React
  • Rsuite - A suite of React components
  • Primereact - A complete UI Framework for React with 50+ components featuring material, bootstrap and custom themes.
  • Eui - Elastic UI Framework
  • React-spectrum - Adobe's collection of libraries and tools that help you build adaptive, accessible, and robust user experiences
  • React-bulma-components - React components for Bulma framework
  • Mantine – A fully featured React library with 100+ hooks and components with native dark theme support


Frameworks: 


Next.js - React 프레임워크 


Nextjs 

Next.js는 서버 측 렌더링 및 정적 웹 사이트 생성과 같은 React 기반 웹 애플리케이션 기능을 가능하게 하는 Node.js 위에 구축된 오픈 소스 개발 프레임워크입니다. Next.js는 Netflix, Uber, Starbucks, Twitch 등과 같이 전 세계에서 가장 크고 가장 인기 있는 회사에서 널리 사용됩니다.


Gatsby.js - React 기반의 무료 오픈 소스 프레임워크 


Gatsby.js 

Gatsby는 React, GraphQL 및 Webpack의 기능을 정적 웹사이트 및 앱 구축을 위한 단일 도구로 결합한 오픈 소스 프레임워크입니다. Gatsby가 제공하는 사이트의 빠른 성능, 코드 분할과 같은 인상적인 즉시 사용 가능한 기능 및 친숙한 개발자 경험 덕분에 Gatsby는 빠르게 현대 웹 개발의 필수 요소가 되었습니다.


React Admin - B2B 애플리케이션 구축을 위한 프론트엔드 프레임워크 


react admin 


ES6, React 및 Material Design을 사용하여 REST/GraphQL API를 기반으로 브라우저에서 실행되는 데이터 기반 애플리케이션을 구축하기 위한 프론트엔드 프레임워크입니다.


Blitz - Fullstack React 프레임워크 


Blitz 


Blitz는 Ruby on Rails에서 영감을 받은 배터리 포함 프레임워크로 Next.js를 기반으로 구축되었으며 REST/GraphQL의 필요성을 제거하는 "Zero-API" 데이터 계층 추상화를 특징으로 합니다. 또한 라우팅, 파일 구조 및 인증과 같은 유용한 기본값 및 규칙을 제공하는 동시에 매우 유연합니다.


Commercial Projects: 


Vuexy - Views, React, Angular, HTML 및 Laravel 관리 템플릿(최고) 🔥 


Vuexy react admin template 


Vuexy React는 가장 개발자 친화적이고 사용자 정의가 가능한 React Admin Template입니다. Create React App, Redux 및 Reactstrap BS4를 기반으로 합니다. 또한이 템플릿은 아름답게 제작되고 깨끗하며 현대적으로 설계된 관리 테마입니다. 또한 Todo, Chat, eCommerce를 포함한 다양한 실행 가능한 응용 프로그램에서 작동합니다. 또한 Vuexy Admin은 전자 상거래, 분석, 통계, 날씨, 차트, 지도 및 대화형에 대한 고급 카드를 제공합니다. 이 놀라운 템플릿은 프로필, 기술 자료, 검색, 인증 등을 포함한 100개 이상의 페이지를 제공합니다.


게다가 이 템플릿은 RTL을 지원하며 UI/UX 도구와 함께 더 많은 놀라운 귀중한 기능을 제공합니다. 또한 퍼지 검색, 책갈피, 부동 탐색 모음, 어둡고 반쯤 어두운 레이아웃 옵션, 고급 카드, 데이터 테이블 및 차트와 같은 유용한 도구가 많이 제공됩니다.


또한 Vuexy에는 정말 훌륭하고 눈길을 끄는 몇 가지 기능이 있습니다.

  • 6 Workable applications
  • Figma and Sketch File added
  • Multi-lingual
  • RTL supported
  • Data-table
  • Easy navigation
  • Custom-Built
  • Light and dark layout And many more


점보 React Redux 관리 템플릿 


jumbo react redux admin template 


Jumbo React는 Create React App을 기반으로 하는 잘 문서화된 다양한 관리 템플릿 모음입니다. 또한 템플릿은 반응 개발자가 반응 응용 프로그램을 바로 시작할 수 있도록 전용입니다. 게다가, 이 관리 템플릿에는 서로 다른 디자인 개념을 가진 2개의 반응 관리 템플릿이 있습니다. 또한 React redux 관리 템플릿은 인기 있는 Material-UI 라이브러리(최신 버전 v1)를 사용하는 Google Material Design 개념을 기반으로 합니다. 또한 React admin 템플릿은 BootStrap4 및 Reactstrap UI 라이브러리를 활용하여 Flat Look을 기반으로 합니다. 이상적으로는 이 관리 템플릿에는 함께 사용하는 모든 응용 프로그램에 이상적인 현대적이고 다채로운 요소가 있습니다.


Dnote 


Dnote 


Dnote를 사용하면 터미널을 떠나지 않고도 아이디어, 스니펫 및 지식을 즉시 캡처하고 나중에 쉽게 검색할 수 있습니다. 터미널을 떠나지 않고도 손쉽게 정보를 캡처하고 검색할 수 있는 방법을 제공하여 집중력을 유지합니다. 또한 원활한 다중 장치 동기화 및 웹 인터페이스를 제공합니다.


Kibana 


Kibana 


Kibana는 Elasticsearch 데이터를 시각화하고 Elastic Stack을 탐색할 수 있는 무료 공개 사용자 인터페이스입니다. 쿼리 로드 추적에서 앱을 통해 요청이 흐르는 방식 이해에 이르기까지 모든 작업을 수행합니다.


EasyDev 


EasyDev는 React Components 및 Bootstrap 4 Framework를 기반으로 하는 React redux 관리 템플릿입니다. React 구성 요소, 깔끔한 코드 및 자세한 문서로 인해 개발자에게 가장 편리한 템플릿으로 모든 프로젝트를 쉽게 빌드할 수 있습니다! 전자 상거래, 분석, 스포츠 및 기타 유형의 웹 또는 모바일 애플리케이션에 사용합니다.


Open Source React Projects: 


React Select 


react select 


다중 선택, 자동 완성, 비동기 및 생성 가능 지원이 포함된 ReactJS를 위한 유연하고 아름다운 선택 입력 컨트롤. React Select는 Thinkmill과 Atlassian에서 자금을 지원합니다. 이는 사용자 정의가 가능하면서도 즉시 사용할 수 있는 강력한 React.js 구성 요소를 개발하기 위한 새로운 접근 방식을 나타냅니다.


DevHub 

Devhub 


DevHub는 GitHub 알림을 관리하고 리포지토리 활동을 파악하는 데 도움이 되는 모바일 및 데스크톱 앱입니다. 사용자 정의 검색을 저장하고, 필터를 적용하고, 항목을 북마크하고 중요한 것을 놓치지 마십시오.


React Spring 


React Spring 



React-spring은 스프링 물리학 기반 애니메이션 라이브러리입니다. 이 라이브러리는 애니메이션에 대한 현대적인 접근 방식을 나타냅니다. 애니메이션된 강력한 보간 및 성능은 물론 반응 모션 사용 용이성을 상속합니다. React-spring은 크로스 플랫폼이며 웹, react-native, react-native-web 및 기타 거의 모든 플랫폼을 지원합니다.


ArchitectUI React 


ArchitectUI는 무료 오픈 소스 React 대시보드 템플릿입니다. 웹 응용 프로그램 개발을 시작하는 데 도움이 되는 아름다운 요소 및 구성 요소 집합이 함께 제공됩니다. 완전히 반응하는 레이아웃, Bootstrap 요소 및 레이아웃 구성 요소 모두에 대한 여러 색 구성표가 있습니다.


Take note 


Take note 


Take Note는 개발자를 위한 메모 작성 앱으로 알려진 메모를 작성하는 오픈 소스 프로젝트입니다. 마크다운을 지원하는 간단한 일반 텍스트 메모 앱입니다. 우리에게 필요하지 않은 모든 멋진 물건 없이.


Write with me 


write with me 


후크가 있는 React로 작성된 실시간 협업 마크다운 편집기로 AWS Amplify를 사용하는 Write with me


비디오 자습서 및 가이드: 


ReactJS Crash Course By Traversy Media



이 단기 집중 과정에서 React를 시작하세요. 작업 추적기 앱을 구축하고 구성 요소, 소품, 상태, 후크, API 작업 등을 살펴봅니다.


초보자를 위한 React JS 코스 - freeCodeCamp.org의 2021 튜토리얼 


풀 프리미엄 코스입니다. 기초부터 중급 및 고급 주제에 이르기까지 React.js를 처음부터 배우십시오. 실제 앱을 구축하여 배우게 됩니다.


초보자를 위한 React 단기 과정 2021 By Academind



React.js를 시작하고 ReactJS로 놀라운 웹사이트를 구축하는 방법을 배우십시오.


초보자를 위한 React JS 튜토리얼 - 12시간 만에 풀 코스 [2021] By Clever Programmer


React JS Tutorial for Beginner 


학습할 내용:

  • The Netflix Clone
  • The Spotify Clone
  • The Slack Clone
  • The Tik-Tok Clone
  • And the tools & technologies you need to succeed as a Modern React JS Developer.

By Evening Kid의 React 18 새로운 기능


여기에서 간단하게 설명된 React 18의 새로운 주요 기능을 이해할 수 있습니다.



Harry Wolff의 React 18에 대해 알아야 할 사항 


유용한 컬렉션/도서/기사: 


Books: 


The Road to React: Your journey to master plain yet pragmatic React.js(2020 Edition)


책에서 다루는 내용은 다음과 같습니다.

  • Fundamentals of React
  • React’s Legacy
  • Styling in React
  • React Maintenance
  • Real World React (Advanced)
  • Deploying a React Application

React Explained: Your Step-by-Step Guide to React (2020 Edition)


이 책은 React 작동 방식에 대한 몇 가지 기본 지식을 제공합니다. 이를 사용하여 애플리케이션을 구축하는 방법을 배우게 됩니다. 이 책은 배운 내용을 강화하기 위해 따라하기 쉬운 연습 문제를 제공합니다. 이 책은 React의 모든 기본 사항을 처음부터 소개합니다. React 또는 기능적 JavaScript에 대한 사전 지식이 필요하지 않습니다.


Beginning React (incl. Redux and React Hooks)


이 책은 React 및 관련 기술에 대한 훌륭한 소개를 제공합니다. 이 책은 React.js를 마스터하기 위한 재미있고 실용적이며 실용적인 여정입니다. 이 책의 모든 부분은 한 입 크기로 요점을 직설적으로 작성했습니다. 이해하기 쉽게 잘 짜여진 책이다. 이 책은 따라하기 쉽고 삽화, 예제, 코드 스니펫 및 코드 설명이 포함되어 있습니다. 초보자에게 좋은 책입니다. 이 책을 통해 몇 분 안에 React 앱 구축을 시작할 것입니다.


React.js Essentials: A fast-paced guide to designing and building scalable and maintainable web apps with React.js


이 책은 React로 확장 가능하고 유지 관리 가능한 웹 앱을 설계하고 구축하는 방법에 대한 빠른 가이드입니다. 이 책은 React.js를 사용하여 웹 애플리케이션을 위한 유지 관리 가능하고 성능이 뛰어난 사용자 인터페이스를 구축하는 데 도움이 됩니다. 이 책은 빠른 속도로 React.js를 배울 수 있도록 충분한 코드와 함께 단계별 실습 접근 방식을 채택합니다.


Beginning React (incl. Redux and React Hooks)


React의 기초를 이해할 수 있는 좋은 책입니다. 명확하고 간결하며 개념을 더 쉽게 이해할 수 있도록 실제 접근 방식을 제공합니다. 또한 모든 기본 사항을 다룹니다.


Articles, Collections and Blogs: 


React Tools 


React Development Tools 


React Starter Kits and Toolchains 

  • create-react-app - Set up a modern Web app by running one command
  • Razzle - Build production ready React applications. Razzle is toolchain for modern static and dynamic websites and web applications
  • Neutrino React Preset@neutrinojs/react is a Neutrino preset that supports building React web applications
  • react-starter-kit - Isomorphic Web app boilerplate
  • create-react-library - CLI for creating reusable, modern React libraries using Rollup and create-react-app.
  • tsdx - Zero-config CLI for TypeScript package development


React Routing 

  • react-router - Declarative routing for React
  • navi - Declarative, asynchronous routing for React
  • curi - JavaScript router for single-page applications
  • reach - Next Generation Routing for React
  • universal-router - A simple middleware-style router for isomorphic JavaScript web apps
  • wouter - A minimalist-friendly ~1.3KB routing library


React Testing 


출처 : https://dev.to/theme_selection/ultimate-reactjs-resources-for-web-developers-2021-424c