현대 자바 스크립트로가는 길
이 안내서의 목적은 현대의 JavaScript 및 React Library를 배우는 데 도움이되는 여러 무료 Ressources (기사, 서적, 비디오?)의 목록을 제공하는 것입니다.
켈 이 안내서는 JavaScript 또는 React에 대해 알아야 할 모든 것을 나열하기위한 것이 아닙니다. 나는 당신이 내 경험과 내가 만난 사람들을 기반 으로이 세상에 완전히 익숙하지 않은 경우 유용한 것을 나열하려고 노력했습니다. 좋아하는 것이 거기에 나열되어 있지 않다고해서 내가 그것을 싫어하거나 그것을 승인하지 않는다는 의미는 아닙니다. 예를 들어 TypeScript 또는 GraphQL은 훌륭하지만 초보자로서 먼저 배우는 것이 필수라고 생각하지 않습니다.
1) 현대 자바 스크립트?
모든 것을 다루는 튜토리얼 :
- Web Development는 또한 HTML 및 CSS를 가르쳐 줄 것입니다.
- Eloquent JavaScript는 JS 및 일반 프로그래밍 개념을 배우는 데 완벽합니다.
- 현대의 JavaScript 튜토리얼이 어떻게 수행되었는지. 기본에서 간단하지만 자세한 설명으로 고급 주제까지.
- ES6 (ECMAScript 2015)을 배우십시오. 얼마 전에 JavaScript를 작성하고 현대 구문을 따라 잡고 싶다면.
내가 좋아하는 기사와 비디오 :
- Dinosaurs에 대해 현대의 JavaScript는 NPM, Babel, Webpack 등 및 그 뒤에있는 역사에 대한 기본 사항을 배울 것입니다.
- JavaScript의 호이 스팅 이해 다른 프로그래밍 언어에서 온 경우 JS의 변수를 선언 할 수있는 방법이 불편할 수 있습니다. 이 기사는 기분이 나아지도록 도와 줄 것입니다!
- 디버그 자바 스크립트? Firefox 또는 Edge에는 고유 한 DevTools가 있지만 코딩 할 때 개인적으로 Chrome을 사용하는 것을 선호합니다.
- JavaScript의 기능 프로그래밍? 이 비디오는 이전 Spotify JS 개발자에 의해 만들어졌습니다. 그는 약속, 폐쇄 또는 고차 기능과 같은 필수 개념을 가르쳐 줄 것입니다. 그런 것들은 반응에 필수적인 것입니다.
- 상속에 대한 구성? 학교에서 나는 많은 객체 지향 프로그래밍을해야했다. 이 비디오는 왜 항상 필요한지 이해하는 데 도움이되었습니다.
선적 서류 비치
예를 들어 코드베이스에서 특정 키워드를 모르거나 기본 기능을 사용하는 방법을 배우고 싶은 경우 문서를 검색해야합니다. 물론 검색 엔진이나 stackoverflow를 사용할 수 있지만 MDN 웹 문서를 사용하는 것이 좋습니다.
2) 반응 ⚛️
- 반응은 무엇입니까? 초보자를위한 시각적 소개
- React에 대해 알아야 할 JavaScript
- 공식 문서는 반응을 배우기에 가장 좋은 곳입니다.
- 반응에 대한 초보자 안내서?
- REACT 사이트를 수행하기위한 진보적 인 React 팁. Web.dev에는 이와 같은 기사도 많이 있습니다.
- 바닐라 JavaScript 및 React를 사용하여 강력한 웹 앱을 구축하기위한 패턴 학습 패턴.
후크? 클래스 구성 요소
후크는 매우 반응하여 특정한 반응이 있습니다. 왜 반응 후크가 있는지 확인하는 것이 좋습니다. ? React History에 대해 더 많이 배우거나 이제 우리가 후크를 사용하는 이유. 클래스 구성 요소와 구성 요소간에 논리를 공유하는 데 사용되는 일부 패턴에 대해 배우고 싶을 수도 있습니다 (후크가 도착하기 전).
- 후크 흐름도를 클래스 구성 요소 라이프 사이클 메소드 다이어그램과 비교하십시오.
- 고차 구성 요소 : 반응 응용 프로그램 설계 패턴
- 소품 렌더링
주 경영 및 기타 도서관
어느 시점에서 당신은 소품을 계속해서 전달하지 않기 위해 모든 종류의 글로벌 상태에 접근하는 것이 좋을 것이라고 생각할 수도 있습니다. 기사 반응 주 관리 라이브러리와 좋은 개요를 선택하는 방법을 읽는 것이 좋습니다. 2023 년의 React Libraries 도이 주제와 더 많은 것을 다룰 것입니다!
3) 다음은 무엇입니까!? ?
- React Newsletter 및 Bytes Newsletter로 최신 정보를 유지하고 새로운 것을 발견하십시오.
- 연습 Create-React-App으로 또는 Codesandbox의 브라우저에서 직접 반응하십시오.
- Vite, Next.js, Gatsby, Expo를 통해 기본적으로 React React Ready Apps를 구축하십시오.
스타일링은 어떻습니까? ?
일부 기본 사항
- CSS에 상록수 CSS 코스를 배우고 웹 스타일 전문 지식을 레벨 업하기 위해 참조하십시오.
- 현대 CSS는 공룡에 대해 설명했습니다
- CSS-in-JS 또는 CSS-and-JS
- 스타일링 및 CSS 공식 반응 Doc
스타일을 관리하는 데 사용할 수있는 Somne 라이브러리 :
- 꼬리 바람
- CSS 모듈
- 바닐라 추출
- 감정
- 스타일의 구성 요소 인 저는 "클래식"CSS를 작성하는 데 익숙하고 JavaScript와 혼합하여 활용하려는 사람들에게 선택 중 최고라고 생각합니다.
설계 시스템
어쩌면 당신은 앱을 만들고 CSS와 HTML을 쓰는 데 많은 시간을 보내지 않기를 바랍니다. 재료 UI, 개미 디자인 또는 Polaris와 같은 라이브러리를 사용하는 것이 좋습니다. 자신의 디자인 시스템을 구축하려면 원자 디자인을 읽는 것이 좋습니다.
테스트는 어떻습니까? ?
- 그러나 실제로 JavaScript 테스트는 무엇입니까?
- React Testing Library 튜토리얼 사용 방법 Jest를 이해하고 React Testing Library를 통해 자동 테스트를 작성하는 방법을 배웠습니다 (다른 테스트 라이브러리가 있지만 RTL은 공식 문서에서 권장하는 훌륭한 것입니다).
- Jest Mocks 조롱을 이해하는 것은 의존성을 제어하고 검사 할 수있는 객체로 대체함으로써 테스트 대상을 분리하는 기술입니다.
- 왜 사이프러스인가? ? 엔드 투 엔드 테스트 등을 작성하는 도서관;
기본적으로 기본적으로 도구
- 코드 편집기 : 대 코드;
- 자동 코드 포맷터 : 더 예쁘다;
- Linter : Eslint;
- 명령 대신 UI를 통해 GIT를 관리합니다. SONECETREE 또는 VS CODE;
- 앱 빌드 및 배포 : NetLify;
- 지속적인 통합 : Travis CI;
- 도메인 이름 구매 : Google 도메인;
다른 라이브러리가 기본적으로
- 라우팅 : 반응-로터;
- 국제화 : Linguijs;
- 구성 요소를 분리하여 스토리 북을 통해 팀에 공유하십시오. 스토리 북을 배포하고 각 스토리에서 크로마 스토리를 통해 스크린 샷 테스트를 실행하십시오.
- 테스트시 API 조롱 : 모의 서비스 작업자;
유료 코스?
완료 한 후 권장하는 것 :
- 웨스 보스 코스? JavaScript, React, CSS 등; 일부는 무료 입니다!
- Kent C. Dodds 코스? 반응, 테스트;
