react exercise

React.js 운동

이 연습은 상호 작용 방식으로 기본 반응 개념에 익숙해지고 최신 Node.js 환경에서 편안하게 개발할 수 있도록 의도됩니다. 이 프로젝트는 여러 부분으로 분류됩니다. 각 부분은 기본 반응/프론트 엔드 개념을 다룹니다.

React 초보자 가이드와 초보자 가이드에 대한 React는 RECT 기초에 대한 완전한 이해를 얻기 위해 매우 유익 할 것입니다. 또한이 연습의 일환으로 반응 문서와 자바 스크립트 문서에 편안하게 다이빙하는 것이 좋습니다.

요구 사항

• 노드 버전 8.x
• NPM 버전 5.x

여기에 노드와 NPM을 설치하십시오.

터미널에서 다음 명령을 실행하여 올바른 버전이 있는지 확인하십시오.

 node -v

 npm -v

설정

React DevTools를 설치하여 쉽게 디버그하고 React 앱에서 무슨 일이 일어나고 있는지 확인하십시오.

텍스트 편집기는이 프로젝트에서 사용되는 JSX 구문을 기본적으로 지원하지 않을 수 있지만 적절한 구문 강조 표시를위한 플러그인이있을 수 있습니다. 예를 들어, Sublime Text는 Babel 플러그인을 사용합니다.

먼저이 저장소를 포크하십시오. 오른쪽 상단의 포크 버튼. 이것이하는 일은이 저장소를 귀하의 계정으로 복사하는 것입니다. 이제 <yourusername>/react-exercise 이름의 저장소가 있어야합니다.

이렇게 보일 것입니다 (내 사용자 이름은 Davidachang입니다) :

