학습 반응? 작게 시작하십시오.

안녕하세요 dev.to입니다! React를 처음 접하는 많은 사람들이 어려움을 겪는 것처럼 보이기 때문에 이것이 좋은 첫 번째 게시물이 될 것이라고 생각했습니다.

요전에 Reddit에서 다음과 같은 댓글을 보았습니다.

I have been trying to learn React for the past year now, on and off. No matter how much I try, I just cannot seem to get off the tutorials. The code just isn't intuitive.

튜토리얼을 통해 작업하고, 희미한 희망을 가지고 나오고, 자신의 앱을 만들기에 충분히 이해하지 못한다는 것을 깨달았을 때 그 희망이 산산이 부서지는 것은 심각하게 실망스럽습니다.

그게 당신이라면 몇 가지 조언이 있습니다. 작게 시작하십시오. 정말 작다는 뜻입니다.

작은 실험을 하다

어떤 종류의 것들을 스스로 구축하려고 했습니까? 얼마나 "큰"입니까?

React로 아주 작은 앱을 몇 개 빌드할 때까지 소품과 상태를 완전히 이해하지 못했습니다. 나는 "실험"이 더 나은 용어라고 생각합니다.

실험은 버리는 것입니다. 실험은 무서운 것이 아닙니다. 위험에 처한 것은 거의 없습니다. 걱정할 아키텍처도, 디자인도, 원대한 비전도 없습니다. 몇 가지 개별 단계만 있으며, 잘못하면 문자 그대로 해당 항목을 삭제하고 다시 시작할 수 있습니다.

다음과 같은 작은 실험 앱:

"hello world"렌더링

JSX에 대한 느낌을 얻기 위해 몇 가지 중첩된 일반 이전 HTML 요소를 렌더링합니다.

hello world를 Hello 및 World 2개의 구성요소로 "리팩터링"합니다. 내부에 중첩하십시오HelloWorld.

make World 선택적 소품, 표시할 "이름"을 수락하고 렌더링합니다.

const items = [{id: 1, name: "one"}, {id: 2, name: "two"}] 와 같이 사물의 정적 배열을 만듭니다. "items"를 소품으로 사용하고 items.map(...)를 사용하여 항목 목록을 렌더링하는 구성 요소를 만듭니다.

카운터를 만드십시오. 초기 상태: count = 0. 상태를 설정하여 카운트를 변경하는 "+"버튼과 "-"버튼이 있습니다.

카운터 상태를 루트 구성 요소에 넣고 몇 수준 아래에 있는 자식에 카운터 상태를 증가/감소시키는 버튼을 넣습니다. 증가/감소 기능을 props로 전달하여 자식이 부모의 상태를 업데이트할 수 있도록 합니다.

당신은 아이디어를 얻을. 정말 작은 것들. 증분. 이것들은 "앱"으로 거의 적합하지 않지만 튜토리얼을 수행하고 지식이 손가락을 통해 미끄러지는 좌절감에서 실제로 자신의 앱을 작성하는 데 도움이 될 것입니다.

이러한 작은 실험은 더 큰 앱 내의 구성 요소로 동일한 폴더 아래에 있을 수도 있지만 기본 사항을 손가락으로 드릴하기 때문에 별도의 실험을 만드는 아이디어가 좋습니다.

머슬 메모리

아무도 이것에 대해 이야기하지 않고 어리석게 보일 수도 있지만 기본 "React 앱"구조를 차갑게 배우는 것이 정말 중요하다고 생각합니다. 앱을 만들기 위한 기본 "보일러 플레이트"에 대해 이야기하고 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';

const Hello = () => <div>Hello</div>

ReactDOM.render(<Hello/>, document.querySelector('#root'));

물론 create-react-app를 사용하여 생성할 수 있습니다. 그러나 당신은 당신의 두뇌를 속일 수 없습니다. 그것은 당신이 그것들import이 무엇을 하는지 전혀 모른다는 것과 그것들이 갑자기 사라지면 당신이 그것들을 처음부터 작성하는 방법을 알지 못할 것이라는 것을 알고 있습니다. 그 약간의 두려움이 마비됩니다.

그러니 그 어두운 구석에 빛을 비추십시오. 그 선을 차갑게 배우고, 그들이 하는 일을 배우고, 눈가리개를 쓸 수 있는지 확인하십시오.
create-react-app 를 사용하지만 src 아래의 모든 항목을 삭제하고 3-5개의 앱이 고정될 때까지 index.js를 연속으로 다시 만듭니다. 파일을 보고 "무엇을 하는지 모르기 때문에 생성된 줄을 만질 수 없습니다."라고 생각할 때 많은 인지적 오버헤드가 있다고 생각합니다.

연습하세요!

React는 다른 기술과 마찬가지로 프론트엔드 개발자가 되는 방법을 알고 태어난 사람은 아무도 없습니다. 약간의 실험을 하고 연습에 시간을 투자하면 향상될 것입니다. 그러면 머릿속으로 앱 아이디어를 다룰 준비가 된 것입니다.

다른 까다로운 부분에 부딪힐 때마다 따로 연습하세요.

Redux를 배우시나요? 아무 것도 깨뜨리지 않고 어지럽힐 수 있는 작은 샌드박스 앱을 실행하세요.

React Bootstrap으로 레이아웃을 만드는 방법을 모르십니까? 당신의 메인 프로젝트를 엉망으로 만들지 마십시오. 그것은 단지 낙담할 뿐입니다. 그리고 당신은 실패한 모든 작업을 취소해야 합니다. 대신 실험 앱을 만드십시오.

고립된 상태에서 새로운 기술을 연습하십시오.

이 기사는 원래 daveceddia.com에 게시되었습니다.