30 Days Of React
1.0.0
다가오는 코딩 부트 캠프 에 가입하여 Asabeneh와 함께 배우십시오
저자 : Asabeneh Yetayeh
2020 년 10 월
1 일 >>
| # 낮 | 주제 |
|---|---|
| 00 | 소개 Repo를 사용하는 방법 요구 사항 설정 |
| 01 | JavaScript Refresher |
| 02 | 시작하기 시작합니다 |
| 03 | 설정 |
| 04 | 구성 요소 |
| 05 | 소품 |
| 06 | 목록,지도 및 키 |
| 07 | 클래스 구성 요소 |
| 08 | 주 |
| 09 | 조건부 렌더링 |
| 10 | 프로젝트 폴더 구조를 반응합니다 |
| 11 | 이벤트 |
| 12 | 형태 |
| 13 | 제어 및 제어되지 않은 구성 요소 |
| 14 | 구성 요소 수명주기 |
| 15 | 제 3 자 패키지 |
| 16 | 고차 구성 요소 |
| 17 | 라우터를 반응합니다 |
| 18 | 페치 대 axios |
| 19 | 프로젝트 |
| 20 | 프로젝트 |
| 21 | 후크 |
| 22 | 후크를 사용하는 형태 |
| 23 | 후크를 사용하여 데이터를 가져옵니다 |
| 24 | 후크를 사용하는 프로젝트 |
| 25 | 커스텀 후크 |
| 26 | 문맥 |
| 27 | 심판 |
| 28 | 프로젝트 |
| 29 | 탐구하다 |
| 30 | 결론 |
? 행복한 코딩 ???
30 일간의 React 프로그래밍 챌린지에 참여하기로 결정한 것을 축하합니다 . 이 도전에서 React 응용 프로그램을 개발하는 데 필요한 모든 것을 배웁니다. 챌린지가 끝나면 30daysofreact 프로그래밍 챌린지 완료 인증서를 얻게됩니다. 도움이 필요하거나 다른 사람을 돕고 싶은 경우 Telegram Group에 가입 할 수 있습니다.
30daysofreact 챌린지는 초보자와 고급 JavaScript 및 React Developers를위한 가이드입니다. 30 일의 React에 오신 것을 환영합니다. React는 JavaScript 라이브러리입니다. 나는 React를 사용하고 가르치는 것을 좋아하며 당신도 그렇게하기를 바랍니다. 이 단계별 단계 30 일 반응 챌린지에서 가장 인기있는 사용자 인터페이스 JavaScript 라이브러리 중 하나 인 React를 학습합니다. React는 JavaScript가 할 수있는 모든 것을 할 수 있습니다. React는 웹 사이트에 상호 작용을 추가하고 모바일 앱, 데스크탑 응용 프로그램, 게임을 개발하는 데 사용될 수 있습니다. 앞으로 30 일 안에 많은 것을 배우고 프로그래밍 및 문제 해결 기술도 크게 향상 될 것입니다.
나는 대화하는 영어와 적은 전문 용어를 사용 하여이 도전을 쓸 것입니다. 콘텐츠는 지속적으로 업데이트됩니다. 오타 나 문법 실수를 발견하면 게시하기 전에 증거를 읽지 않기 때문에 놀라지 마십시오. 영어 대신 도전의 주요 메시지와 약간의 실수에 집중하는 것이 좋습니다. 개선 요청을 보내 주시고 풀 요청을 보내기 전에 마스터에서 먼저 당기는 것을 기억하십시오. 이 도전에서 내가 사용한 대부분의 이미지는 30daysofjavaScript 챌린지에서 나왔으므로 파일 이름과 폴더 이름을 30 일만 해제해야 할 수도 있습니다. 배열, 루프, 기능, 객체, 기능 프로그래밍, 파괴 및 확산 및 수업에 능숙하다면 문제를 제대로 따를 수 있습니다. 그렇지 않으면 30daysofjavaScript를 확인하는 것이 좋습니다.
이 과정에 뛰어 들기 전에 30 일의 React 검토를 확인할 수 있습니다.
이 도전은 읽기 쉽고 대화하는 영어로 작성되며, 참여, 동기 부여 및 동시에 매우 까다 롭습니다. 이 도전을 마치려면 많은 시간을 할당해야합니다. 시각적 학습자라면 Washera YouTube 채널에서 비디오 레슨을받을 수 있습니다. YouTube Vides에서 채널을 구독하고 댓글을 달고 질문하십시오. 저자는 결국 귀하를 알아 차릴 것입니다.
저자는 도전에 대한 귀하의 의견을 듣고 30daysofjavaScript 도전에 대한 귀하의 생각을 공유합니다. 이 링크에 평가를 남길 수 있습니다
다가오는 코딩 부트 캠프 에 가입하여 Asabeneh와 함께 배우십시오
도전과 어울리려면 다음이 필요합니다.
이 repo를 Straw를 지원 하고이 작업을 지원하고 Repo를 포크하여 자신만의 사본을 만들어 작업하십시오.
포크 사본에서 항상 직접 작업해야합니다.
# note that an `ssh` link is used here, but an `https` link will work the same
git clone [email protected]:username/30-Days-Of-React.git
cd 30-Days-Of-React매일 운동을 완료하기 위해서는 운동 폴더 또는 다른 변경 사항을 수용 할 별도의 지점을 만드는 것이 좋습니다. 이렇게하면 항상 마스터 브랜치를 깨끗하게 유지할 수 있습니다. 즉, 마스터는 항상 원래 마스터와 비슷합니다.
git checkout -b exercise-solutions # `-b` creates the branch if it does not exist새 지점에서는 파일/폴더를 사용하여 매일 운동에 대한 솔루션을 구조화 할 수 있습니다.
mkdir -p solutions/day-01 # `-p` helps create nested directories
touch solutions/day-01/level1.js # touch creates a file포크에 솔루션을 커밋하십시오
git add solutions/day-01/level1.js
git commit -m " chore: exercise level1 complete "
git push origin exercise-solutions # branch `exercise-solutions` was created earlier이 repo는 매월 매일 업데이트됩니다. 새로운 날의 콘텐츠를 사용할 수있게되면 아래 단계로 포크 사본을 업데이트 할 수 있습니다.
# 1. switch to master branch
git checkout master
# 2. check if your local copy has a link to original `...Asabeneh/30-Days-Of-React.git`
git remote -v
# 3. if not, add a link to original, you can choose any name for the link or use `upstream`
git remote add upstream [email protected]:Asabeneh/30-Days-Of-React.git
# 4. check again to confirm link added
git remote -v
# 5. now you can fetch updates from original repo, assuming you named this `upstream`
git fetch upstream
# 6. merge the updates to your local master branch
git merge upstream/master master
# 7. push the merged updates to your Forked copy on GitHub
git push origin master업데이트는 마스터 브랜치에만 적용됩니다. 다른 지점을 업데이트하려면 분기 이름으로 6-7 단계를 반복하십시오.
exercise-solutions지점은 아래 스 니펫을 참조하십시오
git merge upstream/master exercise-solutions
git push origin exercise-solutions나는 당신이 개발자, 컴퓨터 및 인터넷이 되고자하는 동기와 강한 소망이 있다고 생각합니다. 그 기본 대 중간 수준 HTML, CSS 및 JS 외에도. 당신이 그것들이 있다면, 당신은 시작할 모든 것이 있습니다.
지금 Node.js가 필요하지 않을 수도 있지만 나중에 필요할 수 있습니다. Node.js를 설치하십시오.
더블 클릭 및 설치를 다운로드 한 후
장치 터미널 또는 명령 프롬프트를 열어 노드가 로컬 컴퓨터에 설치되어 있는지 확인할 수 있습니다.
asabeneh $ node -v
v12.14.0이 튜토리얼을 만들 때 노드 버전 12.14.0을 사용하고 있었지만 이제는 다운로드 용 Node.js의 권장 버전은 12.17.0입니다.
많은 브라우저가 있습니다. 그러나 Google Chrome을 강력히 추천합니다.
아직없는 경우 Google 크롬을 설치하십시오. 브라우저 콘솔에 작은 JavaScript 코드를 작성할 수 있지만 브라우저 콘솔을 사용하여 응용 프로그램을 개발하지 않습니다.
브라우저의 오른쪽 상단 모서리에서 3 개의 점을 클릭하거나 더 많은 도구를 선택하거나 키보드 단축키를 사용하여 Google Chrome 콘솔을 열 수 있습니다. 나는 바로 가기를 선호합니다.
키보드 바로 가기를 사용하여 Chrome 콘솔을 엽니 다. 바로 가기를 JavaScript로 아는 것이 좋으며 개발자는 브라우저 콘솔에서 많은 시간을 보내고 개발 중에 열기는 게으르지 않습니다.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
Google Chrome 콘솔을 열면 표시된 버튼을 탐색하십시오. 우리는 대부분의 시간을 콘솔에서 보낼 것입니다. 콘솔은 JavaScript 코드가가는 곳입니다. Google 콘솔 V8 엔진은 JavaScript 코드를 기계 코드로 변경합니다. Google Chrome 콘솔에 JavaScript 코드를 작성하겠습니다.
Google 콘솔 또는 브라우저 콘솔에 JavaScript 코드를 작성할 수 있습니다. 그러나이 과제를 위해 Google Chrome 콘솔에만 중점을 둡니다. 다음을 사용하여 콘솔을 엽니 다.
Mac
Command+Option+I
Windows:
Ctl+Shift+I첫 번째 JavaScript 코드를 작성하기 위해 내장 기능 Console.log ()를 사용했습니다. 입력 데이터로 인수를 전달했으며 함수는 출력을 표시합니다. Console.log () 함수의 입력 데이터 또는 인수로 'Hello, World'를 통과했습니다.
console . log ( 'Hello, World!' ) Console.log () 함수는 쉼표로 분리 된 여러 매개 변수를 사용할 수 있습니다. 구문은 다음과 같습니다. console.log (param1, param2, param3)
console . log ( 'Hello' , 'World' , '!' )
console . log ( 'HAPPY' , 'NEW' , 'YEAR' , 2020 )
console . log ( 'Welcome' , 'to' , 30 , 'Days' , 'Of' , 'JavaScript' )위의 스 니펫 코드에서 볼 수 있듯이 Console.log ()는 여러 인수를 할 수 있습니다. 코드에서 무슨 일이 일어나고 있는지 확인하기 위해 많은 Console.log () 인쇄물을 사용하는 것이 좋습니다. 코드에서 모든 Console.log () 테스트를 영원히 유지하지는 않습니다. 브라우저 콘솔을 열어 두어 인생을 쉽게 만드십시오.
코드에 의견을 추가합니다. 코드를보다 읽기 쉽게 만들고 코드에 비고를 남기는 것이 매우 중요합니다. JavaScript는 코드의 주석 부분을 실행하지 않습니다.
예 : 한 줄의 주석
// 이것은 첫 번째 주석입니다
// 이것은 두 번째 주석입니다
// 나는 한 줄의 주석입니다
예 : 다중 댓글
/* 이것은 멀티 라인 댓글입니다
다중 댓글은 여러 줄을 사용할 수 있습니다
JavaScript는 웹의 언어입니다
*/
프로그래밍 언어는 인간 언어와 유사합니다. 영어 또는 다른 많은 언어는 단어, 문구, 문장, 복합 문장 등을 사용하여 의미있는 메시지를 전달합니다. 구문의 영어 의미는 언어로 잘 형성된 문장을 만들기위한 단어와 문구의 배열 입니다. 구문의 기술적 정의는 컴퓨터 언어로 된 진술 구조입니다. 프로그래밍 언어에는 구문이 있습니다. JavaScript는 프로그래밍 언어이며 다른 프로그래밍 언어와 마찬가지로 자체 구문이 있습니다. JavaScript가 이해하는 구문을 작성하지 않으면 다양한 유형의 오류가 발생합니다. 나중에 다른 종류의 JavaScript 오류를 탐색 할 것입니다. 지금은 구문 오류를 보자.
나는 고의적 인 실수를했다. 결과적으로 콘솔은 구문 오류를 제기합니다. 실제로 구문은 매우 유익합니다. 그것은 어떤 유형의 실수가 있었는지 알려줍니다. 오류 피드백 가이드 라인을 읽으면 구문을 수정하고 문제를 해결할 수 있습니다. 프로그램에서 오류를 식별하고 제거하는 프로세스를 디버깅이라고합니다. 오류를 해결하겠습니다.
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )지금까지 Console.log ()를 사용하여 텍스트를 표시하는 방법을 보았습니다. console.log ()를 사용하여 텍스트 나 문자열을 인쇄하는 경우 텍스트는 단일 따옴표, 이중 인용문 또는 백 틱 따옴표 안에 있어야합니다. 예:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )
console . log ( `Hello, World!` ) 이제 숫자 데이터 유형에 대해 Chrome Console에서 Console.log ()를 사용하여 더 많은 쓰기 JavaScript 코드를 연습하겠습니다. 텍스트 외에도 JavaScript를 사용하여 수학적 계산을 수행 할 수도 있습니다. 다음과 같은 간단한 계산을하겠습니다. 콘솔은 Console.log () 함수없이 직접 인수를 취할 수 있습니다. 그러나이 도전의 대부분은 기능 사용이 필수적 인 텍스트 편집기에서 발생하기 때문에이 소개에 포함됩니다. 콘솔의 지침으로 직접 놀 수 있습니다.
console . log ( 2 + 3 ) // Addition
console . log ( 3 - 2 ) // Subtraction
console . log ( 2 * 3 ) // Multiplication
console . log ( 3 / 2 ) // Division
console . log ( 3 % 2 ) // Modulus - finding remainder
console . log ( 3 ** 2 ) // Exponentiation 3 ** 2 == 3 * 3브라우저 콘솔에 코드를 쓸 수 있지만 더 큰 프로젝트에는 도움이되지 않습니다. 실제 작업 환경에서 개발자는 다른 코드 편집기를 사용하여 코드를 작성합니다. 이 30 일 자바 스크립트 챌린지에서 Visual Studio Code를 사용할 것입니다.
Visual Studio Code는 매우 인기있는 오픈 소스 텍스트 편집기입니다. Visual Studio Code를 다운로드하는 것이 좋습니다. 그러나 다른 편집자를 선호한다면 자유롭게 가지고있는 것을 자유롭게 따르십시오.
Visual Studio 코드를 설치 한 경우 사용을 시작하겠습니다.
아이콘을 두 번 클릭하여 Visual Studio 코드를 엽니 다. 당신이 그것을 열면, 당신은 이런 종류의 인터페이스를 얻게됩니다. 레이블이 붙은 아이콘과 상호 작용하십시오.
축하해요! React로 시작하는 데 필요한 설정을 완료했지만 React로 뛰어 들기 전에 JavaScript Refresher를 수행하겠습니다. JavaScript에 매우 편한 경우 1 일 JavaScript Refresher를 건너 뛸 수 있습니다. JavaScript Refresher 섹션은 방대하며 하루 이상이 걸릴 수 있습니다. 내 경험에서 사람들은 일반적으로 자바 스크립트 지식이 매우 얕기 때문에 React에 사용할 수있는 모든 필요한 JavaScript 기능을 JavaScript Refresher Section에서 다루기 위해 매우 얕기 때문입니다. 많은 운동이 있지만 해결할 필요는 없습니다. JavaScript를 건너 뛰고 React로 직접 점프하려면 여기를 클릭하십시오.
? 축하해요 ! ?
1 일 >>