그런 다음이 저장소를 복제합니다 ( "클론 또는 다운로드"라는 녹색 버튼을 클릭하고 HTTP를 선택하고 <url> 위치에 복사하여 붙여 넣습니다.

 $ git clone <url>
$ cd react-exercise

프로젝트 종속성 설치 :

 npm install

그 후에는 이것을 실행하여 개발을 시작합니다.

 npm start

이렇게하면 앱을 실행하고 http : // localhost : 3000에서 자동으로 열립니다. 코드를 변경하고 저장할 때마다 자동으로 다시로드됩니다! 이것은 터미널에서 실행되는 프로세스로 유지되므로 다른 명령을 실행하려면 새 탭이나 창을 열어야합니다.

선택적 설정

Pretier는 코드를 자동으로 재구성하여 특정 코딩 스타일 지침 세트를 따르는 도구입니다. 각 커밋 전에 자동으로 실행하도록 구성됩니다. 이를 통해 모든 코드가 동일한 코드 스타일을 따르도록하여 모범 사례를 시행하고 충돌을 최소화합니다.

이 연습에는 반드시 필요하지 않지만 편집자를 위해 설치할 수있는 더 예쁜 플러그인이 있습니다. 여기서 지침을 참조하십시오.

1 부

목표 : JSX 구문, 구성 요소 구조 및 전달 소품에 익숙해지기

작업 :

• H4i 로고 힌트를 표시할지 여부를 결정하는 Instructions 구성 요소로 꼭 봐야 shouldDisplayImage 소품을 보내십시오.

2 부

목표 : 렌더링 목록 및 JavaScript 배열 기능에 익숙해지기

작업 :

• 문자열 목록이 포함 된 Instructions 구성 요소에 items 소품을 보내십시오.
• 모든 items 의 총알 포인트 목록을 표시하십시오
• 3 자 미만의 모든 항목 제거
• 다른 모든 목록 항목 대문자를 만드십시오
• 루프를 for 하거나 사용 while 않고이 작업을 수행하십시오
• 보기에 매우 유용한 비디오 :
• 기능 프로그래밍 소개 - 처음 두 비디오만으로도 충분합니다. 나머지 재생 목록과 그의 다른 비디오에서 배울 것이 많습니다! (적극 권장 권장)
• 렌더링 목록에서 React

파트 3

목표 : 구성 요소 상태에 익숙해 지십시오

작업 :

• 새 Counter 구성 요소를 만듭니다
• 초기 count 상태를 0 으로 설정하십시오
• 현재 카운트의 값을 표시하십시오
• 카운트를 증가시키는 두 개의 버튼과 하나의 버튼을 만듭니다. 힌트

파트 4

목표 : 사용자 입력에 익숙해집니다

작업 :

• App.js 에서는 initialCount 상태를 설정하는 입력 및 제출 버튼을 만듭니다.
• 사용자 입력을 확인하여 유효한 지 확인하십시오 (숫자)
• initialCount 상태를 Counter 구성 요소로 전달 하고이 값을 Counter 의 초기 count 로 사용하십시오. 사용자 입력은 String 이고 Number 를 보내려고 하므로이 작업을 수행 할 때 유형을 조심하십시오.
• 보너스 : 사용자 입력이 유효하지 않은 경우 UI 피드백 표시 (간단한 메시지가 수행됩니다)
• 참고 : 버튼이 페이지를 새로 고치는 경우 버튼 유형을 던져 버튼 : <button type="button" ...

파트 5

목표 : 형제 구성 요소 간의 상태/소품 통신을 이해합니다

작업 :

• input 및 제출 버튼을 App 구성 요소의 자식 인 InitialCountForm 이라는 자체 구성 요소로 이동
• 카운터의 초기 수를 설정할 수있는 기능이 작동하도록 유지하십시오.
• 잠재적으로 유용합니다 : 반응 구성 요소 수명주기, 특히 구성 요소 WillReceiveProps. 접선 관련 : 치트 시트를 반응합니다
• 유용 : 나무에서 상태를 움직입니다

파트 6

목표 : CSS/SCSS 및 스타일에 익숙해 지십시오

작업 : 구체적이지 않고 스타일링을 즐기십시오!

참고 : SCSS 파일을 생성 할 수 있으며 저장하면 CSS 파일로 자동 컴파일되지만 CSS 파일을 구성 요소로 가져와야합니다.

일부 스타일 관련 리소스 :

• 레이아웃을 배우십시오
• Flexbox에 대한 완전한 가이드
• BEM 패턴

자원

React 초보자 가이드
MDN- JavaScript에 대한 재 도입
반응에 대한 초보자 안내서
DOC를 반응합니다
에어 비앤비의 JavaScript 스타일 가이드
에어 비앤비의 반응 스타일 가이드
에어 비앤비의 CSS 스타일 가이드

제출

모든 단계가 완료되면 변경 사항을 GitHub 리포로 푸시하십시오!

PR을 제출하기 전에 지점을 원격 지점 (로컬이 아닌 Github에있는 지점)으로 밀어야합니다.

당신이 당신의 지점에 있는지 확인하십시오 :

 git branch

모든 커밋이 있는지 확인하려면 다음과 같습니다.

 git log

Q 눌러 git log 화면을 종료하십시오.

커밋을 원격 지점으로 밀어 넣으십시오.

 git push

처음 으로이 작업을 수행하면 원격 브랜치가 아직 존재하지 않으므로 오류가 발생할 수 있습니다. 일반적으로 사용하기위한 올바른 명령을 알려줍니다.

 git push --set-upstream origin <YOUR_BRANCH_NAME>

참고 : 새 지점을 처음 밀어 넣을 때만 완료하면됩니다. 나중에 git push 만 사용할 수 있습니다.

이 작업이 완료되면 Forked Repository 및 Branch Name에 대한 링크와 함께 [email protected]로 이메일을 보내주십시오. 제출물을보기 위해서는이 두 가지가 필요합니다.

 H A C K 4 I M P A C T
                    H A C K 4 I M P A C T
                                        H A C K 4 I M P A C T
                                                            H A C K 4 I M P A C T
                                                                                H A C K 4 I M P A C T