React 베이스 클린업

선언:
두 달 동안 휴가를 냈더니 수중에 있는 지식이 많이 빠졌다. 입사 전에 한 바퀴 복습을 하면서 마침 이전의 것을 완전하게 귀납했다.【PS: 모든 노트는 추후 업데이트 보충을 할 수 있습니다.】
=============================================================================================
1. React 환경의 기초를 구축한다. [새로운 컴퓨터에 새로운 환경을 구축하기 때문에 모든 설치를 한 번 한다.]
(1) 컴퓨터에 Node 환경이 있습니다[다운로드 설치 환경:https://nodejs.org/en/】
(2) 상응하는 컴파일러(개인용 VsCode, 취향에 따라 컴파일러 다운로드 설정을 할 수 있음) [다운로드 주소:https://code.visualstudio.com/download】
(3) cmd에서 작업 문서 디렉터리로 전환(Git 제어 소프트웨어가 있으면 문서 디렉터리에서 우클릭으로 들어갈 수 있음)
(4) 명령줄 메서드로 환경 설정:
           npm install -g create-react-app
           create-react-app my-app
           cd my-app
           npm start
브라우저에 REACT의 도표와 HelloWorld가 나타나는 것은 환경 구축의 성공을 설명한다
참고: VsCode는 터미널 통합 환경이 있는 VS로 해당하는 디렉터리 환경을 열고 터미널을 클릭하여 해당하는 네 번째 단계를 진행할 수 있는 것으로 본질은 같다.
2. React의 기초 지식을 복습하세요.
1. React의 핵심 개념은 ① Component ② JSX ③ ref ④ props ⑤ state2. ： （1） -- ReactDOM.render( ， ) ：  ReactDOM.render( Hello React ,document.getElementById('example')) （2）babel--babel js ， es6\jsx :ReactDOM.render( Hello React ,document.getElementById('example')) ： ReactDOM.render(             React.createElement('h1',null,"Hello React"),             document.getElementById('example')             ) (3)jsx(javaScriptXML) jsx？ jsx ， js ！ JSX ： ① ② {， js ： 1.react ， ， ！ 2.{/* */}
GITHUB[https://github.com/CrystalAngelLee/ReactBasis] 연습 가랑이 밑 데모01.html&Demo_02.html 기초 연습3. Component 【 ， 】 （1）React     ：             var Hello = React.createClass({                 render:function(){                     return                 }             })         ：                 ：         ① ( )         ② render ，         ③ ，         ④
연습 참조: GITHUB[https://github.com/CrystalAngelLee/ReactBasis] 연습 가랑이 밑 데모03.html （2） ---
연습 참조: GITHUB[https://github.com/CrystalAngelLee/ReactBasis] 연습 가랑이 밑 데모04.html
4. Props 특성(properties)
4.1 React에서 props 속성을 통해 부모와 자식의 통신을 실현
구현 단계: ① 전송 ② MyHello의 구성 요소에서 수신:this.props.myname
연습 참조: GITHUB[https://github.com/CrystalAngelLee/ReactBasis] 연습 가랑이 밑 데모05.html
4.2 이벤트 바인딩: onEvent={this.handle Event} 예:
연습 참조: GITHUB[https://github.com/CrystalAngelLee/ReactBasis] 연습 가랑이 밑 데모06.html
주의: props 대상의 값은 읽기만 합니다!속성을 통해 전달된 값을 직접 수정할 수 없습니다
4.3 this.props.children props 대상의 속성과 이 구성 요소를 호출할 때 전달하는 속성은 일일이 대응합니다!그런데 좀 특이한 게 있어요.props.children 구성 요소 내의 요소가 하나라면 object가 여러 개이고array가 비어 있지 않습니다
        React.Children.map(                                                  this.props.children,                                                  function(value,key){                                                      return

{value}

;                                                  }                         ) 
연습 참조: GITHUB[https://github.com/CrystalAngelLee/ReactBasis] 연습 가랑이 밑 데모07.html
4.4 props 실현 방법의 전달 3단계: 1. 정의 방법login:function() {console.log('login success');} 2、방법을 구성 요소에 전달하고 Props 대상을 통해 My Button에서this를 호출합니다.props.myfunc();
연습 참조: GITHUB[https://github.com/CrystalAngelLee/ReactBasis] 연습 가랑이 밑 데모08.html
4.5 props 전달 방법은 자식과 아버지의 통신을 실현하기 위한 것이다
React 매개 변수가 있는 메서드 전달 ① 상위 어셈블리에서 메서드 정의하기 rcvMsg:function(msg)
② 서브어셈블리를 호출할 때 전달하는 방법 ③ 서브어셈블리 내부에서 호출하는 방법this.props.myFunc(123)
5. Ref(reference 참조/참조)
ref를 통해 지정한 구성 요소의 실례나 요소를 얻을 수 있습니다:this.refs.mySon
연습 참조: GITHUB[https://github.com/CrystalAngelLee/ReactBasis] 연습 가랑이 밑 데모09.html ：
1.cnpm 설치 방법:npm install -g cnpm --registry =https://registry.npm.taobao.org
2.sublime text 플러그인 설치 방법:sublime textea 설치package control=>pre=>emmet=>html-css-js prettify=>spacegray 템플릿
[오늘의 노트는 여기까지 하겠습니다. 관련된 연습 코드는gitHub(https://github.com/CrystalAngelLee/ReactBasis) 계속해서 드리며 노트도 매일 업데이트됩니다----크리스탈2 018년 7월 30일 카드 결산에서 왔습니다.]
6.state
React는 구성 요소를 하나의 상태 기계에 비유하고 구성 요소의 데이터는 상태를 통해 관리한다.
구성 요소 보기의 변화 본질은 모두 데이터의 변화로 이 데이터의 변화를 상태를 통해 나타낸다. 
(1) 상태에 대한 3가지 기본 작업:
초기화: getInitialState:function() {return {switch:true, myValue:1}
읽기 상태:this.state.switch
쓰기 상태:this.setState({switch:false},function() {//상태 설정이 성공한 후 리셋 함수});
(2)상태의 기능: ①상태는 데이터를 관리하는 데 사용되며 ②상태에서는 데이터가 보기에 귀속될 수 있다
주의: ① 구성 요소의 상태가 변할 때 구성 요소는 다시 렌더링됩니다 ②render 방법에서 상태 setState(maximum stack size exceeded)를 설정하는 것을 허용하지 않습니다
연습 참조: GITHUB[https://github.com/CrystalAngelLee/ReactBasis] 연습 가랑이 밑 데모11.html7.어셈블리 라이프 사이클
구성 요소의 생명 주기는 3단계로 나눌 수 있습니다. mount update unmount는 대응하는 단계에서 자신의 처리 함수인component Will Mountcomponent Did Mount를 가지고 있습니다.
componentWillUpdate componentDidUpdate
componentWillUnmount
주의사항: 1. ref의 사용은componentDidMount 이후에 해야 합니다. 2. 업데이트는state,props가 변할 때 업데이트와 관련된 처리 함수를 실행합니다.업데이트와 관련된 처리 함수는 매개 변수가 있고, 매 처리마다 두 개의 매개 변수가 있으며, 각각 대응하는 것은props\state이다
연습 참조: GITHUB[https://github.com/CrystalAngelLee/ReactBasis] 연습 가랑이 밑 데모12.html&Demo_13.html
8. 양식 구성 요소 처리 방법
제어된 폼 요소-value checked selected(개인이 제어하지 않는 요소,React의 제어를 받는다)
해결 방안: 방안 1: 제어된 폼 요소를 비제어된 폼 요소value --> defaultValue
방안2: 제어된 폼 요소에 대한 처리를 ① 초기화 ② 상태의 값을 폼 요소에 귀속시키는value/checked/selected ③ 폼 요소에 대응하는 이벤트와 대응하는 처리 함수 onChangehandleChange:function() {//수정 상태의 값this.setState({})}
연습 참조: GITHUB[https://github.com/CrystalAngelLee/ReactBasis] 연습 가랑이 밑 데모14.html
일상 지식:
1.yarn의 설치가 계속 잘못된 해결 주소를 받습니다.http://www.voidcn.com/article/p-yrikahtp-bos.html
2. GitHub에 VScode 동기화 코드를 구성하는 방법:

구성 환경 변수

디렉터리 통합 터미널 초기화 창고 열기

참조 사이트:https://www.jianshu.com/p/e9dd2849cfb0
[이상 크리스탈에서 온 2018년 7월 31일 카드 결산!]
학습react 관련 사이트를 수록하려면 다음과 같이 하십시오.
1、https://www.w3cplus.com/