https://github.com/enaqx/awesome-react
GitHub - enaqx/awesome-react: A collection of awesome things regarding React ecosystem
A collection of awesome things regarding React ecosystem - GitHub - enaqx/awesome-react: A collection of awesome things regarding React ecosystem
github.com
React를 배우는 방법 — 초급에서 고급까지의 로드맵
https://medium.com/free-code-camp/learning-react-roadmap-from-scratch-to-advanced-bff7735531b6
How to Learn React — A roadmap from beginner to advanced
Hey folks!!
medium.com
안녕하세요 여러분!!
이 가이드는 React를 시작하는 사람들을 위한 것입니다. 더 쉽게 배울 수 있도록 각 섹션에서 최고의 비디오와 기사를 신중하게 선별했습니다.
참고: 저는 아래에 언급된 웹사이트와 관련이 없습니다. 순전히 제 견해입니다.
전제 조건
- HTML, CSS 및 JavaScript에 대한 기본 지식.
- ES6 기능에 대한 기본 이해. 다음 은 ES6 기능 중 일부를 설명하는 기사 입니다.
시작하려면 최소한 다음 기능을 알고 있어야 합니다.
1. Let
2. Const
3. 화살표 함수
4. 가져오기 및 내보내기
5. 클래스 - npm 사용 방법에 대한 기본 이해 .
시작하기
온라인 코드 편집기를 사용하여 연습하거나 Create React App 을 사용할 수 있습니다 .
JSFiddle 과 Codepen 에서 개발 환경을 설정했습니다 .
React의 모든 기본 사항을 이해하려면 다음 자습서부터 시작할 수 있습니다.
React 의 React 공식 문서
Kent C. Dodds 의 React 초보자 가이드
React의 기초 by
지금쯤이면 React의 기본 사항에 대한 기본 아이디어를 얻었을 것입니다. React에서 간단한 웹 앱 개발을 시작하는 것으로 충분합니다.
이제 React 공식 튜토리얼을 살펴보십시오.
React 의 React 공식 튜토리얼
React의 기초를 다루는 잘 작성된 기사입니다. 또한 특정 주제를 매우 명확하게 설명합니다.
마지막으로 React 앱으로 API에 연결하는 방법을 배우십시오.
React.js 로 API 가져오기
일부 프로젝트 구축 시작
- 간단한 할일 앱
- 간단한 계산기 앱
- 장바구니 만들기
- GitHub API를 사용하여 GitHub의 사용자 통계 표시
반응 라우터
React Router는 단일 페이지 애플리케이션에 대한 경로를 생성하는 데 도움이 됩니다. 매우 강력하고 React 애플리케이션과 함께 사용하기 쉽습니다.
시작하려면:
React Router 튜토리얼
React Router 및 Learn Code Academy 의 SPA 소개
Scotch.io의 React 앱 라우팅
이 기사는 React 라우팅을 시작하기에 충분합니다.
프로젝트
- 간단한 CURD 애플리케이션
- 해커 뉴스 클론
라우터에 대해 자세히 알고 싶다면 다음 가이드를 확인하세요.
React Training의 React Router 전체 가이드
웹팩
Webpack은 유명한 JavaScript 모듈 번들러입니다. Webpack은 개발자가 할 필요가 없도록 프로젝트에 대한 정적 파일로 종속성을 유지하는 데 도움이 됩니다.
Webpack에는 로더도 함께 제공됩니다. 로더는 프로젝트와 관련된 특정 작업을 실행하는 데 도움이 됩니다.
Webpack에 대해 자세히 알아보려면 다음 자습서를 따르십시오.
Andrew Ray의 Webpack을 사용해야 하는 시기와 이유
Learn Code Academy의 Webpack 튜토리얼
Webpack을 사용하여 로컬 React 환경을 설정하려면 다음 GitHub 리포지토리를 참조하세요.
Hanif Roshan의 React SPA 템플릿
위의 튜토리얼은 Webpack을 시작하기에 충분하다고 생각합니다. 그러나 심층 지식을 얻으려면 다음 가이드를 참조하십시오.
SurviveJS의 Webpack 소개
서버 렌더링
서버 렌더링은 React의 가장 멋진 기능 중 하나입니다. 모든 백엔드 기술과 함께 사용할 수 있습니다.
React의 SSR(Server Side Rendering)을 사용하면 서버에서 구성 요소를 만들고 브라우저에서 HTML로 렌더링할 수 있습니다. 그리고 모든 JavaScript 모듈이 브라우저에 다운로드되면 React가 무대를 차지합니다. 단순한!
먼저 React-DOM API를 살펴보십시오.
React의 React -DOM API
그리고 아래 튜토리얼에 따라 심층 지식을 얻으세요.
Tyler McGinnis의 React 서버 렌더링
React 라우터 서버 렌더링
React Server 측 렌더링 가이드
리덕스
Redux는 애플리케이션 상태를 유지하기 위해 개발된 JavaScript 라이브러리입니다. 복잡한 응용 프로그램을 빌드할 때 구성 요소 간에 상태를 관리하기 위해 오버헤드가 추가됩니다. Redux를 사용하면 모든 상태를 단일 소스에 저장할 수 있습니다. 물론 React는 Redux와 잘 어울립니다. :)
시작하려면:
Learn Code Academy의 Redux 튜토리얼
Valentino Gagliardi 의 초보자를 위한 Redux 튜토리얼
CSS 트릭으로 Redux에 반응 하기
이 튜토리얼은 Redux를 시작하기에 충분합니다. 그러나 아래 튜토리얼도 언급하지 않을 수 없습니다. 그것은 가치 :)
Dan Abramov 의 Redux 시작하기
https://www.instagram.com/p/CY31EqdqPrp/?utm_source=ig_web_copy_link