우선, 귀하의 질문에 대한 짧은 대답은 없습니다. 각 주제는 이해하고 습득하기 위해 며칠, 몇 주 또는 몇 달 동안 파고 들어갈 수 있습니다. 귀하의 질문에 관련된 모든 주제에 대한 은유를 사용하려고 노력할 것입니다.
Q : Babel은 무엇이며 왜 필요합니까?
자바 스크립트는 지난 몇 년 동안 발전해 왔습니다. 많이!. JavaScript는 오늘날 번역기 없이는 오래된 브라우저가 이해할 수없는 많은 새로운 단어와 문장 구조를 가지고 있습니다. 바벨은 그 통역입니다. 현대의 브라우저 (자바, 크롬, 파이어 폭스, 에지, 사파리)는 근본적으로 자바 스크립트의 대부분을 이해할 수 있습니다. 멋진 어린이가 ECMAScript2015, ES2015 또는 ES6이라고 부르는 경우도 있습니다.
그래도 ES 끊임없이 진화하고 있습니다. 새로운 기능이 단계적으로 추가되고 바벨 (babel)은 이러한 모든 기능을 문자 그대로 시대에 관계없이 모든 브라우저에서 이해할 수있는 평범한 구형 JavaScript로 변환하여 이러한 단계 기능을 따라 잡습니다. 바벨 (바벨)을 가지고 노는 것과 그것이 무엇을하는지 여기에서 볼 수 있습니다 : https://babeljs.io/repl/
Q : 무엇입니까?
React는 효율적인 방식으로 데이터를 표시하는 데 도움이되는 많은 최신 프런트 엔드 프레임 워크 중 하나입니다.
이케아가 개발자 용으로 LEGO를 제작 한 경우 React라고합니다. React 블록 (컴포넌트 라 부름)을 만들고 함께 만들어 응용 프로그램을 만듭니다. React 구성 요소는 순전히 프레젠테이션 (또는 '벙어리') 일 수 있습니다. 즉, 일부 HTML 만 반환하거나 '스마트'할 수 있습니다. 스마트 구성 요소에는 상태 인이있을 수 있습니다.
다시 LEGO 유추로 돌아 가면 상태은 LEGO Technics 세트의 엔진이됩니다. 구성 요소가 평범한 오래된 레고 자동차 인 경우 앞으로 나아갈 수 있도록 외부 도움이 필요합니다. 손으로 차를 밀면 앞으로 나아갑니다. 똑똑한 구성 요소 또는 LEGO 기술 엔진을 사용하면 LEGO Technics 자동차가 상태 인을 엔진이 시동 할 때 스스로 움직일 수있게 변경하여 내부에서 본래 차량을 앞으로 밀 수 있습니다. 따라서 상태가 변경 될 때마다 귀하의 차량은 REACTS로 변경됩니다. 하나의 구성 요소에 대해서도 마찬가지입니다. React는 구성 요소 상태의 변경 사항을 감시하고 변경 사항 (일반적으로 사용자 이벤트에 의해 트리거 됨)이있을 때마다 구성 요소가 업데이트됩니다. 반응 구성 요소는 평범한 구식 자바 스크립트로 작성 될 수 있지만 ES6은 권장되며, React 개발자로서의 삶을 훨씬 쉽게 만듭니다. 따라서 브라우저에서 React 앱을 이해할 수있게하려면 Babel과 같은 번역사가 필요합니다.
Q : Redux?
좋아, 여기서 여기서 멈추고이 시점에서 Rex 응용 프로그램을 만들 때 Redux가 필요 없다고 말합니다. Redux는 모든 프레임 워크와 함께 또는 바닐라 JavaScript와 함께 사용할 수있는 라이브러리입니다. Redux는 응용 프로그램을 추상화하는 기능을 제공합니다. 모델 또는 데이터가있는 곳에서 Redux가 저장소를 호출합니다. 저장소는 무엇이든, 배열이든, 객체이든, 무엇이든 될 수 있습니다. Redux의 임무는 수신 및 조치가있을 때마다 해당 상점을 갱신하는 것입니다.
Redux가 John이라는 살아있는 사람이라고 상상해 봅시다. 존에게는 빈 컵 (상점)이 주어집니다. 존이 '물을 부어라'고 말할 때마다 존은 컵을 잡고 그것에 물을 부을 것입니다. '물 붓는다'명령은 우리의 행동입니다. John은 '빈 컵'과 같은 다른 행동을들을 수 있습니다. 각 작업은 처리 장치 인 John의 두뇌 (작업 감속기)를 통과합니다. 존이 뇌가 없다면 그는 어떤 행동도 할 수 없을 것입니다. 존은 '텅 빈 컵'명령을 받으면 물을 버린다. 존에게 여러 가지 행동을 원한다면 가르 칠 수 있지만, 존에게 다른 행동을하도록 다른 저장소를 제공 할 수 있습니다. 중요한 요점은 여기에 요한은 가게 (컵), 감속기 (두뇌)를 가지고 있고 실행할 몇 가지 행동이 주어진다는 것입니다. 따라서 작업은 감속기를 통과하여 감속기가 결정한 것을 기반으로 저장소를 업데이트합니다. 따라서 자바 스크립트에서 감속기는 동작을 취하여 상점을 반환하는 함수입니다. 액션은 일반 자바 스크립트 객체이며, 유형 속성 ('pour')이 있으며 페이로드 ('물')가있을 수도 있습니다. 그래서 기본적으로 당신은 물을 붓는다. John은 물을 부어 넣는다. 부어는 행동 유형이고 유료 하중은 물이다.
Q : React-Redux? 각 구성 요소는 감속기에 액션을 보낼 수 있도록, 서로 반응하고 REDUX의 퓨즈 수있는 스카치 테이프, 및 각 구성 요소 등의 반응 - REDUX의
생각해 가게에 액세스 할 수 있습니다.
Q : Webpack?
위의 예에서 이미 여러 라이브러리가 있습니다. Babel, React, Redux, React-Redux 등이 있으며 다른 라이브러리, 자산, 파일 및 기타 프로젝트에 필요한 것이 얼마나 많은지 알고 있습니다. 아마 당신이 익숙한 것은 스크립트, 이미지, 링크 태그를 사용하여 index.html에서 각각을 가져 오는 것입니다. 글쎄, 지나치게 간소화 된 webpack이 당신을 위해 그것을합니다! 앱의 일부 모듈이 다른 모듈, 자산 또는 다른 요소에 의존 할 때마다 webpack은 모든 종속성을 반복적으로 찾고이를 하나의 파일에 저장합니다. index.html에 해당 파일 하나를 가져 오기 만하면됩니다.Webpack은 여러 가지 다른 일을 할 수 있지만 그게 요점입니다. 따라서 모듈 번들러라고 불리는 이유입니다.
휴, 그게 전부입니다. 네가 이걸 가지고 있다면 너는 진정한 영웅이야. 나는 너의 인내심에 감탄한다.
P. 이 모든 라이브러리와 프레임 워크에 대한 최신 정보를 얻을 수 있도록 기사
정말 좋은 (재미있는)이 하나입니다 응용 프로그램과 같은 https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
Nodejs이 API를 사용하여 데이터를 가져오고 반응 또는 각도 할 수 있도록 데이터를 표시하는 방법에 대한 렌더링뿐 아니라 논리적 부분도 수행합니다. 정상적인로드에 비해 페이지를 빠르게로드하는 데 도움이됩니다. 반응의 주요 이점 중 하나는 코드 재사용 성을 극대화하는 구성 요소 사용입니다. 일단 당신이 뭔가 유용한 일을 시작하면 더 잘 이해할 것입니다. 안녕하세요 세상의 예만이 아닙니다. –
@KrishnadasPC 괜찮습니다.하지만 ReactJS는 자체 라이브러리입니다. ReduxJS와 BabelJS는이 모든 것에 어떻게 적합합니까? – JordanGS
redux의 경우 Dan Abramov의 'Redux 시작하기'체크 아웃 https://egghead.io/courses/getting-started-with-redux 더 좋은 초보자 리소스 없음 –